主题
内置主题
目前内置的主题（文档支持粘贴配置之后，抽离到项目自身当中）：
- qd（千岛）
- qd-dark（千岛暗黑）
- qh（奇货）
- qh-dark（奇货暗黑）
- qdm（商家助手）
- mihua（米花）
- mihua-dark（米花暗黑）
- linjie（临界）
- linjie-dark（临界暗黑）
自定义主题
在 Dango UI 中，你可以定义多个主题，每个主题的色板下又可以配置多个颜色
一个最基础的主题，色板中应该包含以下颜色：
- primary（主色）
- secondary（辅色）
- success（成功色）
- warning（警告色）
- error（失败色）
- trade（交易色）
- white（白色）
- transBlack（透明黑）
使用不同颜色的方式
大部分支持颜色配置的组件，都会有一个 color 属性可以传递这些色板中的颜色，比如这样：
0
使用不同颜色
<template>
<PreviewBlock title="传递 success">
<div class="flex flex-col gap-8px">
<DuButton color="success">完成</DuButton>
<DuSwitch color="success" on />
</div>
</PreviewBlock>
<PreviewBlock title="传递 secondary">
<div class="flex flex-col gap-8px">
<DuButton color="secondary">完成</DuButton>
<DuSwitch color="secondary" on />
</div>
</PreviewBlock>
<PreviewBlock title="传递 trade（扩展色板）">
<DuTheme name="qd">
<div class="flex flex-col gap-8px">
<DuButton color="trade">完成</DuButton>
<DuSwitch color="trade" on />
</div>
</DuTheme>
</PreviewBlock>
<PreviewBlock title="使用 DuTheme 切换主题">
<DuTheme :name="theme">
<DuRadioGroup v-model:value="theme">
<DuRadio label="千岛" value="qd" />
<DuRadio label="千岛暗黑" value="qd-dark" />
<DuRadio label="奇货" value="qh" />
<DuRadio label="奇货暗黑" value="qh-dark" />
<DuRadio label="商家助手" value="qdm" />
<DuRadio label="米花" value="mihua" />
<DuRadio label="米花暗黑" value="mihua-dark" />
<DuRadio label="临界" value="linjie" />
<DuRadio label="临界暗黑" value="linjie-dark" />
</DuRadioGroup>
<div class="flex flex-col gap-8px mt-16px">
<DuButton color="primary">选择我的兴趣</DuButton>
<DuSwitch color="primary" on />
<DuSwitch color="primary" on disabled />
</div>
</DuTheme>
</PreviewBlock>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { DuButton, DuSwitch, DuTheme, DuRadio, DuRadioGroup } from 'dangoui'
const theme = ref('qd')
</script>