Subject Case Study

This section provides a complete code example of a standard theme file. You can use it as a template, copying and modifying it to create your own custom themes.

The case study demonstrates the following core features:

1. Mixed Color Formats: Demonstrates how to simultaneously use TechUI preset colors ($c), Hexadecimal (#fff), and RGBA (rgba(...)).
2. Color Calculation: Demonstrates how to use functions like fade and darken to generate derived colors based on a base color.
3. Standard Structure: Includes all necessary fields such as common, font, button, chart, etc.

Code Display

Create the file src/themes/myTheme.js:

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

// 1. Extract common color processing functions
const { fade, darken, lighten } = $c;

// 2. Define the theme data object
const themeData = {
  name: "lightBlue", // Internal theme name

  // --- Basic Common Layer ---
  common: {
    bg: $c.wh,          // Using TechUI preset color (White)
    bd: $c.gyl3,        // Using TechUI preset color (Gray Light 3)
    bg_layer: "#f0f2f5", // Using Hex Hexadecimal
    bd_layer: $c.gyA08,
    bg_frame: $c.gyA03,
    bd_frame: $c.gyA08,
    bg_root: "rgba(240, 242, 245, 1)", // Using RGBA
    bd_root: $c.gyA15,
  },

  // --- Typography System ---
  font: {
    weakest: $c.wh,
    weaker: $c.gyl5,
    weak: $c.gym5,
    base: $c.gyr9,      // Body text color
    strong: $c.gyd3,
    stronger: $c.gyd7,
    strongest: "#000000", // Pure black
  },

  // --- Interactive Components: Button ---
  button: {
    bg: $c.wh,
    bd: $c.gyl4,
    // Hover state: using TechUI colors
    bg_hov: $c.bll1,
    bd_hov: $c.bll2,
    // Active state: calculated using the transparency function
    bg_act: fade('blA01', 0.9),
    bd_act: $c.bll5,
    // Disabled state
    bg_dis: $c.gyl2,
    bd_dis: $c.gyl4,
  },

  // --- Interactive Components: Input ---
  input: {
    bg: $c.wh,
    bd: $c.gyl3,
    bg_hov: $c.wh,
    bd_hov: $c.blC03,
    bg_foc: $c.wh,
    bd_foc: $c.blA08, // Border color when focused
    bg_dis: $c.gyA08,
    bd_dis: $c.gyA12,
  },

  // --- Functional Color Scales ---
  primary: {
    weakest: $c.blA01,
    weaker: $c.blA03,
    weak: $c.blA06,
    base: $c.blA09,   // Primary color base
    strong: $c.blC11,
    stronger: $c.blD13,
    strongest: $c.blE16,
  },
  // ... success, warning, danger, info (structure same as above, omitted here)

  // --- Layout Configuration ---
  sider: {
    fc: fade('bld1', 0.8), // Sidebar text with transparency
    focus: $c.cyA10,
    bg_hov: fade('bk', 0.1),
    bg_act: fade('bk', 0.3),
    bg: {
      // Sidebar gradient background
      grad_pri: $c.blhl5,
      grad_sec: $c.blhl7,
      grad_thi: $c.blhl8,
    },
  },

  // --- Global Background Strategy ---
  background: {
    // Viewport gradient flow
    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
  },

  // --- Sci-Fi / 3D Style Configuration ---
  scifi: {
    thickness: $c.gym5,
    bg: $c.wh,
    bg_alt: $c.blA02,
    bd: $c.bll1,
    fc: $c.bll5,
    hlite: $c.cyl5, // Highlight glow color
    focus: $c.bll5,
  },

  // --- Chart Coloring (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, // Map Hover yellow
      bd_hov: $c.orl3,
      glow: fade('cbl7', 0.3), // Glow effect
      shadow: fade('blA05', 0.5),
    },
    // Automatically generate ECharts palette
    palette: [$c.bll5, $c.cyl5, $c.yel5, $c.rel4],
    visual: [$c.cbl3, $c.wh],
  },
};

// 3. Register Theme
tTheme.register({
  value: "lightBlue", // Globally unique ID
  scheme: "light",    // Color scheme affiliation: light | dark
  colors: [$c.bll5, $c.bll1], // Preview color blocks displayed in the control panel
  data: themeData
});

Color Format Description

TechUI's theme system is highly compatible; you can freely mix the following three color formats within themeData. The system will process them uniformly at runtime.

TechUI Preset Variables ($c)

Recommended. This is the most semantic and maintainable method.

• Example: $c.rel5 (Standard Red), $c.gyl3 (Light Gray)
• Advantage: Supports function calculations like lighten, fade, etc., and automatically adapts to the color spectrum.

Hexadecimal (Hex)

Suitable for directly copying color values from design drafts (Figma/Sketch).

• Example: "#ffffff", "#1890ff"
• Advantage: Strong universality, seamless integration with design tools.

RGBA / RGB

Suitable for scenarios where precise transparency control is needed and you do not want to use the $c.fade function.

• Example: "rgba(0, 0, 0, 0.5)", "rgb(255, 255, 255)"
• Advantage: Native CSS support, intuitive transparency control.

Development Suggestions

• Base Color Priority: When defining color scales like primary, it is recommended to first determine the base color and then use $c.lighten() or $c.darken() to automatically generate weak/strong variants to maintain the mathematical regularity of the color scale.
• Variable Reuse: In advanced configurations like scifi or chart, try to reuse colors from common or primary instead of introducing new color values. This makes the theme appear more unified and coordinated.