主题

内置主题

目前内置的主题（文档支持粘贴配置之后，抽离到项目自身当中）：

qd（千岛）
qh（奇货）
qdm（商家助手）
mihua-light（米花/日照）
mihua-dark（米花/暗黑）

自定义主题

在 Dango UI 中，你可以定义多个主题，每个主题的色板下又可以配置多个颜色

一个最基础的主题，色板中应该包含以下颜色：

primary（主色）
secondary（辅色）
success（成功色）
warning（警告色）
error（失败色）

使用不用颜色的方式

传递 success

大部分支持颜色配置的组件，都会有一个 color 属性可以传递这些色板中的颜色，比如这样：

<template>
  <PreviewBlock title="传递 success">
    <div class="flex flex-col gap-8px">
      <DuButton color="success">完成</DuButton>
      <DuSwitch color="success" on />
    </div>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuButton, DuSwitch } from 'dangoui'
</script>

传递 secondary

你也可以传递色板中的其他颜色：

<template>
  <PreviewBlock title="传递 secondary">
    <div class="flex flex-col gap-8px">
      <DuButton color="secondary">完成</DuButton>
      <DuSwitch color="secondary" on />
    </div>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuButton, DuSwitch } from 'dangoui'
</script>

你还可以扩展主题色板中的颜色，比如在我们的千岛应用中，扩展了一个交易色（trade）：

扩展色板

<template>
  <PreviewBlock title="传递 trade">
    <DuTheme name="qd">
      <div class="flex flex-col gap-8px">
        <DuButton color="trade">完成</DuButton>
        <DuSwitch color="trade" on />
      </div>
    </DuTheme>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuButton, DuSwitch, DuTheme } from 'dangoui'
</script>

在你的应用中，可以包含多个主题，可以通过 DuTheme 组件指定主题，DuTheme 的子节点都会变为 DuTheme 指定的主题：

使用 DuTheme 指定主题

<template>
  <PreviewBlock title="切换主题">
    <DuTheme :name="theme">
      <DuRadioGroup v-model:value="theme">
        <DuRadio label="千岛" value="qd" />
        <DuRadio label="奇货" value="qh" />
        <DuRadio label="商家助手" value="qdm" />
        <DuRadio label="米花星球" value="mihua-light" />
      </DuRadioGroup>
      <div class="flex flex-col gap-8px mt-16px">
        <DuButton color="primary">选择我的兴趣</DuButton>
        <DuSwitch color="primary" on />
        <DuSwitch color="primary" on disabled />
        <DuButton color="success">完成</DuButton>
        <DuSwitch color="success" on />
      </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>