@haismart/haismart-theme-ui

提供可在 CSS / Less / Sass / JavaScript 中使用的主题基础样式（CSS Variables）。

内部私有包：仅供公司内部使用。

目录结构

src/
  styles/              # 源文件层（编辑 token 的地方）
    common-colors.css      # 第一层：通用色（底层基础色）
    semantic-colors.css    # 第二层：主题色（语义色）
    base-font.css          # 字体基础样式
    base-gap.css           # 间距基础样式
    base-border-radius.css # 圆角基础样式
  theme.config.js      # 主题配置入口，聚合所有变量
  index.js             # 核心逻辑（注入 CSS）

scripts/
  build-styles.js      # 样式构建脚本：合并 CSS 变量

dist/                  # 构建产物
  index.js             # 暴露 initTheme 方法供外部调用
  theme.css            # 构建后合并的完整样式
  theme-vars.less      # 导出的 Less 变量
  theme-vars.sass      # 导出的 Sass 变量

构建

npm run build

生成 dist/theme.css、dist/theme-vars.less 和 dist/theme-vars.sass。

在项目中引用

JavaScript（动态注入）

import { initTheme } from "@garyguoli/haismart-theme-ui";

// 初始化主题（注入 CSS）
initTheme();

CSS（直接引用）

import "@garyguoli/haismart-theme-ui/dist/theme.css";

Less（变量）

### 单独 文件引用
@import "@garyguoli/haismart-theme-ui/dist/theme-vars.less";

.my-component {
  color: @color-primary;
  padding: @gap-4;
}

### 全局调用
Sea-home   less-loader 5.

  addLessLoader({
    // less-loader 5.x 直接在 options 下配置
    javascriptEnabled: true,
    modifyVars: {
      // 关键技巧：利用 hack 变量在每个 Less 文件末尾自动导入 NPM 包中的变量文件
      // 注意路径前的波浪号 ~ 代表从 node_modules 中查找
      'hack': `true; @import "~@garyguoli/haismart-theme-ui/dist/theme-vars.less";`,
    },
  })

Sass（变量）

@import "@garyguoli/haismart-theme-ui/theme-vars.sass"

.my-component
  color: $color-primary
  padding: $gap-4

或者使用 SCSS 语法：

@import "@garyguoli/haismart-theme-ui/dist/theme-vars.sass";

.my-component {
  color: $color-primary;
  padding: $gap-4;
}

直接引用源文件（CSS）

@import "@garyguoli/haismart-theme-ui/dist/styles/index.css";
/* 或者单独引用 */
@import "@garyguoli/haismart-theme-ui/dist/styles/common-colors.css";

CNS/CDN 单文件产物（public）

执行：

bun run build:public

产物：

• public/haismart-theme-ui/theme-ui.css（已将 @import 内联合并为一个文件：tokens + reset）

API

initTheme(options?)

初始化主题（注入 CSS）。

参数：

• options.target (string, 可选): 注入目标选择器，默认为 'head'
• options.force (boolean, 可选): 是否强制重新注入，默认为 false

示例：

import { initTheme } from "@garyguoli/haismart-theme-ui";

// 默认注入到 head
initTheme();

// 注入到指定元素
initTheme({ target: "#app" });

// 强制重新注入
initTheme({ force: true });

removeTheme()

移除主题样式。

import { removeTheme } from "@garyguoli/haismart-theme-ui";
removeTheme();

isThemeInjected()

检查主题是否已注入。

import { isThemeInjected } from "@garyguoli/haismart-theme-ui";
if (isThemeInjected()) {
  console.log("主题已注入");
}

使用 CSS 变量和 data-theme 实现多主题

本文介绍如何使用 HTML data-theme 属性和 CSS 变量来实现暗黑主题和全彩主题。 var(--test1)

文章: https://ihaier.feishu.cn/wiki/QgtlwRTWPisecLk5qPacEcqlnof?fromScene=spaceOverview

Haismart UI Kit 4.0 https://www.figma.com/design/GelYX7TRGJYxUg5VOBdfzo/Haismart-UI-Kit-4.0?node-id=6856-22434&t=cSdINNWcIHBvxieY-0