当前位置：首页 > news >正文

@emotion/css + react+动态主题切换

news 来源：原创 2025/6/15 23:51:54

1.下载插件

npm install --save @emotion/css

2.创建ThemeContext.tsx

// src/ThemeContext.tsx
import React, { createContext, useContext, useState } from "react";

// 定义主题类型
export type Theme = "light" | "dark";

// 定义主题上下文的类型
interface ThemeContextType {
  theme: Theme;
  toggleTheme: () => void;
}

// 创建主题上下文
export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

// 创建一个主题提供器组件
export const ThemeProvider: React.FC = ({ children }) => {
  const [theme, setTheme] = useState<Theme>("light"); // 默认主题为 'light'

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
  };

  return <ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>;
};

// 创建一个自定义钩子来方便使用主题上下文
export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme must be used within a ThemeProvider");
  }
  return context;
};

3.创建themeConfig.ts配置主题颜色文件

//themeConfig.ts
import { Theme } from "./ThemeContext";

export const themes = {
  light: {
    backgroundColor: "#ffffff",
    color: "green",
    primaryColor: "#007bff",
    secondaryColor: "#6c757d",
  },
  dark: {
    backgroundColor: "#333333",
    color: "red",
    primaryColor: "#007bff",
    secondaryColor: "#6c757d",
  },
};

export const getTheme = (theme: Theme) => themes[theme];

4.在app.tsx 挂载


import { ThemeProvider } from "@/theme/ThemeContext";

const App = () => {
  return (
    <ThemeProvider>
      <div>App<div>
    </ThemeProvider>
  );
};

export default observer(App);

6.使用直接写样式方式一

// @live
import { useEffect } from "react";
import { css, cx } from "@emotion/css";
import { useTheme } from "@/theme/ThemeContext";
import { getTheme } from "@/theme/themeConfig";
import "./index.less";
const ThemeBox: any = () => {
  const { theme, toggleTheme } = useTheme();
  const currentTheme = getTheme(theme);

  const styles = css`
    background-color: ${currentTheme.color};
  `;
  return (
    <div className={cx("cockpit-contain", styles)} onClick={toggleTheme}>
    </div>
  );
};

export default ThemeBox;

6.使用类名方式二

// @live
import { useEffect } from "react";
import { css, cx } from "@emotion/css";
import { useTheme } from "@/theme/ThemeContext";
import { getTheme } from "@/theme/themeConfig";
import "./index.less";
const ThemeBox: any = () => {
  const { theme, toggleTheme } = useTheme();
  const currentTheme = getTheme(theme);

  const styles = css`
    .background {
      background-color: ${currentTheme.background};
    }
    .boder-color {
      border-color: ${currentTheme.borderColor};
    }
  `;
  return (
    <div className={cx("cockpit-contain", styles)} onClick={toggleTheme}>
        <div className={"background"}></div>
        <div className={"boder-color"}></div>
    </div>
  );
};

export default ThemeBox;