使用CSS变量实现主题定制真的很简单

更新日期: 2022-10-19阅读: 1.4k标签: 主题作者: 街角小林

主题定制

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变量来实现主题定制和暗黑模式是非常简单的,兼容性也非常好,各位如果有涉及到换肤的需求都可以优先考虑使用。

以上文章来自:https://blog.51cto.com/u_15319948/5776692

链接: https://fly63.com/article/detial/12206

wordpress大前端DUX主题

DUX主题是基于WordPress程序的主题,由themebetter团队原创开发,是目前比较火的wordpress主题;支持百度熊掌号,适用于垂直站点、科技博客、个人站,扁平化设计、简洁白色、超多功能配置

Vue实现换主题/皮肤功能

网站换肤,主题切换。网站的主题色可以在几种常用颜色之间进行切换,还有相关图片、图标也要跟随主题进行切换。文章由两部分组成:css切换,图片图标切换

Web前端主题切换的几种方案

本文将介绍 Web 前端主题切换的几种常用方案,示例代码基于 React 框架。废话少说,show you the code!这种方案利用了css多层样式精确匹配的特点,通过样式覆盖的方式实现主题的切换。

采用CSS3的VAR实现动态主题切换

官方称呼其为自定义属性,坊间通常叫做css变量,因为它类似于其他js语言中的变量,可用于存储颜色、字体、大小宽度等css属性值;定义方式为两个连字符也就是中划线(--)开头,引用方式为var(custom-property-name, value)

前端 “一键换肤“ 的几种方案

现在越来越多的网站都提供了拥有换肤(切换主题)功能,如 ElementUI,既是为了迎合用户需求,或是为了凸显自己特点,因此提供了个性化定制的功能.

Sass应用之实现主题切换

实现主题切换有几种不同的方案,比如使用CSS变量,使用JavaScript动态加载对应的主题样式文件等。本文主要讲的是如何使用Sass实现主题切换。

前端实现切换主题方案

前端开发人员面临着制作增强用户体验和适应用户偏好的用户界面的任务。带有 css 的 react 主要可用于创建多色可切换主题。为用户提供了在给定时间点在主题颜色之间切换以适合他们的偏好的特权。

常用Vue UI框架的主题切换

在如今,很多网页已经可以手动切换明亮模式和黑暗模式,网页的主题切换已经成为了一个常用的需求,因此,本文将从常见框架的处理方式总结一些相关的操作,并探究其本质。

兼容ie浏览器 网站变灰色

在遇到特殊情况的时候,我们作为站长需要紧急将网站变灰的需求,大家都知道通过简单的CSS样式即可实现,上述代码配合指定网页在IE内核下的渲染模式,就可以达到效果,这个语句意思便是告诉IE浏览器

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!