从零开始同时手撸 React 和 Vue 后台 03 —— 产品主题色动态变换

为了对比 React 和 Vue 在相同项目上的开发体验，我决定从零开始同时手撸 React 和 Vue 后台

代码仓库会和本系列文章同时更新，欢迎 fork，感谢 star🌟

	React	Vue
仓库	github.com/Levix0501/l…	github.com/Levix0501/l…
预览	next-admin.fecoder.cn	vue-admin.fecoder.cn

往期：

• 从零开始同时手撸 React 和 Vue 后台 01 —— 创建项目
• 从零开始同时手撸 React 和 Vue 后台 02 —— 明暗主题切换

实现思路

产品主色动态切换需要考虑：

1. 组件库的主色切换
2. Tailwind CSS / UnoCSS 的主色切换
3. Scss 变量的主色切换

因为 antd 和 element-plus 都可以通过 CSS 变量来访问其包括主色在内的所有颜色，所以我们只要将 Tailwind CSS / UnoCSS 的主色和 Scss 变量都指向组件库的主色 CSS 变量，就能同时切换三者的主色。

Nextjs

antd

antd 的主色可以通过 antd-style 更改

文档：ant-design.github.io/antd-style/…

import { ThemeProvider } from 'antd-style';

export const AntdProvider = ({ children }: { children: React.ReactNode }) => {
  const {  getSettings } = useSettings();
  const {  primaryColor } = getSettings();

  return (
    <ThemeProvider
      theme={{
        cssVar: { key: appConfig.cssVarKey, prefix: 'lx' },
        token: { colorPrimary: primaryColor },
      }}
    >
      {children}
    </ThemeProvider>
  );
};

Tailwind

我们将 Tailwind 中自定义的颜色赋值为 antd 的 CSS 变量

theme: {
  extend: {
    colors: {
      primary: 'var(--lx-color-primary)',
    },
  },
}

SCSS 变量

// _variables.scss
$primary: var(--lx-color-primary);

Vite-Vue

Element-plus

可以通过 js 来控制 CSS 变量

文档：element-plus.org/zh-CN/guide…

// document.documentElement 是全局变量时
const el = document.documentElement
// const el = document.getElementById('xxx')

// 获取 css 变量
getComputedStyle(el).getPropertyValue(`--el-color-primary`)

// 设置 css 变量
el.style.setProperty('--el-color-primary', 'red')

也可以借助 useCssVar 来更优雅地控制 CSS 变量

文档：vueuse.org/core/useCss…

UnoCSS

我们将 Uno 中自定义的颜色赋值为 element-plus 的 CSS 变量

theme: {
  colors: {
    primary: 'var(--el-color-primary)'
  }
},

SCSS 变量

// _variables.scss
$primary: var(--el-color-primary);

结语

至此，我们实现了品牌色的切换

	React	Vue
仓库	github.com/Levix0501/l…	github.com/Levix0501/l…
预览	next-admin.fecoder.cn	vue-admin.fecoder.cn