@techui/themes

@techui/themes

English | 中文

English

📦 Introduction

@techui/themes provides comprehensive theme support for the TechUI component library. It offers a collection of carefully designed themes to help you quickly customize the visual style of your application.

This powerful theming system delivers unified styling for:

• 📊 ECharts Charts - Beautiful, data-driven visualizations
• 🎯 UI Components - Consistent styling across all interface elements
• 🖼️ Vector Backgrounds - Elegant backdrop designs

Based on these style configurations, the library automatically generates ECharts theme configurations and CSS custom properties (CSS Variables), providing seamless global theme support throughout your application. Switch themes in real-time without page reloads for an exceptional user experience.

🎨 Available Themes

Currently, three themes are available:

• lightBlue - Light blue theme, suitable for bright and clean interfaces
• darkBlue - Dark blue theme, professional and modern
• darkBlack - Dark black theme, elegant and mysterious

🎯 Theme Development Rules

When developing or customizing themes, please follow these guidelines:

• Flat Structure: Keep theme definitions as flat as possible with minimal nesting levels to simplify CSS usage.

• Naming Convention: Use camelCase naming for all properties except specific suffixes:

  • State suffixes: _hov (hover), _act (active), _dis (disabled)
  • Gradient suffixes: _A, _B, _C
  • Opacity suffixes: _op1, _op3, _op5, _op7, _op9

• Abbreviations: Common properties use shortened forms for brevity:

  • border → bd
  • background → bg
  • fontColor → fc
  • hover → hov
  • active → act
  • disabled → dis
  • gradient → grad
  • highlight → hlite

• Arrays for JavaScript: Arrays like visual and palette are designed for JavaScript consumption (e.g., chart configurations) and cannot be accessed via CSS.

• Theme Usage:

  • CSS: var(--common-bg)
  • JavaScript: $themePalette.common.bg or $tc("common.bg") (requires prior import)

• Color Definition: Supports standard color formats ("#fff", "rgba(255,255,255,.3)") and TechUI color palette references (e.g., $c.gyl1, $c.gyA01).

• Protected Categories: Do not remove properties from core categories as this may cause errors:

  • common, font, button, input, menu, scroll, tone
  • primary, success, info, warning, danger, emphasis
  • sider, background, scifi, chart
  • For subsystem-specific themes, create parent categories (e.g., ADMIN: {...theme...})

• Auto-generated Opacity Variants: For objects including common, button, input, primary, success, info, warning, danger, emphasis, the following properties automatically generate opacity variants (_op1, _op3, _op5, _op7, _op9):

  • bg, bd, weakest, weaker, weak, base, strong, stronger, strongest
  • Example usage: --layer-base_op1

When adding new theme elements, ensure clear semantic meaning while keeping names concise.

📖 Documentation

For more information, please visit: https://techui.net

👨‍💻 Author

• Email: [e-mail]
• WeChat: jay1986cn

中文

📦 简介

@techui/themes 为 TechUI 组件库提供全方位的主题支持。它提供了一系列精心设计的主题,帮助您快速定制应用程序的视觉风格。

这套强大的主题系统为以下内容提供统一的样式支持：

• 📊 ECharts 图表 - 精美的数据可视化呈现
• 🎯 UI 组件 - 所有界面元素的一致性样式
• 🖼️ 矢量背景 - 优雅的背景设计

基于这些样式配置文件，该库会自动生成 ECharts 主题配置和 CSS 自定义属性（CSS Variables），为整个应用程序提供无缝的全局主题支持。支持实时切换主题，无需刷新页面即可获得卓越的用户体验。

🎨 可用主题

目前提供三种主题：

• lightBlue - 浅蓝主题，适合明亮清爽的界面
• darkBlue - 深蓝主题，专业现代
• darkBlack - 深黑主题，优雅神秘

🎯 主题开发规则

在开发或定制主题时，请遵循以下规范：

• 扁平化结构：主题定义尽量扁平化，减少层级嵌套，方便在编写 CSS 代码时调用。

• 命名规范：除特定后缀采用蛇形命名外，其余均采用小驼峰命名：

  • 状态类后缀：_hov（悬停）、_act（激活）、_dis（禁用）
  • 渐变类后缀：_A、_B、_C
  • 透明度类后缀：_op1、_op3、_op5、_op7、_op9

• 属性简写：特定元素采用简写方式，确保不影响语义：

  • border → bd（边框）
  • background → bg（背景）
  • fontColor → fc（字体颜色）
  • hover → hov（悬停）
  • active → act（激活）
  • disabled → dis（禁用）
  • gradient → grad（渐变）
  • highlight → hlite（高亮）

• JavaScript 专用数组：主题中定义的数组（如 visual、palette）无法通过 CSS 调用，需采用 JavaScript 调用方式，为图表等元素提供主题功能。

• 主题调用方式：

  • CSS 调用：var(--common-bg)
  • JavaScript 调用：$themePalette.common.bg 或 $tc("common.bg")（需提前导入对象或方法）

• 配色定义：支持常规字符串形式（"#fff"、"rgba(255,255,255,.3)"），也可调用 TechUI 色板（如 $c.gyl1、$c.gyA01）。

• 受保护的分类：不要删除公共分类中的元素，否则可能造成报错：

  • common、font、button、input、menu、scroll、tone
  • primary、success、info、warning、danger、emphasis
  • sider、background、scifi、chart
  • 如需针对不同子系统模块定义主题，应首先创建子系统父级（如 ADMIN: {...theme...}）

• 自动生成透明度变体：为以下对象元素的特定属性自动添加透明度变体（_op1、_op3、_op5、_op7、_op9）：

  • 对象：common、button、input、primary、success、info、warning、danger、emphasis
  • 属性：bg、bd、weakest、weaker、weak、base、strong、stronger、strongest
  • 使用示例：--layer-base_op1

追加主题元素时，请务必遵守上述规则，命名时尽量在简短的前提下表达清晰的语义。

📖 文档

更多信息请访问：https://techui.net

👨‍💻 作者

• 邮箱: [e-mail]
• 微信: jay1986cn