前端开发人员面临着制作加强用户体验和适应用户偏好的用户界面的工作。带有 css 的 react 次要可用于创立多色可切换主题。为用户提供了在给定工夫点在主题色彩之间切换以适宜他们的偏好的特权。
介绍
在本文中，咱们将探讨应用 react、less 和其余依赖项构建多色主题的各种步骤和要求。目前市面上用的多的就两种计划：
- React-styled-components
- 全局保护两套主题色（如果只有
light和dark两种主题）以及全局的root变量以供组件援用，配合自定义context实现不同主题切换性能
集体不喜爱 styled-components 这种办法，款式、构造、脚本混在一起感觉有点顺当，感兴趣的能够本人去尝试，本文次要介绍第二种办法，并且配合 react 比拟风行的组件库antd 进行开发。
前置常识
读者应该有 react、less 和他们抉择的任何设计库的教训。如果您对上述语言或框架不称心，请在持续之前花点工夫理解基础知识。
React 中主题处理程序的组件
要实现构建可切换多色主题的指标，您的 Web 应用程序必须具备以下组件：
- 用于色彩状态治理的
Context Api - 导航栏 (主题切换按钮)
- 页面元素的设计依赖项
- 不同主题的全局
less文件
架构图
开始应用 React 进行主题开发
第 1 步：创立 React 应用程序
每次开发的第一步react都是创立react应用程序。这一步很容易实现。要创立您的react应用程序，请在命令终端中运行如下所示的命令：
npx create-react-app demo-app# oryarn create-react-app demo-app下面的 command 代码片段将创立您的 react 应用程序，装置默认的开发依赖项，并最终提供一个样板来开始您的利用程序开发。
第 2 步：编译 Antd 两种主题下的 less 文件
antd 主题配置大多数状况下咱们会在 webpack 配置文件中配置对应 less loader 批改其中的 less 变量来实现根底的主题色等的自定义需要，其中 antd 还给咱们提供了一种配置的 context api ，能够对组件配置国际化，自定义主题等性能。其中自定义主题（款式）能够通过批改内置的款式来实现，默认状况下，antd 组件内的款式名都是 ant 结尾，能够通过官网提供的 ConfigProvider 来批改这一配置， 即批改 prefixCls 属性。这样咱们能够通过运行时动静批改款式名前缀（白天模式跟黑夜模式各设置一个前缀）来实现白天跟黑夜模式的切换。antd 曾经把 dark 模式的款式给咱们了，当初，咱们先来把两套款式文件提取进去放在咱们我的项目中本人保护，这也是为了咱们更加不便地去批改咱们自定义所须要的色彩而不必通过批改全局款式去笼罩原有款式，这样即不必放心款式层级问题，也升高了保护老本。
留神：如果未装置less，则须要装置less：npm install -g less
进入我的项目根目录，执行以下命令：
# 白天模式lessc --js --modify-var="ant-prefix=custom-light" node_modules/antd/dist/antd.variable.less custom-light.css# 黑夜模式lessc --js --modify-var="ant-prefix=custom-dark" node_modules/antd/dist/antd.variable.less custom-dark.css执行完会在我的项目根目录（脚本执行时的目录）生成两份 css 文件，为了后续开发不便，能够把这两份 css 后缀改为 less。如图：
其中，global.less 用于保留全局款式变量
第 3 步：创立主题上下文
在 theme/context 目录下新建一个用于解决全局 theme mode 变量、模式初始化、以及模式切换逻辑的 Provider，其中重要的逻辑有以下三点：
初始化以后用户保留的模式，从本地缓存中查找，没有的话走最初始用户没设置过的逻辑——追随以后用户零碎的模式，重要知识点：
// 匹配浏览器的主题window.matchMedia('(prefers-color-scheme: light)')// 获取初始主题模式const getThemeMode = () => { return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'}// 监听浏览器（零碎）主题变动const matchMediaHandler = window.matchMedia('(prefers-color-scheme: light)')matchMediaHandler.addEventListener('change', changeColorMode)每次用户手动切换主题后就追随用户习惯走
const localKey = 'theme-mode'const getStorage = () => { const value = localStorage.getItem(localKey) return value ? value : getThemeMode()}
裸露给开发人员以后的
mode以及切换mode的switch办法const switchModeHandler = (value: string) => { const doc = document.querySelector('body') if (doc) { doc.removeAttribute('class') doc.classList.add(value) setStorage(value) setMode(value) }}const contextValue: ThemeContextType = { mode: mode, switchMode: switchModeHandler}
包裹
antd提供的ConfigProvider，依据mode的变幻动静传值批改prefixCls的值以动静批改组件内的款式return ( // 自定义全局保护的主题 <ThemeContext.Provider value={contextValue}> {/*antd 的主题*/} <ConfigProvider prefixCls={`custom-${mode}`}> {props.children} </ConfigProvider> </ThemeContext.Provider>)
残缺代码如下：
import React, { createContext, useEffect, useState } from 'react'import { ConfigProvider } from 'antd'const localKey = 'theme-mode'const getStorage = () => { const value = localStorage.getItem(localKey) return value ? value : getThemeMode()}const setStorage = (value: string) => { localStorage.removeItem(localKey) localStorage.setItem(localKey, value)}const getThemeMode = () => { return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'}// CONTEXTinterface ThemeContextType { mode: string switchMode: (value: string) => void}export const ThemeContext = createContext<ThemeContextType>({ mode: '', switchMode: () => {}})// PROVIDERexport const ThemeContextProvider: React.FC<{ children: JSX.Element}> = props => { const [mode, setMode] = useState('') useEffect(() => { const changeColorMode = () => { const color = getThemeMode() switchModeHandler(color) } const matchMediaHandler = window.matchMedia('(prefers-color-scheme: light)') matchMediaHandler.addEventListener('change', changeColorMode) switchModeHandler(getStorage()) return () => matchMediaHandler.removeEventListener('change', changeColorMode) }, []) const switchModeHandler = (value: string) => { const doc = document.querySelector('body') if (doc) { doc.removeAttribute('class') doc.classList.add(value) setStorage(value) setMode(value) } } const contextValue: ThemeContextType = { mode: mode, switchMode: switchModeHandler } return ( // 自定义全局保护的主题 <ThemeContext.Provider value={contextValue}> {/*antd 的主题*/} <ConfigProvider prefixCls={`custom-${mode}`}> {props.children} </ConfigProvider> </ThemeContext.Provider> )}### 第 4 步：创立UI界面
第 5 步：提供界面组件须要的全局款式变量
在 theme/styles/global.less 新增如下变量：
:root { --light-color: #fff; --dark-color: #000;}body { &.light { --default-bg: var(--light-color); --default-text-color: var(--dark-color); } &.dark { --default-bg: var(--dark-color); --default-text-color: var(--light-color); }}利用全局款式变量，如 NavBar 组件的款式文件中（其余组件同理）：
.container { background: var(--default-bg); color: var(--default-text-color);}第 6 步：切换主题
在 NavBar 组件中：
import React, { type FC, useContext } from 'react'import cls from 'classnames'import { SearchBar } from '@common/components'import { ThemeContext } from '@src/theme/context'import styles from './index.module.less'const NavBar: FC = () => { const { mode, switchMode } = useContext(ThemeContext) return ( <div className={cls(styles.container, styles[mode])} > <div className={styles.relativeWrap}> <div className={styles.themeSwitch} onClick={() => switchMode(mode === 'dark' ? 'light' : 'dark')} > <img src={ mode === 'dark' ? 'https://assets.blocksec.com/image/1664446020484-3.svg' : 'https://assets.blocksec.com/image/1664446020484-2.svg' } alt="" /> </div> </div> </div> )}export default NavBar论断
在本文中，咱们利用了各种概念来应用 React 创立多主题。咱们还应用react-context-api.
本文涵盖的概念可用于将来波及色彩和主题治理的我的项目。
我心愿您发现这些内容对您的编程工作有帮忙。