La personalización del tema es realmente fácil con las variables CSS

¡Continúe creando, acelere el crecimiento! Este es el sexto día de mi participación en el "Nuggets Daily New Plan · October Update Challenge", haz clic para ver los detalles del evento

Este artículo es la sexta parte de la serie de lectura de temas de código fuente de la biblioteca de componentes Varlet, que Varletadmite temas personalizados y modo oscuro. En este artículo, analizaremos detalladamente la implementación de estos dos.

Personalización del tema

VarletcssLos estilos se organizan a través de variables. Lo que es una cssvariable es realmente muy simple. Primero, declare un cssatributo personalizado, y puede declararlo en cualquier elemento, pero solo los descendientes del elemento pueden usarlo, por lo que si desea declarar todo el atributo global elementos Si se puede usar, se puede establecer en la pseudoclase raíz :root:

:root {
  --main-bg-color: red;
}
复制代码

Como se muestra en el código, cssel atributo personalizado de la variable es obligatorio y debe --comenzar con él.

Luego llame a la función en cualquier elemento que necesite usar el estilo var():

div {
  background-color: var(--main-bg-color);
}
复制代码

Siempre que se cambie el valor de la propiedad --main-bg-color, todo lo que use la variable de estilo se actualizará, por lo que en esto se basa la personalización del tema.

VarletLas variables de estilo de los componentes se dividen generalmente en dos tipos: básicas y propias del componente.

Las variables de estilo básicas comunes se definen en el varlet-ui/src/styles/directorio:

Cada componente importará este archivo, como los Buttoncomponentes:

Además, cada componente también tendrá sus propias variables, como Buttoncomponentes:

También es muy simple modificar el valor predeterminado, simplemente anúlelo. La actualización dinámica del estilo en tiempo de ejecución también puede modificar directamente las variables de estilo del nodo raíz. Además, Varletse proporciona un componente para ayudarnos a hacer esto. Veamos cómo se implementa este componente.

llamada de componente

La invocación basada en componentes puede personalizar los estilos de los componentes en un ámbito para evitar la contaminación global. Ejemplo de uso:

<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>
复制代码

StyleProviderEl código fuente del componente es el siguiente:

<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>
复制代码

La implementación es tan simple como crear un divelemento para envolver el componente y luego establecer cssvariables diven él para que esas cssvariables solo afecten a sus elementos descendientes.

Llamada de función

Además de usar componentes, también puede usar funciones, pero solo puede actualizar estilos globalmente:

<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>
复制代码

StyleProviderLa función es la siguiente:

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)
    })
}
复制代码

La implementación también es muy simple, configurando directamente la cssvariable en el htmlnodo y agregándola a una matriz para operaciones de eliminación.

modo oscuro

VarletEl soporte integrado para el modo oscuro lo proporciona:

<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>
复制代码

El StyleProvidermétodo anterior también se llama, por lo que el principio de implementación también es a través cssde variables, que en realidad es un conjunto integrado de variables en modo oscuro css:

Resumir

Se puede encontrar que el uso cssde variables para lograr la personalización del tema y el modo oscuro es muy simple, y la compatibilidad también es muy buena.Si necesita un skinning, puede darle prioridad a su uso.