Theme Switch

Summary

Tango UI provides a simple and efficient theme switching feature, supporting dynamic switching between light and dark themes. Through the built-in ThemeProvider and useTheme Hook, you can easily implement theme management for your application.

Caution

All Tango UI components can directly support theme switching. If you want other elements to also support theme colors, you must use the Space component.

Demo

Quick Settings:

Current Theme Color

#fafafa

Custom Color

Preset Colors

💡 Click on preset colors or use the color picker to customize the theme color, and preview the changes in real-time.

Card

Card Title

This is a sample card that demonstrates the style changes after theme switching.

Card Title

This is a sample card that demonstrates the style changes after theme switching.

MaterialButton

Input

Table

Name	Age	Gender	Math Score	English Score	Address
Brown	32	Male	80	87	New York No. 1 Lake Park
John Doe	42	Female	60	105	Shanghai Pudong New District First Lake Park
John Smith	45	Male	75	90	Guangzhou Tianhe District First Lake Park

Installation and Configuration

1. Import the ThemeProvider from root component

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

function Root() {
  return (
    <ThemeProvider>
      <App />
    </ThemeProvider>
  );
}

2. Use in Component

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

function ThemeSwitch() {
  const { toggleTheme } = useTheme();

  return (
    <button onClick={toggleTheme}>
      Switch Theme
    </button>
  );
}

Syntax

const { theme, toggleTheme, setTheme } = useTheme();

API

Prop	Type	Accepted Values	Description	Default
theme	string	light \| dark	specify the current theme,two themes are supported: 'light' and 'dark'.	light
toggleTheme	function	() => void	a function used to switch themes.	-
setTheme	function	(theme: 'light' \| 'dark') => void	a function used to set the theme.	-

Best Practices

Use ThemeProvider at the top level of your application
Place the theme switch button in a global component or navigation area