关于前端:使用CSS变量实现主题定制真的很简单

本文为 Varlet 组件库源码主题浏览系列第六篇，Varlet反对自定义主题及暗黑模式，本篇文章咱们来具体看一下这两者的实现。

主题定制

Varlet是通过 css 变量来组织款式的，什么是 css 变量呢，其实很简略，首先申明自定义的 css 属性，轻易申明在哪个元素上都能够，不过只有该元素的后辈能力应用，所以如果要申明全局所有元素都能应用的话，能够设置到根伪类 :root 下：

:root {--main-bg-color: red;}

如代码所示，css变量的自定义属性是有要求的，须要以 -- 结尾。

而后在任何须要应用该款式的元素上通过 var() 函数调用即可：

div {background-color: var(--main-bg-color);
}

只有更改了 --main-bg-color 属性的值，所有应用该款式变量的中央都会更新，所以主题定制靠的就是这个。

Varlet组件的款式变量总体分为两种：根本的、组件本身的。

公共的根本款式变量定义在 varlet-ui/src/styles/ 目录下：

每个组件都会引入这个文件，比方 Button 组件：

除此之外每个组件也会有本身的变量，同样比方 Button 组件：

想要批改默认的值也很简略，间接笼罩即可。运行时动静更新款式也能够间接批改根节点的款式变量，此外 Varlet 也提供了一个组件来帮咱们做这件事，接下来看看这个组件是怎么实现的。

组件式调用

组件式调用能够有范畴性的定制组件款式，防止全局净化，应用示例：

<script setup>
import {ref, reactive} from 'vue'

const state = reactive({score: 5,})

const styleVars = ref({'--rate-primary-color': 'var(--color-success)',
})
</script>

<template>
  <var-style-provider :style-vars="styleVars">
    <var-rate v-model="state.score" />
  </var-style-provider>
</template>

StyleProvider组件源码如下：

<script lang="ts">
import {defineComponent, h} from 'vue'
import {formatStyleVars} from '../utils/elements'
import {call, createNamespace} from '../utils/components'

const {n} = createNamespace('style-provider')

export default defineComponent({
  name: 'VarStyleProvider',
  props: {
    styleVars: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, { slots}) {return () =>
      h(
        'div',
        {class: n(),
          style: formatStyleVars(props.styleVars),
        },
        call(slots.default)
      )
  },
})
</script>

实现很简略，就是创立一个 div 元素来包裹组件，而后将 css 变量设置到该 div 上，这样这些 css 变量只会影响它的子孙元素。

函数式调用

除了应用组件，也能够通过函数的形式应用，然而只能全局更新款式：

<script setup>
import {StyleProvider} from '@varlet/ui'

let rootStyleVars = null

const darkTheme = {'--color-primary': '#3f51b5'}

const toggleRootTheme = () => {
  rootStyleVars = rootStyleVars ? null : darkTheme
  StyleProvider(rootStyleVars)
}
</script>

<template>
  <var-button type="primary" block @click="toggleRootTheme"> 切换根节点款式变量 </var-button>
</template>

StyleProvider函数如下：

const mountedVarKeys: string[] = []

function StyleProvider(styleVars: StyleVars | null = {}) {
    // 删除之前设置的 css 变量
    mountedVarKeys.forEach((key) => document.documentElement.style.removeProperty(key))
    mountedVarKeys.length = 0
    // 将 css 变量设置到根元素上，并且增加到 mountedVarKeys 数组
    const styles: StyleVars = formatStyleVars(styleVars)
    Object.entries(styles).forEach(([key, value]) => {document.documentElement.style.setProperty(key, value)
        mountedVarKeys.push(key)
    })
}

实现也非常简单，间接将 css 变量设置到 html 节点上，同时会增加到一个数组里，用于删除操作。

暗黑模式

Varlet内置提供了暗黑模式的反对，应用形式为：

<script setup>
import dark from '@varlet/ui/es/themes/dark'
import {StyleProvider} from '@varlet/ui'

let currentTheme = null

const toggleTheme = () => {
  currentTheme = currentTheme ? null : dark
  StyleProvider(currentTheme)
}
</script>

<template>
  <var-button block @click="toggleTheme"> 切换主题 </var-button>
</template>

也调用了后面的 StyleProvider 办法，所以实现原理也是通过 css 变量，其实就是内置了一套暗黑模式的 css 变量：

总结

能够发现应用 css 变量来实现主题定制和暗黑模式是非常简单的，兼容性也十分好，各位如果有波及到换肤的需要都能够优先思考应用。