@robot-admin/theme

项目定位

Robot Theme 是分层主题基础设施，以 @robot-admin/theme 发布。从框架无关的模式解析与设计 Token，到 Vue / Pinia 状态管理和 Naive UI 适配，按应用需要选择入口。

当前仓库版本 0.6.1。覆盖 light / dark / system 模式、3 套设计风格、同源标签页同步、可恢复 CSS Variables 与 View Transition 渐进增强。

能力地图

入口选择

设计风格 CSS 当前面向 Naive UI / Robot C_* 体系。其他 UI 项目可以复用 /core、/tokens、/vue，再提供相应呈现适配。

快速开始

只使用 Token

bun add @robot-admin/theme

import {
  createThemeTokens,
  getThemeCssVariables,
} from "@robot-admin/theme/tokens";

const tokens = createThemeTokens({
  light: { color: { primary: "#5946e8" } },
  dark: { color: { primary: "#a89cff" } },
  radius: { md: "10px" },
});

const darkVariables = getThemeCssVariables(tokens, "dark");

darkVariables 是变量映射；写入与恢复可使用 applyThemeTokens()。项目仅提交需要变化的字段，未知字段和空值会被拒绝，完整语义见 Token 设计。

Vue / Pinia 与 Naive UI

安装匹配的 peer，并先在 main.ts 中为应用注册 Pinia：

bun add vue@^3.4.0 pinia@^3.0.0 naive-ui@^2.38.0

Pinia 2.x 也受支持。以下放在根组件 App.vue，由根组件管理共享主题的初始化和销毁：

<script setup lang="ts">
import { onUnmounted } from "vue";
import { NConfigProvider } from "naive-ui";
import { useThemeStore } from "@robot-admin/theme/vue";
import { useNaiveTheme } from "@robot-admin/theme/naive";
import "@robot-admin/theme/naive/styles";

const theme = useThemeStore();
theme.init();
const { currentTheme, themeOverrides } = useNaiveTheme({
  isDark: () => theme.isDark,
  tokens: theme.tokens,
});
onUnmounted(() => theme.destroy());
</script>

<template>
  <NConfigProvider :theme="currentTheme" :theme-overrides="themeOverrides">
    <button @click="theme.toggleDark()">切换明暗</button>
  </NConfigProvider>
</template>

项目自定义 Token 用 createThemeStore({ tokens }) 配置；不要维护第二份主题缓存。overrides 应是增量补丁，整套亮色配置会覆盖暗色基础值。

所有权与兼容边界

文档与维护

本包的 bun run verify 覆盖类型、测试、构建与发布入口；工作区完整验证使用根目录的同名命令。

许可证

MIT License · Robot Packages