React 切换主题颜色

1.src目录下创建content.ts

代码

import { createContext, useContext, useMemo } from 'react';
export enum Theme {
    Light = 'light',
    Dark = 'dark',
}

export const DEFAULT_THEME = Theme.Light;

//  设置主题颜色
export const ThemeContext = createContext<[Theme | string, (theme: Theme | string) => void]>([
    '',
    () => null,
]);

export function useThemeContext() {
    return useContext(ThemeContext);
}

export function useTheme(): [string, (theme: Theme | string) => void] {
    const [contextTheme, setContextTheme] = useThemeContext();

    const localTheme = useMemo(() => contextTheme ?? DEFAULT_THEME, [contextTheme]);
    const setTheme = (theme: Theme | string) => {
        setContextTheme(theme);
    };

    return [localTheme, setTheme];
}

2.src/创建index.css

代码

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body,
#root {
	height: 100%;
	width: 100%;
	position: relative;
}

/* :root {
	--success-light: theme('colors.success.light');
	--success-dark: theme('colors.success.dark');
	--warning-light: theme('colors.warning.light');
	--warning-dark: theme('colors.warning.dark');
	--issue-light: theme('colors.issue.light');
	--issue-dark: theme('colors.issue.dark');
	--steel: theme('colors.steel.DEFAULT');
	--steel-dark: theme('colors.steel.dark');
} */

/*---------------- 主题颜色 ----------------------*/
.light {
	--theme-text: red;
	
}
.dark {
	--theme-text: #06061a;
}

.defined-hero-darkest {
	color: var(--theme-text);
}

3.src/compoonents创建theme文件

3.1 => themeProvider.tsx
 

import React, { type ReactNode, useMemo, useState } from 'react';

import { ThemeContext, Theme } from '@/context';


export default function ThemeProvider({ children }: { children: ReactNode }): ReactNode {
	const [theme, setTheme] = useState<Theme | string>(Theme.Light);
	const localTheme = useMemo(() => {
		const storageTheme = localStorage.getItem('theme');
		if (storageTheme && storageTheme != 'undefined') {
			setTheme(storageTheme);
			return storageTheme;
		}
		return theme;
	}, [theme]);
	return (
		<ThemeContext.Provider
			value={[
				localTheme,
				(param: Theme | string) => {
					localStorage.setItem('theme', param);
					setTheme(param);
				},
			]}
		>
			<div className={localTheme}>{children}</div>
		</ThemeContext.Provider>
	);
}

3.2 => ThemeSelect.tsx

import { useTheme,Theme } from '@/context';
export default function ThemeSelect() {
	const [localTheme, setTheme] = useTheme();
	return (
		<div className={'theme-select-wrap'}>
			<div
				className='defined-hero-darkest'
				onClick={() => {
					setTheme(localTheme === Theme.Light ? Theme.Dark : Theme.Light);
				}}
			>
				{localTheme === 'light' ? <div >light</div> : <div>dark</div>}
			</div>
		</div>
	);
}

4.main.tsx中导入index.css,ThemeProvider

代码

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import "./index.css"

import { BrowserRouter } from 'react-router-dom';
import ThemeProvider from '@/components/theme/themeProvider';


ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
    <ThemeProvider>
    <App />
    </ThemeProvider>
     
    </BrowserRouter>
  </React.StrictMode>,
)

5.注册切换主题色组件

6.在任意标签添加以定义样式类名如defined-hero-darkest


注:!!!
.light或.dark内部才生效


使用某些组件库时不在.light或.dark内部不生效


只需在外部添加一个localTheme(light或.dark)即可