主题配置

本项目基于 Tailwind CSS v4 构建，提供了高度灵活的主题定制系统。从整体布局到细节样式，您都可以通过 CSS 变量和 Tailwind 工具类进行个性化定制，打造独特的用户界面和体验。

主题配置文件

主题配置位于：src/assets/styles/core/tailwind.css

CSS 主题变量

基础颜色变量

使用 CSS 变量：

css

/* 文字颜色 */
color: var(--art-gray-100);
color: var(--art-gray-900);

/* 边框 */
border: 1px solid var(--default-border);
border: 1px solid var(--default-border-dashed);

/* 背景颜色 */
background-color: var(--default-bg-color); /* 页面底色 */
background-color: var(--default-box-color); /* 卡片/容器背景 */

/* 交互状态 */
background-color: var(--art-hover-color); /* 悬停状态 */
background-color: var(--art-active-color); /* 激活状态 */

使用 Tailwind 工具类：

html

<!-- 文字颜色 -->
<div class="text-g-900">深色文字</div>
<div class="text-g-500">中等文字</div>
<div class="text-g-100">浅色文字</div>

<!-- 背景颜色 -->
<div class="bg-box">卡片背景</div>
<div class="bg-hover-color">悬停背景</div>

<!-- 边框 -->
<div class="border-full-d">完整边框</div>
<div class="border-b-d">底部边框</div>

<!-- 主题色 -->
<div class="bg-primary text-white">主题色背景</div>
<div class="text-primary">主题色文字</div>

主题色系统

项目使用 OKLCH 色彩空间定义主题色，提供更准确的色彩表现：

css

/* 主题色 */
color: var(--art-primary); /* 主色 */
color: var(--art-secondary); /* 次要色 */
color: var(--art-success); /* 成功色 */
color: var(--art-warning); /* 警告色 */
color: var(--art-error); /* 错误色 */
color: var(--art-info); /* 信息色 */
color: var(--art-danger); /* 危险色 */

Element Plus 主题色变体：

系统自动生成 9 个不同深浅的主题色变体，用于不同场景：

css

/* 主题色变浅（数字越大越浅） */
background-color: var(--el-color-primary-light-1); /* 最深 */
background-color: var(--el-color-primary-light-5); /* 中等 */
background-color: var(--el-color-primary-light-9); /* 最浅 */

/* 主题色变深（数字越大越深） */
background-color: var(--el-color-primary-dark-1);
background-color: var(--el-color-primary-dark-5);
background-color: var(--el-color-primary-dark-9);

灰度色系统

提供 9 个层级的灰度色，自动适配 Light/Dark 模式：

css

/* CSS 变量方式 */
color: var(--art-gray-100); /* 最浅 */
color: var(--art-gray-500); /* 中等 */
color: var(--art-gray-900); /* 最深 */

/* Tailwind 工具类方式 */
<div class="text-g-100">最浅文字</div>
<div class="text-g-500">中等文字</div>
<div class="text-g-900">最深文字</div>

<div class="bg-g-100">最浅背景</div>
<div class="bg-g-200">浅背景</div>

主题变量详解

Light 模式变量

css

:root {
  /* 基础颜色 */
  --art-color: #ffffff;
  --theme-color: var(--main-color);

  /* 主题色 - OKLCH 格式 */
  --art-primary: oklch(0.7 0.23 260);
  --art-secondary: oklch(0.72 0.19 231.6);
  --art-error: oklch(0.73 0.15 25.3);
  --art-info: oklch(0.58 0.03 254.1);
  --art-success: oklch(0.78 0.17 166.1);
  --art-warning: oklch(0.78 0.14 75.5);
  --art-danger: oklch(0.68 0.22 25.3);

  /* 灰度色系 */
  --art-gray-100: #f9fafb;
  --art-gray-200: #f2f4f5;
  --art-gray-300: #e6eaeb;
  --art-gray-400: #dbdfe1;
  --art-gray-500: #949eb7;
  --art-gray-600: #7987a1;
  --art-gray-700: #4d5875;
  --art-gray-800: #383853;
  --art-gray-900: #323251;

  /* 边框颜色 */
  --art-card-border: rgba(0, 0, 0, 0.07);
  --default-border: #e2e8ee;
  --default-border-dashed: #dbdfe9;

  /* 背景颜色 */
  --default-bg-color: #fafbfc; /* 页面底色 */
  --default-box-color: #ffffff; /* 卡片/容器背景 */

  /* 交互状态颜色 */
  --art-hover-color: #f2f4f5; /* 悬停状态 */
  --art-active-color: #f2f4f5; /* 激活状态 */
  --art-el-active-color: #f2f4f5; /* Element 组件激活状态 */
}

Dark 模式变量

css

.dark {
  /* 基础颜色 */
  --art-color: #000000;

  /* 灰度色系（暗黑模式下反转） */
  --art-gray-100: #110f0f;
  --art-gray-200: #17171c;
  --art-gray-300: #393946;
  --art-gray-400: #505062;
  --art-gray-500: #73738c;
  --art-gray-600: #8f8fa3;
  --art-gray-700: #ababba;
  --art-gray-800: #c7c7d1;
  --art-gray-900: #e3e3e8;

  /* 边框颜色 */
  --art-card-border: rgba(255, 255, 255, 0.07);
  --default-border: rgba(255, 255, 255, 0.1);
  --default-border-dashed: #363843;

  /* 背景颜色 */
  --default-bg-color: #070707; /* 页面底色 */
  --default-box-color: #161618; /* 卡片/容器背景 */

  /* 交互状态颜色 */
  --art-hover-color: #252530; /* 悬停状态 */
  --art-active-color: #202226; /* 激活状态 */
  --art-el-active-color: #2e2e38; /* Element 组件激活状态 */
}

Tailwind 工具类扩展

项目扩展了 Tailwind CSS，提供了更多实用的工具类：

布局工具类

html

<!-- Flexbox 快捷类 -->
<div class="flex-c">
  <!-- flex + items-center -->
  <div class="flex-b">
    <!-- flex + justify-between -->
    <div class="flex-cc">
      <!-- flex + items-center + justify-center -->
      <div class="flex-cb"><!-- flex + items-center + justify-between --></div>
    </div>
  </div>
</div>

过渡动画

html

<div class="tad-200">
  <!-- transition-all duration-200 -->
  <div class="tad-300"><!-- transition-all duration-300 --></div>
</div>

边框工具类

html

<div class="border-full-d">
  <!-- 完整边框 -->
  <div class="border-b-d">
    <!-- 底部边框 -->
    <div class="border-t-d">
      <!-- 顶部边框 -->
      <div class="border-l-d">
        <!-- 左侧边框 -->
        <div class="border-r-d"><!-- 右侧边框 --></div>
      </div>
    </div>
  </div>
</div>

其他工具类

html

<div class="c-p"><!-- cursor-pointer --></div>

自定义圆角

html

<div class="rounded-custom-xs">
  <!-- 小圆角 -->
  <div class="rounded-custom-sm"><!-- 中等圆角 --></div>
</div>

主题切换

使用 useTheme Hook

typescript

import { useTheme } from "@/hooks/core/useTheme";
import { SystemThemeEnum } from "@/enums/appEnum";

const { switchThemeStyles } = useTheme();

// 切换到暗色主题
switchThemeStyles(SystemThemeEnum.DARK);

// 切换到亮色主题
switchThemeStyles(SystemThemeEnum.LIGHT);

// 切换到自动模式（跟随系统）
switchThemeStyles(SystemThemeEnum.AUTO);

自定义主题色

修改预设主题色

在 src/config/index.ts 中修改预设的主题色列表：

typescript

systemMainColor: [
  "#5D87FF", // 默认蓝色
  "#B48DF3", // 紫色
  "#1D84FF", // 天蓝色
  "#60C041", // 绿色
  "#38C0FC", // 青色
  "#F9901F", // 橙色
  "#FF80C8", // 粉色
];

动态设置主题色

typescript

import { setElementThemeColor } from "@/utils/ui/colors";

// 设置自定义主题色
setElementThemeColor("#5D87FF");

主题色工具函数

项目提供了完整的颜色处理工具（src/utils/ui/colors.ts）：

typescript

import {
  hexToRgba, // Hex 转 RGBA
  hexToRgb, // Hex 转 RGB
  rgbToHex, // RGB 转 Hex
  getLightColor, // 生成变浅的颜色
  getDarkColor, // 生成变深的颜色
  colourBlend, // 颜色混合
} from "@/utils/ui/colors";

// 生成变浅的颜色
const lightColor = getLightColor("#5D87FF", 0.3);

// 生成变深的颜色
const darkColor = getDarkColor("#5D87FF", 0.3);

// 颜色混合
const blendedColor = colourBlend("#5D87FF", "#FFFFFF", 0.5);

响应式设计

使用 Tailwind 的响应式前缀：

html

<!-- 移动端优先 -->
<div class="text-sm md:text-base lg:text-lg">响应式文字大小</div>

<!-- 不同屏幕下的布局 -->
<div class="flex-col md:flex-row">响应式布局</div>

最佳实践

1. 优先使用 Tailwind 工具类

html

<!-- ✅ 推荐 -->
<div class="flex items-center gap-4 p-4 bg-box rounded-lg">
  <!-- ❌ 不推荐 -->
  <div style="display: flex; align-items: center; gap: 1rem;"></div>
</div>

2. 使用 CSS 变量保持一致性

css

/* ✅ 推荐 - 自动适配主题 */
.my-component {
  color: var(--art-gray-900);
  background: var(--default-box-color);
}

/* ❌ 不推荐 - 硬编码颜色 */
.my-component {
  color: #323251;
  background: #ffffff;
}

3. 使用语义化的颜色变量

css

/* ✅ 推荐 */
border-color: var(--default-border);
background: var(--art-hover-color);

/* ❌ 不推荐 */
border-color: #e2e8ee;
background: #f2f4f5;

4. 利用工具类组合

html

<!-- ✅ 推荐 - 使用预定义的组合类 -->
<div class="flex-cb tad-300">
  <!-- ❌ 不推荐 - 重复写完整的类 -->
  <div
    class="flex items-center justify-between transition-all duration-300"
  ></div>
</div>

主题配置总结

通过合理使用 CSS 变量、Tailwind 工具类和主题切换功能，您可以轻松打造出美观、一致且易于维护的用户界面。

主题配置 ​

主题配置文件 ​

CSS 主题变量 ​

基础颜色变量 ​

主题色系统 ​

灰度色系统 ​

主题变量详解 ​

Tailwind 工具类扩展 ​

布局工具类 ​

过渡动画 ​

边框工具类 ​

其他工具类 ​

自定义圆角 ​

主题切换 ​

使用 useTheme Hook ​

自定义主题色 ​

修改预设主题色 ​

动态设置主题色 ​

主题色工具函数 ​

响应式设计 ​

最佳实践 ​

1. 优先使用 Tailwind 工具类 ​

2. 使用 CSS 变量保持一致性 ​

3. 使用语义化的颜色变量 ​

4. 利用工具类组合 ​

主题配置总结 ​

主题配置

主题配置文件

CSS 主题变量

基础颜色变量

主题色系统

灰度色系统

主题变量详解

Tailwind 工具类扩展

布局工具类

过渡动画

边框工具类

其他工具类

自定义圆角

主题切换

使用 useTheme Hook

自定义主题色

修改预设主题色

动态设置主题色

主题色工具函数

响应式设计

最佳实践

1. 优先使用 Tailwind 工具类

2. 使用 CSS 变量保持一致性

3. 使用语义化的颜色变量

4. 利用工具类组合

主题配置总结