自定义主题

使用 Theme

你可以使用 DuTheme 指定子节点的主题

注意，在小程序平台，因为小程序中没有 :root，对于会脱离文档流的节点，会默认给一个 theme：比如 du-theme-default

<template>
  <DuTheme theme="qd">
    <DuButton>
      按钮
    </DuButton>
    <DuPopup>
      弹框
    </DuPopup>
  </DuTheme>
</template>

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

拓展主题

Web 平台

如果你要在 Web 平台中拓展主题，可以通过在 globalConfig 中指定 themes 进行主题扩展

如下面代码所示，我们定义了一个名为 linjie 的主题，仅仅指定了 DuButton 组件的 solidBg，其他颜色均继承自默认主题

import { globalConfig } from 'dangoui'

app.use(globalConfig, {
  themes: [
    {
      name: 'linjie',
      colors: {
        primary: {
          button: {
            solidBg: 'linear-gradient(151deg, #2B1AC0 0%, #7247DC 100%)',
          },
        },
      },
    },
  ],
})

<template>
  <PreviewBlock title="渐变色按钮">
    <DuTheme name="linjie">
      <DuButton color="primary">完成</DuButton>
    </DuTheme>
  </PreviewBlock>
</template>

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

我们也可以拓展现有主题，如下面代码所示，我们扩展了 qd 主题的颜色，增加了一个 gradient 颜色

如果你定义了一个新颜色，并不会有「继承」的特性，因为默认主题中没有颜色可以用于继承，你需要指定所有你需要的颜色

import { globalConfig } from 'dangoui'

app.use(globalConfig, {
  themes: [
    {
      name: 'qd',
      colors: {
        gradient: {
          button: {
            solidBg: 'linear-gradient(151deg, #2B1AC0 0%, #7247DC 100%)',
            solidColor: '#fff',
          },
        },
      },
    },
  ],
})

<template>
  <PreviewBlock title="渐变色按钮">
    <DuTheme name="qd">
      <DuButton color="gradient">完成</DuButton>
    </DuTheme>
  </PreviewBlock>
</template>

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

小程序

如果你是在小程序中使用该组件库，可以通过 vite-plugin-dangoui 扩展主题

import { defineConfig } from 'vite'
import danogui from 'vite-plugin-dangoui'

export default defineConfig(() => {
  plugins: [
    danogui({
      themes: [
        'qd',
        'qh',
        'qdm',
        'mihua-dark',
        'mihua-light',
        {
          name: 'linjie',
          colors: {
            primary: {
              button: {
                solidBg: 'linear-gradient(151deg, #2B1AC0 0%, #7247DC 100%)',
              },
            },
          },
        },
      ],
    }),
  ]
})