Palette variables

The library defines a color palette that sets defaults for global theme variables. If you want to keep the default theme but tweak shades (for example, change blue500), edit the palette variables. If you want to change the overall color scheme (for example, blue → green), use global theme variables.

Best Practices

  • Use palette variables only for shade tweaks; use global variables for brand-level changes.
  • Keep palette overrides minimal to avoid unexpected contrast regressions.
  • Align palette changes with your design system tokens to maintain consistency.
  • Re-check contrast in both light and dark themes after palette edits.
  • Prefer upstream variable names over hard-coded colors for maintainability.

You can find the list of palette variables on GitHub.