> For the complete documentation index, see [llms.txt](https://lizh.gitbook.io/knowledge/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lizh.gitbook.io/knowledge/research/04web-zhu-ti-qie-huan-he-ge-xing-hua-ding-zhi-fang-fa-zong-jie.md). # Web主题切换和个性化定制方法总结 ## 切换主题 **切换主题：主题是由开发者**定义，一般来说只有有限的主题可选。 ### 方法一：class 命名空间 **定制不同主题，存于不同的 class 命名空间下，通过 JS 修改 `body` 或其他需要换主题的标签上的 class 名来实现主题切换。** 该方法的关键在于如何为不同主题，生成不同的 class。如果纯手动写多个主题的 class，成本太高，而且后期维护也比较困难。 以下是两种解决方案：**postcss-themes 插件、less 混合**。 #### [postcss-themes](https://www.npmjs.com/package/postcss-themes) 插件（推荐） 将主题相关的变量提取到一个主题变量文件中， `postcss-themes` 会为使用了主题文件中变量的选择器，新添加一份带有命名空间的选择器。 ```js /* postcss.config.js */ module.exports = { plugins: { 'postcss-themes': { themes: { // themes 可以为数组，配置多个主题 filePath: 'red_theme.css' } }, 'postcss-css-variables': {}, } } ``` 输入 css： ```css /* index.css */ :root { --main-color: green; } .foo { font-size: 16px; color: var(--main-color); } ``` ```css /* red_theme */ :root { --main-color: red; } ``` 输出 css： ```css .foo { font-size: 16px; color: green; } .red_theme .foo { color: red; } ``` #### Less 混合 less 混合是将一组属性从一个规则集包含（或混入）到另一个规则集的方法。规则集可以通过传参生成不同的新规则集。该方案需要将所有主题相关的样式集中在一个规则集中，实际执行起来比较困难。 ```css /*variables.less*/ .base_theme(@background: #e2e9f9, @color: #337ab7){ .class_1 { background: @background; } .class_1 a:hover{ color: saturate(@color, 20%); } .class_2 { color: @color; } } ``` ```css @import 'variables.less'; .default_theme { /*默认主题，经典蓝*/ .base_theme(); } .coffee_theme { /*咖啡色主题*/ .base_theme(#f5e2c9, #9f754d); } .purple_theme { /*紫色主题*/ .base_theme(#e5d3ed, #b88bcb); } ``` #### JS 切换主题 JS 修改 body 或其他需要换主题的元素的 class 名。 ```js document.body.className = `${document.body.className} ${theme_class_name}` ``` ### 方法二：多个 CSS 文件 **定制不同主题，每个主题生成一份 CSS 文件，然后再通过 JS 切换主题样式文件来实现。** 实现步骤上如下： * 创建主题变量文件，包含主题相关的变量定义； * 根据不同的主题变量文件，编译生成不同主题的 CSS 文件； * 通过 JS 切换主题样式文件。 其中重点是，如何根据不同的主题变量文件，编译生成不同主题的 CSS 文件。 以下是两种用 webpack 的实现方式： #### 多次运行 webapck，生成多个 CSS 文件 一次打包同时生成多份主题 CSS 文件比较麻烦，因此通过打包多次，每次生成一个主题对应的 css 文件来实现，而 JS 文件在这个过程中是不会改变。 ```js // webpack.prod.conf.js module.exports = theme => { return { plugins: [ new MiniCssExtractPlugin({ filename: `[name]_${theme}.css`, }), ], resolve: { alias: { themeVars: path.join(__dirname, `../src/style/themes/theme-${theme}.css`), } } } } ``` ```css /*variable/color.less*/ @import "~themeVars" ``` ```js const webpack = require('webpack') const webpackConfig = require('./webpack.prod.conf') ['default', 'broker'].forEach(theme => { webpack(webpackConfig(theme), (err, stats) => {}) }) ``` **注意：** 使用 `less` 预处理，`@import` 可以直接引用 `webpack.prod.conf.js` 中定义的 `alias`，而 `postcss-loader` 是无法使用该 `alias` 的。 `postcss-loader` 是通过 `postcss-import` 来处理 `@import` 语句。 `postcss-import` 是不支持 `alias` 配置的，需要用另一个插件 [postcss-import-alias-resolver](https://www.npmjs.com/package/postcss-import-alias-resolver) 来实现。 ```js // postcss.config.js const path = require('path') const aliasResolver = require('postcss-import-alias-resolver'); module.exports = { plugins: { 'postcss-import': { resolve: aliasResolver({ alias: { themeVars: path.join(__dirname, `src/style/themes`), } }) } } } ``` ```css /*variable/color.less*/ @import '~themeVars/theme-broker.css'; ``` 但是，`postcss.config.js` 中，只能静态指定 `alias`，想要动态指定，需要在 `webpack.prod.conf.js` 中配置。实际运行时，发现 `postcss-import-alias-resolver` 的指定的 `alias` 在 `webpack.prod.conf.js` 中无效（**？？具体原因未找到）**。 最后，改用自定义 `postcss-import`中的 `resolve` 方法来实现的： ```js // webpack.prod.conf.js module.exports = theme => { return { plugins: [ new MiniCssExtractPlugin({ filename: `[name]_${theme}.css`, }), ], module: { rules: [ { test: /\.(css|postcss)$/, use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { ident: 'postcss', plugins: (loader) => [ require('postcss-import')({ resolve: (id, basedir, importOptions) => { // 这里会将 @import "./color.css" 的导入文件，指向`../themes/theme-${theme}.css`。所以 color.css 可以是一个并不存在的文件。 if (id === './color.css') { return path.join(basedir, `../themes/theme-${theme}.css`) } return path.join(basedir, id) } }), // 注意，webpack的配置会覆盖postcss.config.js。 // 所以，如有其他 postcss 插件，也要移到这里 ... ] } } ] } ] } } } ``` #### 运行一次 webpack， 生成多个 css 文件 （不推荐） * `extract-text-webpack-plugin`: 多次调用插件实例，生成多个 css 文件。不过，该插件适用于 webapck 3，目前已废弃。 [webpack如何extract多个css](https://github.com/shirleyMHao/blog/issues/5) * `mini-css-extract-plugin`：有多主题的相关讨论，但还没有可行的解决方案。 [Support multiple instances of MiniCssExtractPlugin to generate multiple CSS theme output from the single CSS input](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/427) #### JS 切换主题样式文件 * **JS 改变 link 标签的 href 属性** 实现： [腾讯首页个性化换肤demo页面](http://www.zhangxinxu.com/study/200912/qq-home-page-skin-jquery.html) ```html document.getElementById('#skincolor').href = 'skin-red.css'; ``` **注意：该方法需重新加载样式表，会带来加载延迟**。样式切换不流畅，体验不太好。 * **JS 修改 link 标签的 `disabled` 属性** 实现： MDN [Alternative style sheets](https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets) ```html ``` link 标签的 `disabled` 属性用来启用或禁用样式表。通过 JS 设置 link 标签 `disabled="false"`，可以让默认不渲染的 CSS 开始渲染。 以上样式表都可分为3类： * **无 title 属性：** ``，无论如何都会加载并渲染。如：`reset.css`。 * **有 title 属性：** ``，默认样式，CSS 文件加载并渲染。如：`default.css`。 * **有 title 属性：** ``，作为备选样式，CSS 文件加载，默认不渲染。如：`fancy.css`。 `alternate` 意味备用，相当于是 css 预加载进来备用，所以**不会有加载换延问题**。 ## 个性化定制主题 **个性化定制主题：主题是由用户**定义，一般具有无限种可能，用户可以为主题变量设置任意色值。 ### 方法一：动态创建 style 标签 该方法实现原理就是通过 JS 创建一个 `style` 元素，填充新样式，`append` 到 `head` 元素中，覆盖 css 文件中定义的样式。 #### 一个简单的DEMO ```html
一个简单的示意
``` ```css .text_color { color: red; } ``` ```js const styleDom = document.createElement('style') styleDom.innerHTML = '.text_color { color: cyan; }' document.head.appendChild(styleDom) ``` 该方法可以说是最简单的，也可以说是最复杂的。说简单，是因为它的实现方式直接明了；说复杂，是因为它必需逐个找到需要修改的元素的 class 名，元素越多，实现起来就越复杂。 此外，使用了 css modules 的项目，我们无法锁定需要修改的元素的 class 名。 #### 案例分析 Element-UI 换肤： [Element-UI 换肤预览](https://elementui.github.io/theme-preview/#/zh-CN) [Element-UI 换肤原理](https://github.com/ElemeFE/element/issues/3054#issuecomment-468448059) 换肤实现过程： * 用 Ajax 将当前页面的 CSS 文件请求回来； * 处理请求回来的 CSS 数据：将需要替换的色值全部替换成新颜色值。 Element-UI 换肤的处理过程分三步： * 把默认主题文件中涉及到颜色的 CSS 值替换成**关键词**。[源码](https://github.com/ElementUI/theme-preview/blob/master/src/app.vue#L250-L274) * 根据用户选择的色值，生成一系列对应的新颜色值。[源码](https://github.com/ElementUI/theme-preview/blob/master/src/utils/formula.json) * 把**关键词**换回刚刚生成的相应的新颜色值。[源码](https://github.com/ElementUI/theme-preview/blob/master/src/utils/color.js) * 创建 `style` 标签，把处理好的数据填进去，再 `append` 到 `head` 元素。[相关代码](https://github.com/EhlementUI/theme-preview/blob/master/src/app.vue#L198-L211) #### 简单源码示例 ```js function changeTheme (url, colorMap = {}) { const request = new XMLHttpRequest() request.onreadystatechange = res => { const resTarget = res.target if (resTarget.readyState !== 4) { return } if (resTarget.status === 200) { let originalStyle = resTarget.response for (let k in colorMap) { originalStyle = originalStyle.replace(new RegExp(k, 'ig'), colorMap[k]) } const styleDom = document.createElement('style') styleDom.innerText = originalStyle document.head.appendChild(styleDom) } } request.open('GET', url) request.send() } changeTheme('https://xxx.xxx.com/css_file_path/index.css', { '#508cee': '#ff5521', '#D2DFFE': '#FFDDD2' }) ``` ### 方法二：LESS 在线修改变量 基于 `less` 写样式，为主题相关的颜色定义变量。在 HTML 中直接引入 `.less` 文件，再引入 `less.js` ，`less.js` 会在线将 `.less` 文件编译成浏览器可识别的样式，然后填充在新创建的 `style` 标签中。我们通过调用 `less.modifyVars` 方法修改主题变量实现个性化定制主题。 #### 一个简单的DEMO ```html
LESS 在线修改变量
``` ```css /**theme.less**/ @major_color: red; .text_color { color: @major_color; } ``` `less.js` 在线编译 `.less` 文件，创建一个 `style` 元素，填入编译后的样式： ```html ``` JS 修改变量： ```js window.less.modifyVars({"@major_color": 'cyan'}) ``` ```html ``` #### 方法分析 * 引入的 `.less` 文件，需要在浏览器中编译，这对浏览器性能有影响，不建议在生产环境使用。 * 此方法仅限于用 `less` 的项目才能使用。`sass` 没有类似 `less.modifyVars` 的方法。 * 引入 `.less` 文件的 `` 标签：`rel` 属性值必需是 `stylesheet/less`。 * `less.js` 一定要在所有的 `.less` 文件后引用。 * 最后一个关键问题：如何把项目中的 `less` 样式（`.less`文件、`.vue` 文件中的 `