Documentation

Theming

Designers supports light, dark, and system themes out of the box. Use the ThemeProvider and useTheme hook to control and customize your app's appearance. Theme switching is instant and works with all tokens and components.

  • Supports light, dark, and system color modes
  • Theme-aware tokens update automatically
  • Custom themes and color overrides supported
Tip: Use the ThemeProvider at the root of your app for global theming.

Usage Example

import { ThemeProvider, useTheme } from 'designers/react';

export default function App({ children }) {
  return (
    <ThemeProvider defaultMode="system">
      {children}
    </ThemeProvider>
  );
}

// In a component
const { mode, setMode } = useTheme();
setMode('dark'); // Switch to dark mode

How Theme Switching Works

  • Default mode is system (follows OS preference)
  • Call setMode('light' | 'dark') to switch manually
  • All tokens and components update instantly on mode change
Pro Tip: You can create your own color schemes and pass them to ThemeProvider for full customization.

What's Next?

Quick StartConfigurationDesign Tokens