Tango UI

0.9.9

Components

Tango Store

Tools

Update Log

MVP Verson: 0.9.9 beta

Get Started

Styles

Theme

Components

State management

Update Log

Theme Customize

You can use the built-in theme capability from tango-ui-cw to switch dark/light mode quickly, and further customize brand/semantic colors with CSS variables.

1. Setup ThemeProvider in Root Layout

Based on your current root layout, import ThemeProvider and wrap children:

import { ThemeProvider } from "tango-ui-cw";

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

2. Use useTheme in Any Client Component

In any component that needs to switch theme, use useTheme and call setTheme .

"use client";

import { useTheme } from "tango-ui-cw";

export default function ThemeSwitchExample() {
  const { theme, setTheme } = useTheme();

  return (
    <div>
      <button onClick={() => setTheme("light")}>Light</button>
      <button onClick={() => setTheme("dark")}>Dark</button>
      <div>Current theme: {theme}</div>
    </div>
  );
}

3. Advanced Color Customization via CSS Variables

If you need more than dark/light switching, you can directly set brand and semantic CSS variables:

const changeThemeColor = (color) => {
  document.documentElement.style.setProperty("--primary", color); // Brand primary color (global base)
  // Semantic variables below are independent. Set only the ones you need.
  document.documentElement.style.setProperty("--input-accent", color); // Input interaction accent
  document.documentElement.style.setProperty("--modal-ok-bg", color); // Modal OK button color
  document.documentElement.style.setProperty("--drawer-ok-bg", color); // Drawer OK button color
  document.documentElement.style.setProperty("--datepicker-confirm-bg", color); // DatePicker confirm color
  setPrimaryColor(color);
  };

4. Theme Initialization Tips

On first load, read theme from localStorage and apply class/data-theme to html to avoid flash.
If you support system mode, use prefers-color-scheme for automatic OS-level matching.
Use suppressHydrationWarning to reduce SSR/CSR mismatch warnings for initial theme state.

Mapping to Your Current Implementation

Root layout already wraps the app with ThemeProvider.
In pages/components, use setTheme from useTheme to switch themes.
Brand and semantic colors can be updated dynamically via document.documentElement.style.setProperty.