ant-design主题色切换

ant-design的主题色切换

最近写了个网站需要用到主题切换，虽然是个b端项目，虽说可有可无这个主题切换但是还是写了，正如我的网站昵称，半吊子前端攻城狮我之前是没有写过这个的,所以经常一番查阅资料最终得到了以下教程!

前提准备(本次教程环境):

• .redux-tookit或者redux再者其他全局状态管理
• ant-design v5以上
• react 18以上

步骤一.因为需要全局任何地方都可以切换主题,我这里用了redux-tookit,其实可以不用,我就是为了回顾一下子,

yarn add redux-tookit

安装完毕之后创建redux文件夹然后创建一个themeslice.js文件

// themeSlice.js
import { createSlice } from '@reduxjs/toolkit';

export const themeSlice = createSlice({
  name: 'theme',
  initialState: {
    value: 'light',
  },
  reducers: {
    toggle: state => {
      state.value = state.value === 'light' ? 'dark' : 'light';
    },
  },
});

export const { toggle } = themeSlice.actions;

export const selectTheme = state => state.theme.value;

export default themeSlice.reducer;

然后创建一个store文件

// store.js
import { configureStore } from '@reduxjs/toolkit';
import themeReducer from './Slice/themeSlice';


export default configureStore({
  reducer: {
    theme: themeReducer,
  },
});

接下来去index.js里面挂载,这里大家看看代码,这里我们在需要的地方写一个改变状态的事件

antd切换主题色文档< /a>

在线主题编辑器< /a>

博客链接

//举例子写的demo
import { React, UploadOutlined, UserOutlined, VideoCameraOutlined, Layout, Menu, theme } from './homeimport';
const { Header, Content, Footer, Sider } = Layout;
import { useSelector, useDispatch } from 'react-redux';
import { selectTheme, toggle } from '../../Redux/Slice/themeSlice';
import { ConfigProvider } from 'antd';
const items = [UserOutlined, VideoCameraOutlined, UploadOutlined, UserOutlined].map(
  (icon, index) => ({
    key: String(index + 1),
    icon: React.createElement(icon),
    label: `nav ${index + 1}`,
  }),
);
const App = () => {
  const theme = useSelector(selectTheme);
  const dispatch = useDispatch();

  return (
    <ConfigProvider>
      <Layout>
        <Sider
          breakpoint="xl"
          collapsedWidth="0"
          onBreakpoint={(broken) => {
            console.log(broken);
          }}
          onCollapse={(collapsed, type) => {
            console.log(collapsed, type);
          }}
        >
          <div className="demo-logo-vertical" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} />
        </Sider>
        <Layout style={{width: '100%',height: '100vh'}}>
          <Header
            style={{
              padding: 0,
              // background: colorBgContainer,
            }}
          />
          <Content
            style={{
              margin: '24px 16px 0',
            }}
          >
            <div
              style={{
                padding: 24,
                minHeight: 360,
                // background: colorBgContainer,
                // borderRadius: borderRadiusLG,
              }}
            >
              <div>
                <button onClick={() => dispatch(toggle())}>
                  Toggle theme
                </button>
                {/* rest of your app */}
              </div>
            </div>
          </Content>
          <Footer
            style={{
              textAlign: 'center',
            }}
          >
            Ant Design ©{new Date().getFullYear()} Created by Ant UED
          </Footer>
        </Layout>
      </Layout>
    </ConfigProvider>
  );
};
export default App;

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider, useSelector } from "react-redux";
import store from "./Redux/store";
import App from "./App";
import { ThemeProvider } from "antd-style";//这是antd的样式组件切换
import 'lib-flexible';
const ThemedApp = () => {
  const value = useSelector((state) => state.theme.value);
  const language=useSelector((state)=>state.language.value)
  return (
    
   
    <ThemeProvider
      theme={() => {
        // 如果是暗色模式，就返回暗色主题
        if (value === "dark") {
          return {
            "token": {
              "colorSuccess": "#64c037",
              "wireframe": false,
              "colorPrimaryBg": "#0d121b",
              "colorBgBase": "rgb(90 90 90)",
              'colorText':'#000'
            },
          };
        }

        // 否则就返回默认主题
        return {
          token: {
            "colorPrimary": "#5da0ff",
            "colorInfo": "#5da0ff",
            "colorSuccess": "#64c037",
            "wireframe": false,
            'colorText':'#000'
                   
          },
        };
      }}
    >

  );
};

const root = document.getElementById("root");
ReactDOM.createRoot(root).render(
  <React.StrictMode>
    <Provider store={store}>
      <ThemedApp />
      <ToastContainer />
    </Provider>
  </React.StrictMode>
);

教程结束了,修改具体的组件颜色切换可以看看上面的文档!