vue4主题颜色更改颜色格式 HEX（十六进制颜色）：每两位代表一个颜色通道，#ff0000 -> 红色，#00ff

主题颜色更改

颜色格式

const predefineColors = ref([
  '#3f51b5',
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])

HEX（十六进制颜色）：

#RRGGBB
#RRGGBBAA   /* 带透明度（CSS4） */

每两位代表一个颜色通道，#ff0000 -> 红色，#00ff00 -> 绿色, #0000ff->蓝色

语法：rgb(R, G, B)

用 3 个数值表示颜色强度。每个值取 0–255 或百分比（0%–100%）

RGBA

语法：rgba(R, G, B, A)

与 rgb() 相同，只是多了一个 Alpha 通道， A（透明度）取 0 ~ 1，越小越透明

hsl(H, S%, L%): H->色相，S->饱和度，L->亮度

HSLA

语法：HSL + 透明度

HSV：

语法：hsv(H, S, V)

H->色相，S->饱和度，V->明度，类似 HSL，但第三个参数不是“亮度”，而是“明度”，即颜色最亮的比例。

HSVA：

HSV + 透明度

v-for

<div class="theme-color-list">
<span v-for="(item, index) in predefineColors" :title="item" :style="{backgroundColor:item}" :key="index">aa</span>
</div>

v-for="(item, index) in predefineColors"：

vue的循环指令，item表示循环数组中的元素，index表示当前索引，所以这行会生成多个<span>元素每个对应一个颜色

:title="item"

给每个<span>设置一个提示文字（鼠标悬停时显示）

@click="changeThemeColor(item)"

绑定点击事件，当点击该颜色块时，调用changeThemeColor()方法，并把当前颜色值传入

:key="index

vue在渲染一组列表时，需要依靠key判断哪个元素该更新、哪个元素该复用、哪个元素该重新创建，如果没有key，vue在diff时会混乱，从而导致性能下降

如果没有key，vue也会弹出警告

修改主题颜色

// actions
const toggleThemeColor = (color) => {
    dbUtils.set('appThemeColor', color)
    appThemeColor.value = color
    let newThemeColor = color
    const rootStyle = document.documentElement.style;
    rootStyle.setProperty(`--el-color-primary`, newThemeColor);
    rootStyle.setProperty(`--el-color-primary-dark-2`, newThemeColor);

    for (let i = 1; i < 10; i++) {
        rootStyle.setProperty(
            `--el-color-primary-light-${i}`,
            `${Color(newThemeColor).alpha(1 - i * 0.1)}`
        );
    }
}

const rootStyle = document.documentElement.style;

获取全局样式表入口(<html>的内联样式)，可以通过它动态设置CSS变量(--变量)

例如：

`rootStyle.setProperty('--main-color', '#409EFF');`

等价于：

:root {
  --main-color: #409EFF;
}

:root == html选择器

手动生成ElementUI各级颜色

for (let i = 1; i < 10; i++) {
    rootStyle.setProperty(
        `--el-color-primary-light-${i}`,
        `${Color(newThemeColor).alpha(1 - i * 0.1)}`
    );
}

当改变--el-color-primary时，Element Plus(ElementUI 的 vue3版本)会自动根据主色生成--el-color-primary-light-x 系列变量（但这个自动生成通常是通过和白色混合来生成）

如果想要浅色效果更淡，可以如上手动覆盖ElementUI 默认的9个浅色变量

transition

transition 是 CSS 的过渡动画，用来让元素属性的变化（如颜色、宽度、透明度……）从“瞬间跳变 → 平滑过渡” 。

transition 实际有四个子属性，写法如下：

transition: <property> <duration> <timing-function> <delay>;

property: 哪些CSS属性要做动画
- all: 所有可动画属性
- background-color: 只为背景变化做动画
- width: 只为宽度变化做动画
- opcity: 透明度动画
duration: 动画持续时间
timing-function: 动画速度曲线
delay: 动画要等多久后才执行

transition: all .28s linear;