Custom Themes

How to create custom themes with Wedges.

With Wedges you have the option to create a new theme using the default ones as a foundation. In the following example, we’ll create a dark-blue theme, extending the standard dark theme.

Define Colors

For optimal results, creating a ten-step graded color scale for your custom themable colors is recommended. You may find these online tools helpful in generating custom color scales: Palettte and Eva Design System.

Let’s define primaryBlue color scale:

import type { ThemableColorScale } from "@lemonsqueezy/wedges";
 
const primaryBlue: ThemableColorScale = {
  100: "#DAF0FF",
  200: "#B5DEFF",
  300: "#90C9FF",
  400: "#75B6FF",
  500: "#4796FF",
  600: "#3374DB",
  700: "#2356B7",
  800: "#163C93",
  900: "#0D297A",
  DEFAULT: "#4796FF", // 500
};

Alternatively, you can use professionally designed colors scales defined in the Wedges color palette. Import wedgesPallette to start using predefined colors:

import { wedgesPalette } from "@lemonsqueezy/wedges";
 
const primaryBlue = wedgesPalette.blue;
const orange500 = wedgesPalette.orange[500];

Update Tailwind Config

To create a new theme, you need to provide a configuration object to the wedgesTW plugin in your tailwind.config file.

tailwind.config.ts
import { wedgesTW } from "@lemonsqueezy/wedges";
import type { Config } from "tailwindcss";
 
const primaryBlue: ThemableColorScale = {
  100: "#DAF0FF",
  200: "#B5DEFF",
  300: "#90C9FF",
  400: "#75B6FF",
  500: "#4796FF",
  600: "#3374DB",
  700: "#2356B7",
  800: "#163C93",
  900: "#0D297A",
  DEFAULT: "#4796FF", // 500
};
 
const config: Config = {
  content: [
    // ...
    "node_modules/@lemonsqueezy/wedges/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {},
  darkMode: "class",
  plugins: [
    wedgesTW({
      themes: {
        "dark-blue": {
          extend: "dark",
          colors: {
            // Replace primary color
            primary: primaryBlue,
 
            // Partially replace secondary color
            secondary: {
              900: "#FF6838",
            },
          },
        },
      },
    }),
  ],
};

In the example above, we’ve created a new theme called dark-blue that extends the dark theme. We’ve also replaced the primary color with our custom primaryBlue color scale and partially replaced the secondary color, specifically secondary.900 with a custom color.

Use The New Theme

Now that we’ve created a new theme, we can use it in our application. To do so, we need to add the dark-blue class to the html or any parent element of the component we want to use the theme on.

Default ThemesAdditional Utilities
Edit this page