目前随着暗黑模式在各个系统的支持和推广下已经非常常见，浏览器相对应 API 也有较普遍的兼容性，并且通过 CSS Variables 现在可以方便的实现暗黑模式/白天模式样式切换，样式代码也利于维护不需要编写多份样式只需定义不同主题下的样式变量。

目前常见的实现暗黑模式的通用方案大概有以下几种，参考 CSS Tricks 文章

  • Using a Body Class (样式中每个 class 都写单独的样式，切换 class)
  • Using Separate Stylesheets （为每个主题维护不同样式文件）

  • Using Custom Properties（使用 CSS Variables，通过给 html 标签切换 data 属性，本文所采用的方案）

    项目演示

    darkmode.gif

  • 项目源码

  • 演示地址 - 移动站点建议在手机模式下预览

    技术

  • React - 本文的框架选择，Vue 也可以采用类似的方案，组件库选择和组件编写方式可能存在区别

  • Vite - 项目初始化及开发部署
  • React Vant - 组件库选择，其他组件库样式切换方案可能有区别需参考组件库文档
  • Less - 样式编写和维护

    初始化项目

    使用 Vite 初始化和开发部署项目，之前曾写过一篇 Vite 和 React 项目搭建的文章可做参考，项目搭建也非本文重点，所以这里不再详细描述项目搭建环节。该项目为手机端项目，预览调试需在手机模式。
    1. # 创建项目
    2. npm create vite@latest react-darkmode-demo -- --template react-ts
    3. # 创建文件目录结构
    4. cd src && mkdir -p assets assets/icons assets/images components constants pages pages/home styles utils
    5. # 引入相关依赖
    6. npm i react-vant
    7. npm i -D less postcss-px-to-viewport
    8. cd styles && touch css-variable.less global.less index.less react-vant.less variables.less common.less
    9. # 工程化相关配置 (具体配置见 https://juejin.cn/post/7121685782980952101#heading-13)
    10. npm i -D eslint eslint-config-react-app eslint-config-prettier prettier lint-staged rollup-plugin-visualizer @types/node@16 cross-env
    11. npx husky-init && npm install
    12. touch .eslintrc .eslintignore .prettierrc .prettierignore
    具体配置可以参考项目源码该 Commit

    核心逻辑

    样式文件中定义好一些默认主题颜色的样式变量, 然后再定义通过 Javascript 切换为暗黑模式时的主题颜色的样式变量。实际使用时只需在对应样式使用该样式变量即可，不需要写重复样式。 ```less :root { —text-color: #222; —bkg-color: #fff; —anchor-color: #0033cc; }

:root[data-theme=dark] { —text-color: #eee; —bkg-color: #121212; —anchor-color: #809fff; }

body { color: var(—text-color); background: var(—bkg-color); } a { color: var(—anchor-color); }

  1. ```html
  2. <button id="theme-button">切换主题</button>

以下是通过 Javascript 给 html 标签加上 data-theme 属性来切换不同主题的示例代码。

  1. const btn = document.getElementById('theme-button')
  2. const theme = localStorage.getItem('theme')
  3. btn.addEventListener('click', () => {
  4.   html.setAttribute('data-theme', theme === 'light' ? 'dark' : 'light');
  5. })

也可通过媒体查询来定义不同主题样式，这样主题可以跟随系统选择自动切换而非手动切换主题可以更加灵活。

  1. @media (prefers-color-scheme: dark) {
  2.   /* Dark theme styles go here */
  3. }
  5. @media (prefers-color-scheme: light) {
  6.   /* Light theme styles go here */
  7. }
  1. const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");

编写样式

这是所有样式变量的总入口，将一些样式变量定义在 :root 选择器下，暗黑模式该样式变量显示不同颜色时直接在 :root[data-theme='dark'] 选择器下覆盖该样式变量，这样可以统一方便管理维护，也避免了额外的样式编写和查找工作。
具体的颜色和属性值需要实际开发时参考自己项目和 UI 设计开发，这里给出一个示例项目的参考。
css-variables.less

  1. :root {
  2.   --app-color-white: #fff;
  4.   // 颜色规范
  5.   --app-primary-color: #3f7fff;
  6.   --app-primary-end-color: #2d38f6;
  7.   --app-text-color: #31353c;
  8.   --app-text-second-color: #7e7c82;
  9.   --app-text-sub-color: #8a8a99;
  10.   --app-text-sub-second-color: #bebecc;
  11.   --app-text-link-color: var(--app-primary-color);
  12.   --app-text-link-second-color: #6b6b6b;
  13.   --app-divider-color: #eaeaea;
  14.   --app-background-color: #f5f5f5;
  15.   --app-page-background-color: var(--app-color-white);
  16.   --app-navbar-background-color: #ffffff;
  17.   --app-navbar-text-color: var(--app-text-color);
  18.   --app-tabbar-background-color: var(--app-color-white);
  19.   --app-tabbar-text-color: #a8a8a8;
  20.   --app-tabbar-text-active-color: var(--app-primary-color);
  21.   --app-tabbar-text-active-gradient-color: linear-gradient(
  22.     90deg,
  23.     #3f7fff 0%,
  24.     #2c36f5 100%
  25.   );
  26.   --app-success-color: #32d74b;
  27.   --app-danger-color: @danger;
  29.   // Tab
  30.   --app-tab-height: 31px;
  31.   --app-tab-background-color: var(--app-navbar-background-color);
  32.   --app-tab-text-color: #62626b;
  33.   --app-tab-text-active-color: var(--app-text-color);
  35.   // Popup
  36.   --app-popup-background: var(--app-navbar-background-color);
  38.   // Button
  39.   --app-button-sm-height: 24px;
  40.   --app-button-sm-border-radius: @border-radius-md;
  42.   // Tag
  43.   --app-tag-background-color: #eaeaea;
  44.   --app-tag-text-color: var(--app-text-second-color);
  46.   // Switch
  47.   --app-switch-active-color: var(--app-success-color);
  48.   --app-switch-inactive-color: rgba(120, 120, 128, 0.16);
  49. }
  51. :root[data-theme='dark'] {
  52.   // 颜色规范
  53.   --app-primary-color: #3f7fff;
  54.   --app-primary-end-color: #2d38f6;
  55.   --app-text-color: #ffffff;
  56.   --app-text-second-color: #86878b;
  57.   --app-text-sub-color: #76727d;
  58.   --app-text-sub-second-color: #bebecc;
  59.   --app-text-link-color: var(--app-primary-color);
  60.   --app-text-link-second-color: var(--app-text-second-color);
  61.   --app-divider-color: #404141;
  62.   --app-background-color: #151619;
  63.   --app-page-background-color: #25272f;
  64.   --app-navbar-background-color: #25272f;
  65.   --app-navbar-text-color: var(--app-text-color);
  66.   --app-tabbar-background-color: #23242e;
  67.   --app-tabbar-text-color: #62626b;
  69.   // Tab
  70.   --app-tab-text-color: #979797;
  72.   // Tag
  73.   --app-tag-background-color: #373c4a;
  75.   // Switch
  76.   --app-switch-inactive-color: rgba(120, 120, 128, 0.32);
  77. }

另外，由于我们使用 Less 来辅助编写样式，所以我们可以将以上 css-variables.less 文件中定义的 CSS Variables 定义为 Less 中的变量，后续直接使用 Less 变量可以减少代码量，当然这一步是可选的。
variables.less

  1. @primary-color: var(--app-primary-color);
  2. @text-color: var(--app-text-color);
  3. @text-second-color: var(--app-text-second-color);
  4. @navbar-background-color: var(--app-navbar-background-color);
  5. @page-background-color: var(--app-page-background-color);
  7. // Color Palette
  8. @black: #000;
  9. @white: #fff;
  10. @danger: #ea4d44;
  12. @link-color: var(--app-text-link-color);
  13. @link-second-color: var(--app-text-link-second-color);

由于我们使用的组件库是React Vant，其中一些组件样式和 UI 设计会有一些差异，所以需要对组件库样式进行覆盖，好在 React Vant 提供多种主题定制方法，这里结合我们使用 CSS Variables 并且 React Vant 也支持该方式，所以可以直接用 CSS Variables 的方式修改，非常的方便便捷。其他组件库的样式覆盖需要参考其文档。
react-vant.less

  1. @import './variables.less';
  3. :root:root {
  4.   // NavBar
  5.   --rv-nav-bar-height: 44px;
  6.   --rv-nav-bar-background-color: var(--app-navbar-background-color);
  7.   --rv-nav-bar-title-text-color: var(--app-navbar-text-color);
  8.   --rv-nav-bar-icon-color: var(--app-navbar-text-color);
  9.   --rv-nav-bar-text-color: @text-color;
  11.   // TabBar
  12.   --rv-tabbar-background-color: var(--app-tabbar-background-color);
  13.   --rv-tabbar-item-text-color: var(--app-tabbar-text-color);
  14.   --rv-tabbar-item-active-color: var(--app-tabbar-text-active-color);
  15.   --rv-tabbar-item-active-background-color: var(
  16.     --app-tabbar-text-active-gradient-color
  17.   );
  20.   // Button
  21.   --rv-button-plain-background-color: transparent;
  22.   --rv-button-border-radius: @border-radius-lg;
  23.   --rv-button-mini-padding: 0 @padding-xs;
  25.   // Search
  26.   --rv-search-background-color: transparent;
  27.   --rv-search-content-background-color: @navbar-background-color;
  28.   --rv-search-label-color: @text-color;
  29.   --rv-search-left-icon-color: @text-color;
  30.   --rv-search-action-text-color: @text-color;
  31.   --rv-search-padding: 0;
  32.   --rv-search-input-height: 39px;
  33.   --rv-field-input-text-color: @text-color;
  35.   // Cell
  36.   --rv-cell-group-inset-padding: 0;
  37.   --rv-cell-text-color: @text-color;
  38.   --rv-cell-background-color: @navbar-background-color;
  39.   --rv-cell-group-background-color: @navbar-background-color;
  40.   --rv-cell-border-color: @border-color;
  41. }
  43. :root:root[data-theme='dark'] {
  44.   // Cell
  45.   --rv-cell-active-color: var(--app-tabbar-text-color);
  46. }

index.less 最后在该文件中引入以上文件，在 main.tsx 引入 index.less 使样式生效

  1. @import './css-variables.less'; // 全局 css 变量
  2. @import './react-vant.less'; // 覆盖 react-vant 样式

React 组件

定义工具类及通用方法

utils.ts 在该文件中先定义主题常量和一些可复用的方法，在后续组件编写中会使用到
这里定义主题常量，用来区分白天/暗黑主题

  1. enum Theme {
  2.   LIGHT = 'light',
  3.   DARK = 'dark',
  4. }
  5. const themes: Array<Theme> = Object.values(Theme);

通过 window.matchMedia 媒体查询可以获得系统设置的主题，如果需要根据用户系统设置时自动切换主题就需要使用到该媒体查询

  1. const prefersDarkMQ = '(prefers-color-scheme: dark)';
  3. const getPreferredTheme = () =>
  4.   window.matchMedia(prefersDarkMQ).matches ? Theme.DARK : Theme.LIGHT;

切换主题时需要更新 html 标签的 data-theme 属性，该操作也会在多个地方使用，所以我们也定义一个函数方便复用。最后将这些导出即可。

  1. const updateHtmlTag = (str: string) => {
  2.   const html = document.querySelector('html');
  3.   html?.setAttribute('data-theme', str);
  4. };
  6. export { Theme, themes, updateHtmlTag, getPreferredTheme, prefersDarkMQ };

实现 React 组件 ThemeProvider

接着我们编写 React 组件的核心逻辑 ThemeProvider.tsx。主要实现方式是通过 React Context 这一特性，使用该特性可以在任意子组件中取出当前主题和修改主题，极大的增加了组件的通用性。
首先先倒入必要的方法，这里我们将用户保存的设置保存在 localStorage 中以便刷新后还能获取到用户设置的主题，所以额外引入 react-use 的 useLocalStorage hook

  1. import {
  2.   LOCAL_STORAGE_KEY_THEME,
  3.   LOCAL_STORAGE_KEY_THEME_SYSTEM,
  4. } from '@/constants/config';
  5. import { noop } from '@/utils';
  6. import { createContext, useContext, useEffect, useState } from 'react';
  7. import { useLocalStorage } from 'react-use'; 
  8. import {
  9.   getPreferredTheme,
  10.   prefersDarkMQ,
  11.   Theme,
  12.   themes,
  13.   updateHtmlTag,
  14. } from './utils';

创建一个新的 Context, 并通过 useContext 这一 hook 封装 useTheme hook

  1. type ThemeContextType = {
  2.   theme: Theme;
  3.   setTheme: React.Dispatch<React.SetStateAction<Theme>>;
  4.   isPreferSystemTheme: boolean | undefined; // 主题是否跟随系统
  5.   setIsPreferSystemTheme: React.Dispatch<
  6.     React.SetStateAction<boolean | undefined>
  7.   >; // 设置主题是否跟随系统
  8. };
  10. // 创建 Context 并定义默认值
  11. const ThemeContext = createContext<ThemeContextType>({
  12.   theme: getPreferredTheme(), 
  13.   setTheme: noop,
  14.   isPreferSystemTheme: true,
  15.   setIsPreferSystemTheme: noop,
  16. });
  17. ThemeContext.displayName = 'ThemeContext';
  19. const useTheme = () => {
  20.   return useContext(ThemeContext);
  21. };
  1. function ThemeProvider({
  2.   children,
  3.   specifiedTheme,
  4. }: {
  5.   children: React.ReactNode;
  6.   specifiedTheme?: Theme | null;
  7. }) {
  8.   /**
  9.    * 主题是否跟随系统，默认 true
  10.    */
  11.   const [isPreferSystemTheme, setIsPreferSystemTheme] = useLocalStorage(
  12.     LOCAL_STORAGE_KEY_THEME_SYSTEM,
  13.     true
  14.   );
  15.   const [theme, setTheme] = useState<Theme>(() => {
  16.     if (specifiedTheme) {
  17.       if (themes.includes(specifiedTheme)) return specifiedTheme;
  18.     }
  20.     if (isPreferSystemTheme) {
  21.       return getPreferredTheme();
  22.     }
  24.     const localTheme = window.localStorage.getItem(
  25.       LOCAL_STORAGE_KEY_THEME
  26.     ) as Theme | null;
  27.     if (localTheme) {
  28.       return localTheme;
  29.     }
  31.     return getPreferredTheme();
  32.   });
  34.   useEffect(() => {
  35.     if (!theme) {
  36.       return;
  37.     }
  38.     window.localStorage.setItem(LOCAL_STORAGE_KEY_THEME, theme);
  39.     updateHtmlTag(theme);
  40.   }, [theme]);
  42.   useEffect(() => {
  43.     const mediaQuery = window.matchMedia(prefersDarkMQ);
  44.     const handleChange = () => {
  45.       // 如果主题跟随系统，监听系统变化
  46.       if (isPreferSystemTheme) {
  47.         const preferredTheme = mediaQuery.matches ? Theme.DARK : Theme.LIGHT;
  48.         setTheme(preferredTheme);
  49.         updateHtmlTag(preferredTheme);
  50.       }
  51.     };
  52.     mediaQuery.addEventListener('change', handleChange);
  53.     return () => mediaQuery.removeEventListener('change', handleChange);
  54.   }, [isPreferSystemTheme]);
  56.   return (
  57.     <ThemeContext.Provider
  58.       value={{ theme, setTheme, isPreferSystemTheme, setIsPreferSystemTheme }}
  59.     >
  60.       {children}
  61.     </ThemeContext.Provider>
  62.   );
  63. }
  65. export { useTheme, ThemeProvider };

将 ThemeProvider 组件引入 main.tsx 使其生效

  1. import React from 'react';
  2. import ReactDOM from 'react-dom/client';
  3. import { ThemeProvider } from './components/ThemeProvider';
  4. import App from './App';
  5. import './styles/index.less';
  7. ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  8.   <React.StrictMode>
  9.     <ThemeProvider>
  10.       <App />
  11.     </ThemeProvider>
  12.   </React.StrictMode>
  13. );

实现切换主题组件

由于以上组件的封装，只需要使用以上 hook 和通用方法，后续我们可以快速的实现不同的主题切换组件。以下就是一个开关切换主题的示例代码，也有更复杂的示例可以查看项目源码或者读者尝试根据项目实际需求实现

  1. import { Cell, Switch } from 'react-vant';
  2. import { Theme, useTheme } from '@/components/ThemeProvider';
  4. function Page() {
  5.   const { theme, setTheme, setIsPreferSystemTheme } = useTheme();
  7.   const handleChangeTheme = () => {
  8.     setIsPreferSystemTheme(false);
  9.     setTheme((previousTheme: Theme) =>
  10.       previousTheme === Theme.DARK ? Theme.LIGHT : Theme.DARK
  11.     );
  12.   };
  14.   return (
  15.     <Cell.Group card>
  16.       <Cell
  17.         title="深色模式"
  18.         rightIcon={
  19.           <Switch
  20.             size={24}
  21.             activeColor="var(--app-switch-active-color)"
  22.             inactiveColor="var(--app-switch-inactive-color)"
  23.             checked={theme === Theme.DARK}
  24.             onChange={handleChangeTheme}
  25.           />
  26.         }
  27.       />
  28.     </Cell.Group>
  29.   );
  30. }

备注：这个项目实现过程和部分代码参考了以下开源项目源码和实现方案：