創造し続け、成長を加速！「ナゲッツデイリー新プラン・10月アップデートチャレンジ」参加6日目です、イベント詳細はこちら

Varletこの記事は、カスタムテーマとダークモードをサポートする Varlet コンポーネントライブラリソースコードテーマの読み取りシリーズの第 6 回で、この 2 つの実装について詳しく説明します。

テーマのカスタマイズ

Varletスタイルは変数によってcss編成されます.css変数とは実際には非常に単純です. まず, カスタムcss属性を宣言します. 任意の要素で宣言できますが, 要素の子孫のみがそれを使用できます.要素使用できる場合は、ルート疑似クラスに設定できます:root:

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

コードに示されているようにcss、変数のカスタム属性は必須であり、--最初から必要です。

次に、スタイルを使用する必要がある要素で関数を呼び出しますvar()。

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

プロパティの値が変更されるたびに--main-bg-color、スタイル変数を使用するすべてが更新されるため、テーマのカスタマイズはこれに依存します。

Varletコンポーネントのスタイル変数は、通常、基本とコンポーネント独自の 2 つのタイプに分けられます。

一般的な基本的なスタイル変数は、次の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ます.スキニングが必要な場合は、それを優先して使用できます.