Generating themes

Creating custom themes and especially their color palettes can be a challenge on its own. You have to learn about the available tokens and their roles in the components, as well as find values that are perceptually aligned for the users. To simplify this process, Reshaped includes a way to generate colors for your themes.

With the generateThemeColors helper, you can generate the whole palette for light and dark mode using a single primary hex color.

import { generateThemeColors } from "reshaped/themes";

const colors = generateThemeColors({ primary: "#2563eb" });

The same way, you can pass the starting values for other colors supported in Reshaped:

const colors = generateThemeColors({
  primary: "#...",
  critical: "#...",
  positive: "#...",
  neutral: "#...",
});

When generating the themes, we're adjusting the color values to look aligned across hues using the HSL and HSLuv color values. However, you can also override any specific value yourself, in case you don't like the generated default, using our regular color token format:

const colors = {
  ...generateThemeColors({ primary: "#..." }),
  backgroundElevationBase: { hex: "#fff", hexDark: "#..." },
};

When building a theme using our theming CLI, you can generate the theme in the reshaped.config.js file. Since generateThemeColors helper will only return the color values, you can use it for both – generating the whole theme or just a fragment containing the color tokens. You can also override specific color tokens like mentioned above.

const { generateThemeColors } = require("reshaped/themes");

const config = {
  themes: {
    productTheme: {
      color: generateThemeColors({ primary: "#2563eb" }),
    },
  },
  themeFragments: {
    productThemeFragment: {
      color: generateThemeColors({ primary: "#2563eb" }),
    },
  },
};

module.exports = config;

You can use our theming generation helper in the browser runtime as well, together with the getThemeCSS utility.

By default, runtime theming only generates css for the tokens you pass to it. In case you want to generate the colors, but also include the tokens from the full theme definition – you can use the baseThemeDefinition provided by the package:

import {
  getThemeCSS,
  generateThemeColors,
  baseThemeDefinition,
} from "reshaped/themes";

const css = getThemeCSS("myTheme", {
  ...baseThemeDefinition,
  color: generateThemeColors({ primary: "#2563eb" }),
});