主题案例

本章节提供了一个标准主题文件的完整代码示例。您可以将其作为模板，复制并修改以创建您的自定义主题。

该案例展示了以下核心特性：

混合颜色格式：演示了如何同时使用 TechUI 预设色 ($c)、十六进制 (#fff) 和 RGBA (rgba(...))。
颜色计算：演示了如何使用 fade、darken 等函数基于基准色生成衍生色。
标准结构：包含了 common, font, button, chart 等所有必要字段。

代码展示

创建文件 src/themes/myTheme.js：

javascript

import { $c } from "@techui/colors";
import { tTheme } from "@techui/utils";

// 1. 提取常用的颜色处理函数
const { fade, darken, lighten } = $c;

// 2. 定义主题数据对象
const themeData = {
  name: "lightBlue", // 主题内部名称

  // --- 基础通用层 ---
  common: {
    bg: $c.wh,          // 使用 TechUI 预设色 (White)
    bd: $c.gyl3,        // 使用 TechUI 预设色 (Gray Light 3)
    bg_layer: "#f0f2f5", // 使用 Hex 十六进制
    bd_layer: $c.gyA08,
    bg_frame: $c.gyA03,
    bd_frame: $c.gyA08,
    bg_root: "rgba(240, 242, 245, 1)", // 使用 RGBA
    bd_root: $c.gyA15,
  },

  // --- 排版系统 ---
  font: {
    weakest: $c.wh,
    weaker: $c.gyl5,
    weak: $c.gym5,
    base: $c.gyr9,      // 正文颜色
    strong: $c.gyd3,
    stronger: $c.gyd7,
    strongest: "#000000", // 纯黑
  },

  // --- 交互组件：按钮 ---
  button: {
    bg: $c.wh,
    bd: $c.gyl4,
    // 悬停态：使用 TechUI 颜色
    bg_hov: $c.bll1,
    bd_hov: $c.bll2,
    // 激活态：使用透明度函数计算
    bg_act: fade('blA01', 0.9),
    bd_act: $c.bll5,
    // 禁用态
    bg_dis: $c.gyl2,
    bd_dis: $c.gyl4,
  },

  // --- 交互组件：输入框 ---
  input: {
    bg: $c.wh,
    bd: $c.gyl3,
    bg_hov: $c.wh,
    bd_hov: $c.blC03,
    bg_foc: $c.wh,
    bd_foc: $c.blA08, // 聚焦时的边框色
    bg_dis: $c.gyA08,
    bd_dis: $c.gyA12,
  },

  // --- 功能色阶 ---
  primary: {
    weakest: $c.blA01,
    weaker: $c.blA03,
    weak: $c.blA06,
    base: $c.blA09,   // 主色基准
    strong: $c.blC11,
    stronger: $c.blD13,
    strongest: $c.blE16,
  },
  // ... success, warning, danger, info (结构同上，此处省略)

  // --- 布局配置 ---
  sider: {
    fc: fade('bld1', 0.8), // 侧边栏文字带透明度
    focus: $c.cyA10,
    bg_hov: fade('bk', 0.1),
    bg_act: fade('bk', 0.3),
    bg: {
      // 侧边栏渐变背景
      grad_pri: $c.blhl5,
      grad_sec: $c.blhl7,
      grad_thi: $c.blhl8,
    },
  },

  // --- 全局背景策略 ---
  background: {
    // 视图区域渐变流
    view_grad: [$c.wh, $c.cbA01, $c.blA03],
    view_svgfill: $c.wh,
    view_svgfill_opa: 0.5,
    root: $c.gyl2,
    root_svgfill: $c.wh,
    root_svgfill_opa: 0.7
  },

  // --- 科幻/3D 风格配置 ---
  scifi: {
    thickness: $c.gym5,
    bg: $c.wh,
    bg_alt: $c.blA02,
    bd: $c.bll1,
    fc: $c.bll5,
    hlite: $c.cyl5, // 高亮发光色
    focus: $c.bll5,
  },

  // --- 图表配色 (ECharts) ---
  chart: {
    line: {
      weak: $c.gyl2,
      base: $c.gyl5,
      strong: $c.gyl9,
    },
    map: {
      fc: $c.bll6,
      bg: $c.blA01,
      bd: $c.blA05,
      bg_hov: $c.yel1, // 地图 Hover 黄色
      bd_hov: $c.orl3,
      glow: fade('cbl7', 0.3), // 发光效果
      shadow: fade('blA05', 0.5),
    },
    // 自动生成 ECharts 调色盘
    palette: [$c.bll5, $c.cyl5, $c.yel5, $c.rel4],
    visual: [$c.cbl3, $c.wh],
  },
};

// 3. 注册主题
tTheme.register({
  value: "lightBlue", // 全局唯一 ID
  scheme: "light",    // 归属色系：light | dark
  colors: [$c.bll5, $c.bll1], // 在控制面板显示的预览色块
  data: themeData
});

颜色格式说明

TechUI 的主题系统具有极高的兼容性，您可以在 themeData 中自由混合使用以下三种颜色格式。系统会在运行时统一处理。

TechUI 预设变量 ($c)

推荐使用。这是最语义化且便于维护的方式。

示例：$c.rel5 (标准红), $c.gyl3 (浅灰)
优势：支持 lighten, fade 等函数计算，自动适配色谱。

十六进制 (Hex)

适用于从设计稿（Figma/Sketch）直接复制颜色值。

示例："#ffffff", "#1890ff"
优势：通用性强，与设计工具无缝对接。

RGBA / RGB

适用于需要精确控制透明度，且不想使用 $c.fade 函数的场景。

示例："rgba(0, 0, 0, 0.5)", "rgb(255, 255, 255)"
优势：原生 CSS 支持，直观的透明度控制。

开发建议

基准色优先：在定义 primary 等色阶时，建议先确定 base 色，然后通过 $c.lighten() 或 $c.darken() 自动生成 weak/strong 变体，以保持色阶的数学规律性。
复用变量：在 scifi 或 chart 等高级配置中，尽量复用 common 或 primary 中的颜色，而不是引入新的色值，这能让主题看起来更加统一协调。

主题案例 ​

代码展示 ​

颜色格式说明 ​

TechUI 预设变量 ($c) ​

十六进制 (Hex) ​

RGBA / RGB ​