Welcome to Palette

Build with color.

Palette is a simple and powerful theme switcher designed for developers. Add beautiful light, dark, and custom color themes to your website without building everything from scratch.

Get Palette Learn More

Palette

COLOR YOUR WEB

About Palette

Simple. Powerful.

A theme system made for developers.

One Palette

Give your website a consistent color system with an easy-to-use theme switcher.

Made for the web

Palette makes it easier to add light mode, dark mode, and custom accent colors to your projects.

Instead of rebuilding a theme system every time, developers can simply include Palette and start building.

Start building

What Palette Uses

Built with the web.

HTML

Simple markup that works everywhere.

CSS

Modern CSS variables make themes easy to customize.

JavaScript

Fast and simple theme switching.

CDN

Developers can load Palette from jsDelivr.

Features For Developers

What Palette does. For Developers.

Dark Mode

Give your users a beautiful dark mode with one button.

Custom Colors

Let users choose their favorite accent color.

Developer Friendly

Add Palette to your project using a simple CDN.

For Developers

Add Palette to your site.

Copy these two lines and you're ready to go.

Install Palette

Palette is available through jsDelivr, so you don't need to download anything.

Light mode

Dark mode

Color themes

Local storage

palette.html ● CDN

<head>

  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>My Website</title>

  <!-- Palette CSS -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/LuckyFireball/PALETTE@main/palette.css"
  >

  <!-- Palette JavaScript -->
  <script
    src="https://cdn.jsdelivr.net/gh/LuckyFireball/PALETTE@main/palette.js"
    defer
  ></script>

</head>

Quick start

Just add the CDN.

<head>

  <!-- Palette CSS -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/LuckyFireball/PALETTE@main/palette.css"
  >

  <!-- Palette JavaScript -->
  <script
    src="https://cdn.jsdelivr.net/gh/LuckyFireball/PALETTE@main/palette.js"
    defer
  ></script>

</head>

Contact

Let's build something.

Have an idea for Palette or want to suggest a feature? Send a message.