切换黑白模式

可通过给根节点添加dark类名来切换黑白模式。

点击切换主题模式：

<template>
  <div style="display: flex; align-items: center">
    <span>点击切换主题模式：</span>
    <Switch v-model="isDarkMode" @change="toggleDarkMode" />
  </div>
</template>

<script setup>
import { CbSwitch as Switch } from '@ptpchips/carbon-ui'
import { ref } from 'vue'

const isDarkMode = ref(false)

// 通过给根节点添加 class 来实现暗黑模式
const toggleDarkMode = () => {
  const classList = document.documentElement.classList
  if (isDarkMode.value && !classList.contains('dark')) {
    classList.add('dark')
  } else if (!isDarkMode.value && classList.contains('dark')) {
    classList.remove('dark')
  }
}
</script>

自定义主题色

自定义主题色可通过以下两种方法。

方法一：导入工具函数

导入@ptpchips/carbon-ui中的工具函数，使用initializeAllThemeColors方法初始化主题色，使用changeThemeColors方法修改主题色，使用resetThemeColors方法重置主题色。

<script setup>
import { CbButton as Button } from '@ptpchips/carbon-ui'
import { initializeAllThemeColors, changeThemeColors, resetThemeColors } from '@ptpchips/carbon-ui'

import { onMounted } from 'vue'

// 初始化主题色
onMounted(() => {
  initializeAllThemeColors()
})
const changeColors = () => {
  changeThemeColors({
    primary: '#9566F5',
    success: '#70D9E1',
    warning: '#FF942F',
    danger: '#EC70A2',
    info: '#9AB4C9',
  })
}
</script>
<template>
  <div class="button-box">
    <!-- 改变主题色 -->
    <Button type="primary" @click="changeColors">Change Theme Colors</Button>
    <Button type="success" @click="resetThemeColors">Reset Theme Colors</Button>
  </div>
  <br />
  <div class="button-box">
    <Button type="primary"> Primary </Button>
    <Button type="success"> Success </Button>
    <Button type="warning"> Warning </Button>
    <Button type="danger"> Danger </Button>
    <Button type="info"> Info </Button>
  </div>
  <div class="button-box">
    <Button plain type="primary"> Primary </Button>
    <Button plain type="success"> Success </Button>
    <Button plain type="warning"> Warning </Button>
    <Button plain type="danger"> Danger </Button>
    <Button plain type="info"> Info </Button>
  </div>
</template>

<style scoped>
.button-box:not(:last-child) {
  margin-bottom: 12px;
}
</style>

方法二：配置postcss自定义css变量

安装postcss和相关插件。

pnpm add -D postcss postcss-nested postcss-each-variables postcss-each postcss-for postcss-color-mix postcss-preset-env

在项目根目录下创建postcss.config.js文件，并添加以下内容。

import postcssNested from 'postcss-nested'
import postcssEachVariables from 'postcss-each-variables'
import postcssEach from 'postcss-each'
import postcssFor from 'postcss-for'

export default {
  plugins: [
    postcssEachVariables(/* pluginOptions */),
    postcssNested(/* pluginOptions */),
    postcssEach({
      plugins: {
        beforeEach: [postcssFor(), postcssColorMix()],
      },
    }),
  ],
}

在自定义css文件中加入以下代码，并将该css文件引入main入口文件。以下定义了一些 CSS 变量，可以根据需要修改--colors中各变量的值。

:root {
  --colors: (primary: #409eff, success: #67c23a, warning: #e6a23c, danger: #f56c6c, info: #909399);

  @each $val, $color in var(--colors) {
    --cb-color-$(val): $(color);
    @for $i from 1 to 9 by 1 {
      --cb-color-$(val)-light-$(i): mix(#fff, $(color), .$(i));
      --cb-color-$(val)-dark-$(i): mix(#000, $(color), .$(i));
    }
  }
}