Theme Customization

Easily customize theme using plugin. The plugin works by modifying CSS variables, which are then injected into CSS and utilized by component styles.

Prerequisites

Before customizing theme colors, ensure you have @radix-ui/colors installed. Plugin relies on Radix UI colors, bypassing Tailwind CSS's default palette.

Customizing

To tailor your theme, navigate to tailwind.config.ts and provide a configuration object to the plugin. The plugin accepts only one configuration parameter, enabling you to override all default theme values and create a fully customized theme from scratch.

new theme

When creating a new theme, remember to use the createColorScale function to define your colors. As Plugin relies on Radix UI colors, please select colors from the official Radix UI color palette: @radix-ui/colors.

tailwind.config.ts

import { createColorScale, typeweave } from '@typeweave/plugin';
import { teal, tealDark } from '@radix-ui/colors';
import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './app/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './node_modules/@typeweave/react/src/**/*.styles.ts',
  ],
  plugins: [
    typeweave({
      themes: {
        light: { colors: { primary: createColorScale(teal) } },
        dark: { colors: { primary: createColorScale(tealDark) } },
      },
    }),
  ],
};

export default config;

API

Plugin accepts these properties in config object.

colorMode

defaultTheme

defaultColors

defaultLayout

themes

PluginConfig

export type ColorScale = Record<string, string>;

export type ThemeColors = Partial<{
  background: string;
  foreground: string;
  primary: ColorScale;
  secondary: ColorScale;
  success: ColorScale;
  warning: ColorScale;
  danger: ColorScale;
  info: ColorScale;
  muted: ColorScale;
  overlay: string;
  focus: string;
  paper: string;
}>;

export type ThemeLayout = Partial<{
  borderRadius: string;
  boxShadow: {
    depthElevation?: string;
  };
}>;

export type Theme = Partial<{
  /** @default light */
  base: 'light' | 'dark';
  colors: ThemeColors;
  layout: ThemeLayout;
}>;

export type BaseThemes = Partial<{
  light: Omit<Theme, 'base'>;
  dark: Omit<Theme, 'base'>;
}>;

export type Themes = BaseThemes & Record<string, Theme>;

export type PluginConfig = Partial<{
  colorMode: 'rgb' | 'hsl';
  defaultTheme: string;
  defaultColors: Partial<{ light: ThemeColors; dark: ThemeColors }>;
  defaultLayout: Partial<{ light: ThemeLayout; dark: ThemeLayout }>;
  themes: Themes;
}>;

default theme

import * as colors from '@radix-ui/colors';

const lightMuted = colors.gray;
const lightBg = '#ffffff';

const lightThemeColors: ThemeColors = {
  background: lightBg,
  foreground: lightMuted.gray11,
  primary: createColorScale(colors.violet),
  secondary: createColorScale(colors.plum),
  success: createColorScale(colors.green),
  warning: createColorScale(colors.orange),
  danger: createColorScale(colors.red),
  info: createColorScale(colors.blue),
  muted: createColorScale(lightMuted),
  overlay: colors.blackA.blackA6,
  focus: colors.blue.blue7,
  paper: lightBg,
};

const darkMuted = colors.grayDark;
const darkBg = colors.grayDark.gray1;

const darkThemeColors: ThemeColors = {
  background: darkBg,
  foreground: darkMuted.gray11,
  primary: createColorScale(colors.violetDark),
  secondary: createColorScale(colors.plumDark),
  success: createColorScale(colors.greenDark),
  warning: createColorScale(colors.orangeDark),
  danger: createColorScale(colors.redDark),
  info: createColorScale(colors.blueDark),
  muted: createColorScale(colors.grayDark),
  overlay: colors.blackA.blackA3,
  focus: colors.blueDark.blue7,
  paper: darkMuted.gray5,
};

Edit this page

installation

dark mode