【css】前端换肤功能方案调研 & css变量换肤实践

最新推荐文章于 2025-04-08 13:53:14 发布

sakoooo

最新推荐文章于 2025-04-08 13:53:14 发布

阅读量1.3k

点赞数

分类专栏：前端 css

本文链接：https://blog.youkuaiyun.com/qq_33539213/article/details/109209340

版权

前端同时被 2 个专栏收录

38 篇文章

订阅专栏

css

9 篇文章

订阅专栏

本文探讨了在vue-cli3+less+Vant环境下，如何实现前端应用的深浅两套主题切换。比较了切换className、更换css文件、使用less变量和css变量等方案，并详细介绍了css变量的实现方式，包括设置全局变量、定义不同主题的变量值以及在组件中使用。最后，通过动态改变css变量实现动态换肤，提供了兼容大部分浏览器的解决方案，但不适用于IE浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：应用要做深浅两套主题，内嵌h5页面要根据用户当前选择的主题渲染对应的主题样式。
技术栈：vue-cli3 + less + Vant

接到需求后，上网调研了几种方案：切换className、切换css文件、使用预处理器（less/sass）变量、css变量等，最终选择的是css变量方案。

1. 利用class 命名空间

根据主题设置不同的类名，在类名下设置不同样式。

优点
- 实现简单，易理解
- 兼容性好
缺点
- 易产生css优先级问题，造成代码混乱
- 代码冗余
- 不适用于用户自定义主题的场景
demo：codepen.io

2. 准备多套CSS主题

生成多套主题css文件，根据需要切换css文件href。

优点
- 易实现
缺点
- 代码冗余
- 下载css需要额外时间，用户体验不佳

3. 使用 `less modifyVars`

antd主页 & antd pro使用的方案，实现优雅简单，与antd适配性好。原理上是使用 less 提供的 modifyVars 的方式进行覆盖变量，对 less-loader 的 options 属性进行相应配置。

// webpack.config.js
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
+     options: {
+       lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
+         modifyVars: {
+           'primary-color': '#1DA57A',
+           'link-color': '#1DA57A',
+           'border-radius-base': '2px',
+         },
+         javascriptEnabled: true,
+       },
+     },
    }],
    // ...other rules
  }],
  // ...other config
}

具体可以参考antd官网：https://ant.design/docs/react/customize-theme-cn

但是在实现的时候，发现这种方案并不能满足我的需求：

webpack无法异步配置，因此我不能异步获取用户主题后再加载less变量；（或许可以但我不知道？😅）
less不支持动态修改变量。（但如果你使用的是antd，可以使用antd-theme-webpack-plugin 来异步修改。具体参考：Dynamic Theming in Browser using Ant Design ）

4. css变量

利用css变量设置颜色，需要切换主题时，用js动态改变css变量的值。易理解易实现，兼容大部分浏览器（除了IE），并且支持动态换肤。

在根标签下声明变量

// global.less
:root {
  --background-color: #000;
  --text-color: #fff;
}

定义不同主题下的变量值

// theme.js
module.exports = {
  DARK: {
    '--background-color': '#000',
    '--text-color': '#fff',
  },
  LIGHT: {
    '--background-color': '#fff',
    '--text-color': '#000',
  },
}

在需要换肤的样式中使用变量（第二参数是默认值，为了兼容性考虑）

// app.less
#app {
  background: var(--background-color, #000);
  color: var(--text-color, #fff);
}

根据需求场景更改css变量

// app.vue
...
created() {
    .getTheme()
        .then(({theme}) => {
          if (appTheme === 'LIGHT') {
            Object.keys(THEME.DARK).forEach((key) => {
              document.documentElement.style.setProperty(key, THEME.LIGHT[key])
            })
          }
        })
  },