使用styled-components控制主题切换(有手就行)

主题的介绍

在计算机科学中，theme（主题）通常指网页、应用程序或操作系统界面的整体外观和样式。
主题可以包括颜色、字体、图标、背景等元素的组合。

在网页设计中，主题通常是由CSS （层叠样式表）定义的一系列规则集合。
这些规则控制文本、链接、按钮、表格、导航栏和其他组件的样式。
例如，一个主题可以指定黑色背景、白色文本和蓝色链接来创建一个专业和现代的外观。

对于应用程序和操作系统界面，主题通常由开发人员定义并可以通过用户选择进行更改。
主题可以提供不同的视觉效果，例如浅色或深色模式、不同的颜色方案或不同的图标集。
用户可以通过选择自己喜欢的主题来个性化他们的应用程序或操作系统界面。

需要注意以及准备

本篇文章需要使用 ‘styled-components插件控制style样式’
需要引入 antd 组件库
请创建一个theme文件夹，提供一个js文件存放两套主题
本篇文章使用react进行教学

终于不用js麻烦的切换两套不同的css了, 妈妈见了都说好_(:з」∠)_

开始使用

1. theme.js 文件

--- theme.js
--- 准备两套主题
const theme = {
  light: {
    backgroundColor: 'white',
    textColor: 'black'
  },
  dark: {
    backgroundColor: 'black',
    textColor: 'white',
  },
};

export default theme;

2. index.js 文件

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState} from 'react';
import { GlobalStyle } from './style'
import { ThemeProvider } from 'styled-components';
import theme from '../../utils/theme/theme';
import { Switch } from 'antd'
import { BulbOutlined } from '@ant-design/icons';

const Home = () => {
  // isDarkMode 切换主题的条件
  const [isDarkMode, setIsDarkMode] = useState(false);
  // 取反，等于切换主题样式
  const toggleTheme = () => setIsDarkMode(!isDarkMode);

  return (
  	  // 判断主题 theme上面引入了所以能用他下面的属性 dark：{} light：{}
      <ThemeProvider theme={isDarkMode ? theme.dark : theme.light}>
        // GlobalStyle是React中的一个组件，它可以用来定义全局样式。
        // 它允许开发者在React应用程序中定义全局样式，以便这些样式可以在整个应用程序中共享。
		// 在React中使用GlobalStyle组件时，可以将全局CSS样式定义在其中，并使用CSS属性来控制应用程序中的所有组件的外观。
        <GlobalStyle />
        <div className='top-operate-container'>
          <div className='operate'>
            <div className='left-container'>
              <ul className='navigate-list'>
                <li>首页</li>
                <li>动态</li>
                <li>发现</li>
              </ul>
            </div>
            <div className='right-container'>
              // 我用的antd的switch控制一键切换主题
              <Switch
                onChange={toggleTheme}
                checkedChildren={<BulbOutlined />}
                unCheckedChildren={<BulbOutlined />}
              />
            </div>
          </div>
        </div>
        <div className='content-container'>
          <div className='main'>
            最近更新
          </div>
        </div>
      </ThemeProvider>
  );
};

export default Home;

3. style.js 文件

// 某些样式我就不放了，你们自己写吧_(:з」∠)_

// 在使用styled-components库定义组件的样式时，可以使用props对象来获取组件的属性值
import { createGlobalStyle } from 'styled-components';
// createGlobalStyle是styled-components库中的一个函数，用于创建一个全局样式组件
// 它使得在React应用程序中定义全局样式变得非常方便，可以在整个应用程序中共享这些样式。

// 这里也可以放类名改样式（例子： .box1）
export const GlobalStyle = createGlobalStyle`
  .box1 { 
     color: ${(props) => props.theme.textColor}
   }
  body {
    background-color: ${(props) => props.theme.backgroundColor};
    color: ${(props) => props.theme.textColor};
    transition: 0.5s all;
  }
`;

4. 完结

---

至此主题就完全可以用了，您可以根据自己的需求进行扩展，一键开关灯，一键切换主题等…

---