主题定制

Aether UI 的主题系统基于 CSS 自定义属性，支持亮色/暗色切换和深度定制。

内置主题

import { lightTheme, darkTheme } from '@aether/ui'

亮色主题 (lightTheme)

默认主题，以白色为基底，蓝色为主色。

暗色主题 (darkTheme)

深色背景主题，适配暗色模式。

切换主题

<script setup lang="ts">
import { ref } from 'vue'
import { AConfigProvider, lightTheme, darkTheme } from '@aether/ui'

const theme = ref(lightTheme)
</script>

<template>
  <AConfigProvider :theme="theme">
    <button @click="theme = theme.name === 'light' ? darkTheme : lightTheme">
      切换主题
    </button>
  </AConfigProvider>
</template>

自定义主题

你可以通过覆盖 common 变量来创建自定义主题：

import { lightTheme } from '@aether/ui'
import type { GlobalTheme } from '@aether/ui'

const myTheme: GlobalTheme = {
  name: 'light',
  common: {
    ...lightTheme.common,
    primaryColor: '#ff6b6b',
    primaryColorHover: '#ff8787',
    primaryColorPressed: '#e55a5a',
    borderRadius: '6px',
  },
}

通用主题变量

变量	亮色默认值	说明
primaryColor	#2080f0	主色
primaryColorHover	#4098fc	主色悬停
primaryColorPressed	#1060c9	主色按下
infoColor	#2080f0	信息色
successColor	#18a058	成功色
warningColor	#f0a020	警告色
errorColor	#d03050	错误色
textColor1	rgb(31,34,37)	一级文字
textColor2	rgb(51,54,57)	二级文字
textColor3	rgb(118,124,130)	三级文字
borderColor	rgb(224,224,230)	边框色
baseColor	#fff	基础背景色
borderRadius	3px	圆角
fontSize	14px	基础字号
heightSmall	28px	小号高度
heightMedium	34px	中号高度
heightLarge	40px	大号高度

组件级主题变量

每个组件都有独立的主题变量，格式为 --a-<property>，通过 CSS 自定义属性绑定到组件根元素。

例如 Button 组件的变量：

--a-height: 34px;
--a-font-size: 14px;
--a-color: #2080f0;
--a-text-color: #fff;
--a-border-radius: 3px;
--a-bezier: cubic-bezier(.4, 0, .2, 1);