Setup Theme context for white theme support

[dpS1lence]

1 Read this

react-theme-context-setup

2 Then this

setup-in-react

3 then this

The presence of hardcoded color values in the design system or component code will cause a mismatch and prevent true theme switching. To make everything theme-aware, it’s best practice to reference CSS variables everywhere possible, both in Tailwind utility classes and in JS/TS files that define design system constants.

Here’s how to make your approach fully theme-compatible:

Reference CSS Variables in JS/TS and Utility Classes

• In your colors (and typography, cards, etc.), replace all hardcoded hex color assignments with references to CSS variables, e.g. var(--background) or var(--color-border), instead of using direct hex codes like #003566 or named constants like COLOR_BLUE.[^1][^2][^3][^4]
• In Tailwind utility class strings, use the new arbitrary value syntax to inject CSS variable values:
  • Instead of border-[${COLOR_BLUE}] or text-${COLOR_WHITE},
  • Use border-[var(--border)] or text-[var(--foreground)].[^2][^4]
  • E.g., for a button: class="border-[var(--border)] bg-[var(--background)] text-[var(--foreground)]"
• In your exported design system objects:

// Instead of
blue: COLOR_BLUE,
white: COLOR_WHITE,
border: COLOR_BLUE,
// Use
blue: 'var(--color-blue)',
white: 'var(--color-white)',
border: 'var(--border)',

Example: Refactor Design System Constants

export const colors = {
  background: 'var(--background)',
  surface: 'var(--card)',
  surfaceLight: 'var(--primary)',
  accent: 'var(--accent)',
  text: 'var(--foreground)',
  border: 'var(--border)',
  // ...add other semantic names as needed
}

Example: Using in Components

<Button
  variant="outline"
  className="border-[var(--border)] text-[var(--foreground)] bg-[var(--background)]"
/>

Why This Works

• CSS variables are dynamic, so when the theme changes, the variable references will resolve to the correct value.[^4][^1][^2]
• With Tailwind v4, using [var(--<name>)] form in arbitrary value utilities is the preferred approach for overriding colors, borders, and backgrounds at runtime.[^2][^4]
• This allows your entire React/Tailwind stack (including your TS design system) to be centrally controlled by your theme and enables instant theme switches without code changes or inconsistencies.[^3][^4][^2]

Conclusion

• Remove all direct color assignments in design system JS/TS, switch them to 'var(--name)' string references.
• Update Tailwind class usage in components to use [var(--name)].
• Define the actual values for each variable (--background, etc.) within your global CSS root and theme selectors.