@slidejs/theme 0.1.3

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 slidejs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,329 @@
+# @slidejs/theme
+
+SlideJS 主题系统 - 运行时 CSS 变量 Hook API
+
+## 功能特性
+
+- ✅ 统一的标准化主题配置接口
+- ✅ 运行时动态设置 CSS 变量
+- ✅ 支持全局和作用域自定义
+- ✅ 类型安全的 API
+- ✅ 所有 runner 自动映射标准变量
+- ✅ 内置预设主题（Solarized Dark/Light）
+
+## 设计理念
+
+### 高级 API（官方支持）
+
+使用标准变量名，不针对特定 runner：
+
+```typescript
+setTheme({
+  navigationColor: '#ff0000', // 标准变量名
+  paginationColor: '#00ff00', // 标准变量名
+});
+```
+
+所有 runner 会自动将这些标准变量映射到自己的变量：
+
+- `--slidejs-navigation-color` → `--slidejs-swiper-navigation-color` (Swiper)
+- `--slidejs-navigation-color` → `--slidejs-splide-arrow-color` (Splide)
+
+### 低级 API（自行使用，风险自负）
+
+如果需要直接设置 runner 特定变量，请自行使用 DOM API：
+
+```typescript
+// 不推荐：直接设置 runner 特定变量（风险自负）
+document.documentElement.style.setProperty('--slidejs-swiper-navigation-color', '#ff0000');
+```
+
+**注意**：
+
+- 低级 API 不在 SlideJS 官方支持范围内
+- 可能导致兼容性问题
+- 不推荐使用
+
+## 安装
+
+```bash
+npm install @slidejs/theme
+```
+
+## 使用方式
+
+### 使用预设主题（推荐）
+
+```typescript
+import { setTheme, Preset } from '@slidejs/theme';
+
+// 使用 Solarized Dark 主题（推荐：使用命名空间常量）
+setTheme(Preset.SolarizedDark);
+
+// 使用 Solarized Light 主题（推荐：使用命名空间常量）
+setTheme(Preset.SolarizedLight);
+```
+
+### 全局主题设置（自定义）
+
+```typescript
+import { setTheme } from '@slidejs/theme';
+
+// 设置全局主题（使用标准变量名）
+setTheme({
+  navigationColor: '#ff0000',
+  paginationColor: '#00ff00',
+  backgroundColor: '#ffffff',
+  textColor: '#000000',
+});
+```
+
+### 作用域主题设置
+
+```typescript
+import { useTheme } from '@slidejs/theme';
+
+// 为特定容器设置预设主题（推荐：使用命名空间常量）
+import { Preset } from '@slidejs/theme';
+
+const theme = useTheme('#my-slides');
+theme.set(Preset.SolarizedDark);
+
+// 或使用自定义主题
+theme.set({
+  navigationColor: '#ff0000',
+  paginationColor: '#00ff00',
+});
+
+// 或使用 HTMLElement
+import { Preset } from '@slidejs/theme';
+const container = document.getElementById('slides');
+const theme2 = useTheme(container);
+theme2.set(Preset.SolarizedLight);
+```
+
+### 动态切换主题
+
+```typescript
+import { setTheme } from '@slidejs/theme';
+
+// 使用预设主题切换（推荐：使用命名空间常量）
+import { Preset } from '@slidejs/theme';
+
+function setDarkTheme() {
+  setTheme(Preset.SolarizedDark);
+}
+
+function setLightTheme() {
+  setTheme(Preset.SolarizedLight);
+}
+
+// 或使用自定义主题
+function setCustomDarkTheme() {
+  setTheme({
+    backgroundColor: '#191919',
+    textColor: '#ffffff',
+    linkColor: '#42affa',
+  });
+}
+```
+
+### 高级用法
+
+```typescript
+import { SlideThemeHook } from '@slidejs/theme';
+
+// 创建自定义 Hook 实例
+const theme = new SlideThemeHook('#my-slides');
+
+// 设置主题
+theme.set({
+  navigationColor: '#ff0000',
+});
+
+// 获取 CSS 变量值
+const color = theme.get('--slidejs-navigation-color');
+
+// 移除 CSS 变量
+theme.remove('--slidejs-navigation-color');
+
+// 清除所有标准主题变量
+theme.clear();
+```
+
+## 预设主题
+
+### Solarized Dark
+
+```typescript
+import { setTheme, Preset, solarizedDark } from '@slidejs/theme';
+
+// 使用命名空间常量（推荐）
+setTheme(Preset.SolarizedDark);
+
+// 或直接使用主题对象
+setTheme(solarizedDark);
+```
+
+### Solarized Light
+
+```typescript
+import { setTheme, Preset, solarizedLight } from '@slidejs/theme';
+
+// 使用命名空间常量（推荐）
+setTheme(Preset.SolarizedLight);
+
+// 或直接使用主题对象
+setTheme(solarizedLight);
+```
+
+## API 参考
+
+### `setTheme(theme: StandardTheme | PresetThemeName)`
+
+设置全局标准主题（官方支持）。
+
+- 参数可以是标准主题配置对象
+- 或预设主题命名空间常量（`Preset.SolarizedDark` 或 `Preset.SolarizedLight`）
+
+### `useTheme(selector?: HTMLElement | string): SlideThemeHook)`
+
+创建作用域主题 Hook。
+
+### `SlideThemeHook`
+
+主题 Hook 类，提供以下方法：
+
+- `set(theme: StandardTheme | PresetThemeName)`: 设置标准主题或预设主题（官方支持）
+- `get(variableName: string)`: 获取 CSS 变量值
+- `remove(variableName: string)`: 移除 CSS 变量
+- `clear()`: 清除所有标准主题变量
+
+### 预设主题导出
+
+```typescript
+import {
+  Preset,
+  solarizedDark,
+  solarizedLight,
+  presets,
+  type PresetThemeName,
+} from '@slidejs/theme';
+
+// 使用命名空间常量（推荐）
+setTheme(Preset.SolarizedDark);
+setTheme(Preset.SolarizedLight);
+
+// 或直接使用主题对象
+setTheme(solarizedDark);
+setTheme(solarizedLight);
+
+// 获取所有预设主题
+Object.keys(presets); // ['solarized-dark', 'solarized-light']
+```
+
+## 标准主题配置
+
+```typescript
+interface StandardTheme {
+  navigationColor?: string; // 导航按钮颜色
+  paginationColor?: string; // 分页器颜色
+  paginationActiveColor?: string; // 分页器激活颜色
+  scrollbarBg?: string; // 滚动条背景色
+  scrollbarDragBg?: string; // 滚动条拖拽颜色
+  arrowColor?: string; // 箭头颜色（用于 Splide）
+  progressBarColor?: string; // 进度条颜色
+  backgroundColor?: string; // 背景色
+  textColor?: string; // 文本颜色
+  linkColor?: string; // 链接颜色
+  headingColor?: string; // 标题颜色
+  codeBackground?: string; // 代码背景色
+}
+```
+
+## 标准 CSS 变量
+
+所有标准变量都以 `--slidejs-` 开头，不包含 runner 名称：
+
+- `--slidejs-navigation-color`
+- `--slidejs-pagination-color`
+- `--slidejs-pagination-active-color`
+- `--slidejs-scrollbar-bg`
+- `--slidejs-scrollbar-drag-bg`
+- `--slidejs-arrow-color`
+- `--slidejs-progress-bar-color`
+- `--slidejs-background-color`
+- `--slidejs-text-color`
+- `--slidejs-link-color`
+- `--slidejs-heading-color`
+- `--slidejs-code-background`
+
+## Runner 映射
+
+每个 runner 会自动将标准变量映射到自己的变量：
+
+### Swiper
+
+- `--slidejs-navigation-color` → `--slidejs-swiper-navigation-color`
+- `--slidejs-pagination-color` → `--slidejs-swiper-pagination-color`
+
+### Reveal.js
+
+- `--slidejs-background-color` → `--slidejs-revealjs-background-color`
+- `--slidejs-text-color` → `--slidejs-revealjs-text-color`
+
+### Splide
+
+- `--slidejs-arrow-color` → `--slidejs-splide-arrow-color`
+- `--slidejs-pagination-color` → `--slidejs-splide-pagination-color`
+
+## 低级 API（自行使用，风险自负）
+
+如果需要直接设置 runner 特定变量，请自行使用 DOM API：
+
+```typescript
+// 不推荐：直接设置 runner 特定变量
+document.documentElement.style.setProperty('--slidejs-swiper-navigation-color', '#ff0000');
+
+// 或使用作用域
+const container = document.getElementById('slides');
+if (container) {
+  container.style.setProperty('--slidejs-swiper-navigation-color', '#ff0000');
+}
+```
+
+**警告**：
+
+- 这些变量不在 SlideJS 官方支持范围内
+- 可能导致兼容性问题
+- 不推荐使用
+
+## 预设主题详情
+
+### Solarized Dark
+
+基于 Solarized 配色方案的深色主题，适合在暗光环境下使用。
+
+**颜色方案**：
+
+- 背景：`#002b36` (base03)
+- 文本：`#839496` (base0)
+- 链接/导航：`#268bd2` (blue)
+- 激活状态：`#2aa198` (cyan)
+
+### Solarized Light
+
+基于 Solarized 配色方案的浅色主题，适合在明亮环境下使用。
+
+**颜色方案**：
+
+- 背景：`#fdf6e3` (base3)
+- 文本：`#657b83` (base00)
+- 链接/导航：`#268bd2` (blue)
+- 激活状态：`#2aa198` (cyan)
+
+参考：[Solarized 官方网站](https://ethanschoonover.com/solarized/)
+
+## 许可证
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a={navigationColor:"--slidejs-navigation-color",paginationColor:"--slidejs-pagination-color",paginationActiveColor:"--slidejs-pagination-active-color",scrollbarBg:"--slidejs-scrollbar-bg",scrollbarDragBg:"--slidejs-scrollbar-drag-bg",arrowColor:"--slidejs-arrow-color",progressBarColor:"--slidejs-progress-bar-color",backgroundColor:"--slidejs-background-color",textColor:"--slidejs-text-color",linkColor:"--slidejs-link-color",headingColor:"--slidejs-heading-color",codeBackground:"--slidejs-code-background"},g="solarized-dark",c="solarized-light",d={backgroundColor:"#002b36",textColor:"#839496",headingColor:"#93a1a1",linkColor:"#268bd2",navigationColor:"#268bd2",paginationColor:"#268bd2",paginationActiveColor:"#2aa198",arrowColor:"#268bd2",progressBarColor:"#2aa198",scrollbarBg:"rgba(131, 148, 150, 0.2)",scrollbarDragBg:"rgba(131, 148, 150, 0.5)",codeBackground:"#073642"},C={backgroundColor:"#fdf6e3",textColor:"#657b83",headingColor:"#586e75",linkColor:"#268bd2",navigationColor:"#268bd2",paginationColor:"#268bd2",paginationActiveColor:"#2aa198",arrowColor:"#268bd2",progressBarColor:"#2aa198",scrollbarBg:"rgba(101, 123, 131, 0.2)",scrollbarDragBg:"rgba(101, 123, 131, 0.5)",codeBackground:"#eee8d5"},s={[g]:d,[c]:C},b={SolarizedDark:g,SolarizedLight:c};function i(r,o,l){r instanceof Document?r.documentElement.style.setProperty(o,l):r.style.setProperty(o,l)}function e(r,o){o.navigationColor&&i(r,a.navigationColor,o.navigationColor),o.paginationColor&&i(r,a.paginationColor,o.paginationColor),o.paginationActiveColor&&i(r,a.paginationActiveColor,o.paginationActiveColor),o.scrollbarBg&&i(r,a.scrollbarBg,o.scrollbarBg),o.scrollbarDragBg&&i(r,a.scrollbarDragBg,o.scrollbarDragBg),o.arrowColor&&i(r,a.arrowColor,o.arrowColor),o.progressBarColor&&i(r,a.progressBarColor,o.progressBarColor),o.backgroundColor&&i(r,a.backgroundColor,o.backgroundColor),o.textColor&&i(r,a.textColor,o.textColor),o.linkColor&&i(r,a.linkColor,o.linkColor),o.headingColor&&i(r,a.headingColor,o.headingColor),o.codeBackground&&i(r,a.codeBackground,o.codeBackground)}class n{constructor(o){if(typeof o=="string"){const l=document.querySelector(o);if(!l)throw new Error(`Element not found: ${o}`);this.target=l}else o?this.target=o:this.target=document}set(o){if(typeof o=="string"){const l=s[o];if(!l)throw new Error(`Unknown preset theme: ${o}. Available presets: ${Object.keys(s).join(", ")}`);e(this.target,l)}else e(this.target,o)}get(o){return this.target instanceof Document?getComputedStyle(this.target.documentElement).getPropertyValue(o).trim():getComputedStyle(this.target).getPropertyValue(o).trim()}remove(o){this.target instanceof Document?this.target.documentElement.style.removeProperty(o):this.target.style.removeProperty(o)}clear(){Object.values(a).forEach(o=>{this.remove(o)})}}const t=new n;function p(r){if(typeof r=="string"){const o=s[r];if(!o)throw new Error(`Unknown preset theme: ${r}. Available presets: ${Object.keys(s).join(", ")}`);t.set(o)}else t.set(r)}function u(r){return new n(r)}exports.Preset=b;exports.STANDARD_CSS_VARIABLES=a;exports.SlideThemeHook=n;exports.globalTheme=t;exports.presets=s;exports.setTheme=p;exports.solarizedDark=d;exports.solarizedLight=C;exports.useTheme=u;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/types.ts","../src/presets.ts","../src/hook.ts"],"sourcesContent":["/**\n * @slidejs/theme - 主题系统类型定义\n *\n * 定义标准化的主题配置接口，不针对特定 runner\n *\n * 注意：本包只提供高级 API（标准变量），不提供低级 API（runner 特定变量）。\n * 如果需要直接设置 runner 特定变量，请自行使用 DOM API，风险自负。\n */\n\n/**\n * 标准主题配置\n * 使用标准变量名，不包含 runner 名称\n *\n * 这些变量会被所有 runner 自动映射到自己的特定变量\n */\nexport interface StandardTheme {\n  /** 导航按钮颜色 */\n  navigationColor?: string;\n  /** 分页器颜色 */\n  paginationColor?: string;\n  /** 分页器激活颜色 */\n  paginationActiveColor?: string;\n  /** 滚动条背景色 */\n  scrollbarBg?: string;\n  /** 滚动条拖拽颜色 */\n  scrollbarDragBg?: string;\n  /** 箭头颜色（用于 Splide） */\n  arrowColor?: string;\n  /** 进度条颜色 */\n  progressBarColor?: string;\n  /** 背景色 */\n  backgroundColor?: string;\n  /** 文本颜色 */\n  textColor?: string;\n  /** 链接颜色 */\n  linkColor?: string;\n  /** 标题颜色 */\n  headingColor?: string;\n  /** 代码背景色 */\n  codeBackground?: string;\n}\n\n/**\n * 标准 CSS 变量名\n *\n * 这些是 SlideJS 官方支持的标准变量名\n * 所有 runner 会将这些变量映射到自己的特定变量\n */\nexport const STANDARD_CSS_VARIABLES = {\n  navigationColor: '--slidejs-navigation-color',\n  paginationColor: '--slidejs-pagination-color',\n  paginationActiveColor: '--slidejs-pagination-active-color',\n  scrollbarBg: '--slidejs-scrollbar-bg',\n  scrollbarDragBg: '--slidejs-scrollbar-drag-bg',\n  arrowColor: '--slidejs-arrow-color',\n  progressBarColor: '--slidejs-progress-bar-color',\n  backgroundColor: '--slidejs-background-color',\n  textColor: '--slidejs-text-color',\n  linkColor: '--slidejs-link-color',\n  headingColor: '--slidejs-heading-color',\n  codeBackground: '--slidejs-code-background',\n} as const;\n\n/**\n * Runner 特定 CSS 变量映射（仅供内部参考，不导出）\n *\n * 注意：\n * 1. 此接口不导出，仅供内部类型检查使用\n * 2. 实际的映射在 runner 的 CSS 文件中通过 CSS `var()` 函数完成\n * 3. 本包只提供高级 API（标准变量），不提供低级 API（runner 特定变量）\n * 4. 如果需要直接设置 runner 特定变量，请自行使用 DOM API，风险自负\n *\n * 映射关系（仅供参考）：\n * - Reveal.js: `--slidejs-background-color` → `--slidejs-revealjs-background-color`\n * - Swiper: `--slidejs-navigation-color` → `--slidejs-swiper-navigation-color`\n * - Splide: `--slidejs-arrow-color` → `--slidejs-splide-arrow-color`\n *\n * 查看 runner 的 `style.css` 文件了解完整的映射关系。\n */\ninterface RunnerCSSVariableMap {\n  revealjs: {\n    '--slidejs-background-color': string;\n    '--slidejs-text-color': string;\n    '--slidejs-link-color': string;\n    '--slidejs-heading-color': string;\n    '--slidejs-code-background': string;\n  };\n  swiper: {\n    '--slidejs-navigation-color': string;\n    '--slidejs-pagination-color': string;\n    '--slidejs-pagination-active-color': string;\n    '--slidejs-scrollbar-bg': string;\n    '--slidejs-scrollbar-drag-bg': string;\n  };\n  splide: {\n    '--slidejs-arrow-color': string;\n    '--slidejs-pagination-color': string;\n    '--slidejs-pagination-active-color': string;\n    '--slidejs-progress-bar-color': string;\n  };\n}\n","/**\n * @slidejs/theme - 预设主题\n *\n * 提供内置的主题预设\n */\n\nimport type { StandardTheme } from './types';\n\n/**\n * 预设主题名称常量\n */\nconst PRESET_THEME_SOLARIZED_DARK = 'solarized-dark' as const;\nconst PRESET_THEME_SOLARIZED_LIGHT = 'solarized-light' as const;\n\n/**\n * Solarized Dark 主题\n *\n * 基于 Solarized 配色方案的深色主题\n * 参考：https://ethanschoonover.com/solarized/\n */\nexport const solarizedDark: StandardTheme = {\n  // 基础颜色\n  backgroundColor: '#002b36', // base03 - 最暗的背景\n  textColor: '#839496', // base0 - 主要文本\n  headingColor: '#93a1a1', // base1 - 标题文本\n  linkColor: '#268bd2', // blue - 链接颜色\n\n  // 导航和分页\n  navigationColor: '#268bd2', // blue - 导航按钮\n  paginationColor: '#268bd2', // blue - 分页器\n  paginationActiveColor: '#2aa198', // cyan - 激活状态\n  arrowColor: '#268bd2', // blue - 箭头（Splide）\n  progressBarColor: '#2aa198', // cyan - 进度条\n\n  // 滚动条\n  scrollbarBg: 'rgba(131, 148, 150, 0.2)', // base0 with opacity\n  scrollbarDragBg: 'rgba(131, 148, 150, 0.5)', // base0 with opacity\n\n  // 代码\n  codeBackground: '#073642', // base02 - 代码背景\n};\n\n/**\n * Solarized Light 主题\n *\n * 基于 Solarized 配色方案的浅色主题\n * 参考：https://ethanschoonover.com/solarized/\n */\nexport const solarizedLight: StandardTheme = {\n  // 基础颜色\n  backgroundColor: '#fdf6e3', // base3 - 最亮的背景\n  textColor: '#657b83', // base00 - 主要文本\n  headingColor: '#586e75', // base01 - 标题文本\n  linkColor: '#268bd2', // blue - 链接颜色\n\n  // 导航和分页\n  navigationColor: '#268bd2', // blue - 导航按钮\n  paginationColor: '#268bd2', // blue - 分页器\n  paginationActiveColor: '#2aa198', // cyan - 激活状态\n  arrowColor: '#268bd2', // blue - 箭头（Splide）\n  progressBarColor: '#2aa198', // cyan - 进度条\n\n  // 滚动条\n  scrollbarBg: 'rgba(101, 123, 131, 0.2)', // base00 with opacity\n  scrollbarDragBg: 'rgba(101, 123, 131, 0.5)', // base00 with opacity\n\n  // 代码\n  codeBackground: '#eee8d5', // base2 - 代码背景\n};\n\n/**\n * 预设主题映射\n * 使用常量作为键，确保类型安全\n */\nexport const presets = {\n  [PRESET_THEME_SOLARIZED_DARK]: solarizedDark,\n  [PRESET_THEME_SOLARIZED_LIGHT]: solarizedLight,\n} as const;\n\n/**\n * 预设主题名称类型\n */\nexport type PresetThemeName = keyof typeof presets;\n\n/**\n * 预设主题名称常量对象\n * 提供类型安全的命名空间访问\n */\nexport const Preset = {\n  SolarizedDark: PRESET_THEME_SOLARIZED_DARK,\n  SolarizedLight: PRESET_THEME_SOLARIZED_LIGHT,\n} as const;\n","/**\n * @slidejs/theme - CSS Hook API\n *\n * 提供运行时动态设置标准 CSS 变量的 API\n *\n * 注意：本包只提供高级 API（标准变量），不提供低级 API（runner 特定变量）。\n * 如果需要直接设置 runner 特定变量，请自行使用 DOM API，风险自负。\n */\n\nimport type { StandardTheme } from './types';\nimport { STANDARD_CSS_VARIABLES } from './types';\nimport { presets, type PresetThemeName } from './presets';\n\n/**\n * 设置 CSS 变量的辅助函数\n */\nfunction setCSSVariable(\n  element: HTMLElement | Document,\n  variableName: string,\n  value: string\n): void {\n  if (element instanceof Document) {\n    element.documentElement.style.setProperty(variableName, value);\n  } else {\n    element.style.setProperty(variableName, value);\n  }\n}\n\n/**\n * 应用标准主题（高级 API）\n * 设置标准 CSS 变量，runner 会将这些变量映射到自己的变量\n */\nfunction applyStandardTheme(element: HTMLElement | Document, theme: StandardTheme): void {\n  if (theme.navigationColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.navigationColor, theme.navigationColor);\n  }\n  if (theme.paginationColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.paginationColor, theme.paginationColor);\n  }\n  if (theme.paginationActiveColor) {\n    setCSSVariable(\n      element,\n      STANDARD_CSS_VARIABLES.paginationActiveColor,\n      theme.paginationActiveColor\n    );\n  }\n  if (theme.scrollbarBg) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.scrollbarBg, theme.scrollbarBg);\n  }\n  if (theme.scrollbarDragBg) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.scrollbarDragBg, theme.scrollbarDragBg);\n  }\n  if (theme.arrowColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.arrowColor, theme.arrowColor);\n  }\n  if (theme.progressBarColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.progressBarColor, theme.progressBarColor);\n  }\n  if (theme.backgroundColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.backgroundColor, theme.backgroundColor);\n  }\n  if (theme.textColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.textColor, theme.textColor);\n  }\n  if (theme.linkColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.linkColor, theme.linkColor);\n  }\n  if (theme.headingColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.headingColor, theme.headingColor);\n  }\n  if (theme.codeBackground) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.codeBackground, theme.codeBackground);\n  }\n}\n\n/**\n * CSS Hook API 类\n *\n * 只提供高级 API（标准变量），不提供低级 API（runner 特定变量）\n */\nexport class SlideThemeHook {\n  private target: HTMLElement | Document;\n\n  /**\n   * 创建主题 Hook 实例\n   *\n   * @param target - 目标元素或文档（默认为 document）\n   */\n  constructor(target?: HTMLElement | Document | string) {\n    if (typeof target === 'string') {\n      const element = document.querySelector(target);\n      if (!element) {\n        throw new Error(`Element not found: ${target}`);\n      }\n      this.target = element as HTMLElement;\n    } else if (target) {\n      this.target = target;\n    } else {\n      this.target = document;\n    }\n  }\n\n  /**\n   * 设置标准主题（高级 API）\n   * 使用标准变量名，不针对特定 runner\n   *\n   * 这是 SlideJS 官方支持的 API\n   *\n   * @param theme - 标准主题配置或预设主题名称\n   */\n  set(theme: StandardTheme | PresetThemeName): void {\n    if (typeof theme === 'string') {\n      const preset = presets[theme];\n      if (!preset) {\n        throw new Error(\n          `Unknown preset theme: ${theme}. Available presets: ${Object.keys(presets).join(', ')}`\n        );\n      }\n      applyStandardTheme(this.target, preset);\n    } else {\n      applyStandardTheme(this.target, theme);\n    }\n  }\n\n  /**\n   * 获取 CSS 变量值\n   *\n   * @param variableName - CSS 变量名（标准变量或 runner 特定变量）\n   * @returns CSS 变量值\n   */\n  get(variableName: string): string | null {\n    if (this.target instanceof Document) {\n      return getComputedStyle(this.target.documentElement).getPropertyValue(variableName).trim();\n    }\n    return getComputedStyle(this.target).getPropertyValue(variableName).trim();\n  }\n\n  /**\n   * 移除 CSS 变量\n   *\n   * @param variableName - CSS 变量名（标准变量或 runner 特定变量）\n   */\n  remove(variableName: string): void {\n    if (this.target instanceof Document) {\n      this.target.documentElement.style.removeProperty(variableName);\n    } else {\n      this.target.style.removeProperty(variableName);\n    }\n  }\n\n  /**\n   * 清除所有标准主题变量\n   */\n  clear(): void {\n    Object.values(STANDARD_CSS_VARIABLES).forEach(variableName => {\n      this.remove(variableName);\n    });\n  }\n}\n\n/**\n * 全局主题 Hook 实例（作用于 document）\n */\nexport const globalTheme = new SlideThemeHook();\n\n/**\n * 设置全局标准主题（高级 API）\n *\n * 这是 SlideJS 官方支持的 API\n * 使用标准变量名，所有 runner 会自动映射这些变量\n *\n * @param theme - 标准主题配置或预设主题名称\n *\n * @example\n * ```typescript\n * import { setTheme } from '@slidejs/theme';\n *\n * // 使用自定义主题\n * setTheme({\n *   navigationColor: '#ff0000',\n *   paginationColor: '#00ff00',\n * });\n *\n * // 使用预设主题\n * setTheme('solarized-dark');\n * setTheme('solarized-light');\n * ```\n */\nexport function setTheme(theme: StandardTheme | PresetThemeName): void {\n  if (typeof theme === 'string') {\n    const preset = presets[theme];\n    if (!preset) {\n      throw new Error(\n        `Unknown preset theme: ${theme}. Available presets: ${Object.keys(presets).join(', ')}`\n      );\n    }\n    globalTheme.set(preset);\n  } else {\n    globalTheme.set(theme);\n  }\n}\n\n/**\n * 创建作用域主题 Hook\n *\n * @param selector - CSS 选择器或 HTMLElement\n * @returns 主题 Hook 实例\n *\n * @example\n * ```typescript\n * import { useTheme } from '@slidejs/theme';\n *\n * const theme = useTheme('#my-slides');\n * theme.set({\n *   navigationColor: '#ff0000',\n * });\n * ```\n */\nexport function useTheme(selector?: HTMLElement | string): SlideThemeHook {\n  return new SlideThemeHook(selector);\n}\n"],"names":["STANDARD_CSS_VARIABLES","PRESET_THEME_SOLARIZED_DARK","PRESET_THEME_SOLARIZED_LIGHT","solarizedDark","solarizedLight","presets","Preset","setCSSVariable","element","variableName","value","applyStandardTheme","theme","SlideThemeHook","target","preset","globalTheme","setTheme","useTheme","selector"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,191 @@
+/**
+ * 全局主题 Hook 实例（作用于 document）
+ */
+export declare const globalTheme: SlideThemeHook;
+
+/**
+ * 预设主题名称常量对象
+ * 提供类型安全的命名空间访问
+ */
+export declare const Preset: {
+    readonly SolarizedDark: "solarized-dark";
+    readonly SolarizedLight: "solarized-light";
+};
+
+/**
+ * 预设主题映射
+ * 使用常量作为键，确保类型安全
+ */
+export declare const presets: {
+    readonly "solarized-dark": StandardTheme;
+    readonly "solarized-light": StandardTheme;
+};
+
+/**
+ * 预设主题名称类型
+ */
+export declare type PresetThemeName = keyof typeof presets;
+
+/**
+ * 设置全局标准主题（高级 API）
+ *
+ * 这是 SlideJS 官方支持的 API
+ * 使用标准变量名，所有 runner 会自动映射这些变量
+ *
+ * @param theme - 标准主题配置或预设主题名称
+ *
+ * @example
+ * ```typescript
+ * import { setTheme } from '@slidejs/theme';
+ *
+ * // 使用自定义主题
+ * setTheme({
+ *   navigationColor: '#ff0000',
+ *   paginationColor: '#00ff00',
+ * });
+ *
+ * // 使用预设主题
+ * setTheme('solarized-dark');
+ * setTheme('solarized-light');
+ * ```
+ */
+export declare function setTheme(theme: StandardTheme | PresetThemeName): void;
+
+/**
+ * CSS Hook API 类
+ *
+ * 只提供高级 API（标准变量），不提供低级 API（runner 特定变量）
+ */
+export declare class SlideThemeHook {
+    private target;
+    /**
+     * 创建主题 Hook 实例
+     *
+     * @param target - 目标元素或文档（默认为 document）
+     */
+    constructor(target?: HTMLElement | Document | string);
+    /**
+     * 设置标准主题（高级 API）
+     * 使用标准变量名，不针对特定 runner
+     *
+     * 这是 SlideJS 官方支持的 API
+     *
+     * @param theme - 标准主题配置或预设主题名称
+     */
+    set(theme: StandardTheme | PresetThemeName): void;
+    /**
+     * 获取 CSS 变量值
+     *
+     * @param variableName - CSS 变量名（标准变量或 runner 特定变量）
+     * @returns CSS 变量值
+     */
+    get(variableName: string): string | null;
+    /**
+     * 移除 CSS 变量
+     *
+     * @param variableName - CSS 变量名（标准变量或 runner 特定变量）
+     */
+    remove(variableName: string): void;
+    /**
+     * 清除所有标准主题变量
+     */
+    clear(): void;
+}
+
+/**
+ * Solarized Dark 主题
+ *
+ * 基于 Solarized 配色方案的深色主题
+ * 参考：https://ethanschoonover.com/solarized/
+ */
+export declare const solarizedDark: StandardTheme;
+
+/**
+ * Solarized Light 主题
+ *
+ * 基于 Solarized 配色方案的浅色主题
+ * 参考：https://ethanschoonover.com/solarized/
+ */
+export declare const solarizedLight: StandardTheme;
+
+/**
+ * 标准 CSS 变量名
+ *
+ * 这些是 SlideJS 官方支持的标准变量名
+ * 所有 runner 会将这些变量映射到自己的特定变量
+ */
+export declare const STANDARD_CSS_VARIABLES: {
+    readonly navigationColor: "--slidejs-navigation-color";
+    readonly paginationColor: "--slidejs-pagination-color";
+    readonly paginationActiveColor: "--slidejs-pagination-active-color";
+    readonly scrollbarBg: "--slidejs-scrollbar-bg";
+    readonly scrollbarDragBg: "--slidejs-scrollbar-drag-bg";
+    readonly arrowColor: "--slidejs-arrow-color";
+    readonly progressBarColor: "--slidejs-progress-bar-color";
+    readonly backgroundColor: "--slidejs-background-color";
+    readonly textColor: "--slidejs-text-color";
+    readonly linkColor: "--slidejs-link-color";
+    readonly headingColor: "--slidejs-heading-color";
+    readonly codeBackground: "--slidejs-code-background";
+};
+
+/**
+ * @slidejs/theme - 主题系统类型定义
+ *
+ * 定义标准化的主题配置接口，不针对特定 runner
+ *
+ * 注意：本包只提供高级 API（标准变量），不提供低级 API（runner 特定变量）。
+ * 如果需要直接设置 runner 特定变量，请自行使用 DOM API，风险自负。
+ */
+/**
+ * 标准主题配置
+ * 使用标准变量名，不包含 runner 名称
+ *
+ * 这些变量会被所有 runner 自动映射到自己的特定变量
+ */
+export declare interface StandardTheme {
+    /** 导航按钮颜色 */
+    navigationColor?: string;
+    /** 分页器颜色 */
+    paginationColor?: string;
+    /** 分页器激活颜色 */
+    paginationActiveColor?: string;
+    /** 滚动条背景色 */
+    scrollbarBg?: string;
+    /** 滚动条拖拽颜色 */
+    scrollbarDragBg?: string;
+    /** 箭头颜色（用于 Splide） */
+    arrowColor?: string;
+    /** 进度条颜色 */
+    progressBarColor?: string;
+    /** 背景色 */
+    backgroundColor?: string;
+    /** 文本颜色 */
+    textColor?: string;
+    /** 链接颜色 */
+    linkColor?: string;
+    /** 标题颜色 */
+    headingColor?: string;
+    /** 代码背景色 */
+    codeBackground?: string;
+}
+
+/**
+ * 创建作用域主题 Hook
+ *
+ * @param selector - CSS 选择器或 HTMLElement
+ * @returns 主题 Hook 实例
+ *
+ * @example
+ * ```typescript
+ * import { useTheme } from '@slidejs/theme';
+ *
+ * const theme = useTheme('#my-slides');
+ * theme.set({
+ *   navigationColor: '#ff0000',
+ * });
+ * ```
+ */
+export declare function useTheme(selector?: HTMLElement | string): SlideThemeHook;
+
+export { }

package/dist/index.mjs

@@ -0,0 +1,174 @@
+const a = {
+  navigationColor: "--slidejs-navigation-color",
+  paginationColor: "--slidejs-pagination-color",
+  paginationActiveColor: "--slidejs-pagination-active-color",
+  scrollbarBg: "--slidejs-scrollbar-bg",
+  scrollbarDragBg: "--slidejs-scrollbar-drag-bg",
+  arrowColor: "--slidejs-arrow-color",
+  progressBarColor: "--slidejs-progress-bar-color",
+  backgroundColor: "--slidejs-background-color",
+  textColor: "--slidejs-text-color",
+  linkColor: "--slidejs-link-color",
+  headingColor: "--slidejs-heading-color",
+  codeBackground: "--slidejs-code-background"
+}, g = "solarized-dark", e = "solarized-light", d = {
+  // 基础颜色
+  backgroundColor: "#002b36",
+  // base03 - 最暗的背景
+  textColor: "#839496",
+  // base0 - 主要文本
+  headingColor: "#93a1a1",
+  // base1 - 标题文本
+  linkColor: "#268bd2",
+  // blue - 链接颜色
+  // 导航和分页
+  navigationColor: "#268bd2",
+  // blue - 导航按钮
+  paginationColor: "#268bd2",
+  // blue - 分页器
+  paginationActiveColor: "#2aa198",
+  // cyan - 激活状态
+  arrowColor: "#268bd2",
+  // blue - 箭头（Splide）
+  progressBarColor: "#2aa198",
+  // cyan - 进度条
+  // 滚动条
+  scrollbarBg: "rgba(131, 148, 150, 0.2)",
+  // base0 with opacity
+  scrollbarDragBg: "rgba(131, 148, 150, 0.5)",
+  // base0 with opacity
+  // 代码
+  codeBackground: "#073642"
+  // base02 - 代码背景
+}, C = {
+  // 基础颜色
+  backgroundColor: "#fdf6e3",
+  // base3 - 最亮的背景
+  textColor: "#657b83",
+  // base00 - 主要文本
+  headingColor: "#586e75",
+  // base01 - 标题文本
+  linkColor: "#268bd2",
+  // blue - 链接颜色
+  // 导航和分页
+  navigationColor: "#268bd2",
+  // blue - 导航按钮
+  paginationColor: "#268bd2",
+  // blue - 分页器
+  paginationActiveColor: "#2aa198",
+  // cyan - 激活状态
+  arrowColor: "#268bd2",
+  // blue - 箭头（Splide）
+  progressBarColor: "#2aa198",
+  // cyan - 进度条
+  // 滚动条
+  scrollbarBg: "rgba(101, 123, 131, 0.2)",
+  // base00 with opacity
+  scrollbarDragBg: "rgba(101, 123, 131, 0.5)",
+  // base00 with opacity
+  // 代码
+  codeBackground: "#eee8d5"
+  // base2 - 代码背景
+}, s = {
+  [g]: d,
+  [e]: C
+}, b = {
+  SolarizedDark: g,
+  SolarizedLight: e
+};
+function i(r, o, l) {
+  r instanceof Document ? r.documentElement.style.setProperty(o, l) : r.style.setProperty(o, l);
+}
+function t(r, o) {
+  o.navigationColor && i(r, a.navigationColor, o.navigationColor), o.paginationColor && i(r, a.paginationColor, o.paginationColor), o.paginationActiveColor && i(
+    r,
+    a.paginationActiveColor,
+    o.paginationActiveColor
+  ), o.scrollbarBg && i(r, a.scrollbarBg, o.scrollbarBg), o.scrollbarDragBg && i(r, a.scrollbarDragBg, o.scrollbarDragBg), o.arrowColor && i(r, a.arrowColor, o.arrowColor), o.progressBarColor && i(r, a.progressBarColor, o.progressBarColor), o.backgroundColor && i(r, a.backgroundColor, o.backgroundColor), o.textColor && i(r, a.textColor, o.textColor), o.linkColor && i(r, a.linkColor, o.linkColor), o.headingColor && i(r, a.headingColor, o.headingColor), o.codeBackground && i(r, a.codeBackground, o.codeBackground);
+}
+class c {
+  /**
+   * 创建主题 Hook 实例
+   *
+   * @param target - 目标元素或文档（默认为 document）
+   */
+  constructor(o) {
+    if (typeof o == "string") {
+      const l = document.querySelector(o);
+      if (!l)
+        throw new Error(`Element not found: ${o}`);
+      this.target = l;
+    } else o ? this.target = o : this.target = document;
+  }
+  /**
+   * 设置标准主题（高级 API）
+   * 使用标准变量名，不针对特定 runner
+   *
+   * 这是 SlideJS 官方支持的 API
+   *
+   * @param theme - 标准主题配置或预设主题名称
+   */
+  set(o) {
+    if (typeof o == "string") {
+      const l = s[o];
+      if (!l)
+        throw new Error(
+          `Unknown preset theme: ${o}. Available presets: ${Object.keys(s).join(", ")}`
+        );
+      t(this.target, l);
+    } else
+      t(this.target, o);
+  }
+  /**
+   * 获取 CSS 变量值
+   *
+   * @param variableName - CSS 变量名（标准变量或 runner 特定变量）
+   * @returns CSS 变量值
+   */
+  get(o) {
+    return this.target instanceof Document ? getComputedStyle(this.target.documentElement).getPropertyValue(o).trim() : getComputedStyle(this.target).getPropertyValue(o).trim();
+  }
+  /**
+   * 移除 CSS 变量
+   *
+   * @param variableName - CSS 变量名（标准变量或 runner 特定变量）
+   */
+  remove(o) {
+    this.target instanceof Document ? this.target.documentElement.style.removeProperty(o) : this.target.style.removeProperty(o);
+  }
+  /**
+   * 清除所有标准主题变量
+   */
+  clear() {
+    Object.values(a).forEach((o) => {
+      this.remove(o);
+    });
+  }
+}
+const n = new c();
+function p(r) {
+  if (typeof r == "string") {
+    const o = s[r];
+    if (!o)
+      throw new Error(
+        `Unknown preset theme: ${r}. Available presets: ${Object.keys(s).join(", ")}`
+      );
+    n.set(o);
+  } else
+    n.set(r);
+}
+function u(r) {
+  return new c(r);
+}
+export {
+  b as Preset,
+  a as STANDARD_CSS_VARIABLES,
+  c as SlideThemeHook,
+  n as globalTheme,
+  s as presets,
+  p as setTheme,
+  d as solarizedDark,
+  C as solarizedLight,
+  u as useTheme
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/types.ts","../src/presets.ts","../src/hook.ts"],"sourcesContent":["/**\n * @slidejs/theme - 主题系统类型定义\n *\n * 定义标准化的主题配置接口，不针对特定 runner\n *\n * 注意：本包只提供高级 API（标准变量），不提供低级 API（runner 特定变量）。\n * 如果需要直接设置 runner 特定变量，请自行使用 DOM API，风险自负。\n */\n\n/**\n * 标准主题配置\n * 使用标准变量名，不包含 runner 名称\n *\n * 这些变量会被所有 runner 自动映射到自己的特定变量\n */\nexport interface StandardTheme {\n  /** 导航按钮颜色 */\n  navigationColor?: string;\n  /** 分页器颜色 */\n  paginationColor?: string;\n  /** 分页器激活颜色 */\n  paginationActiveColor?: string;\n  /** 滚动条背景色 */\n  scrollbarBg?: string;\n  /** 滚动条拖拽颜色 */\n  scrollbarDragBg?: string;\n  /** 箭头颜色（用于 Splide） */\n  arrowColor?: string;\n  /** 进度条颜色 */\n  progressBarColor?: string;\n  /** 背景色 */\n  backgroundColor?: string;\n  /** 文本颜色 */\n  textColor?: string;\n  /** 链接颜色 */\n  linkColor?: string;\n  /** 标题颜色 */\n  headingColor?: string;\n  /** 代码背景色 */\n  codeBackground?: string;\n}\n\n/**\n * 标准 CSS 变量名\n *\n * 这些是 SlideJS 官方支持的标准变量名\n * 所有 runner 会将这些变量映射到自己的特定变量\n */\nexport const STANDARD_CSS_VARIABLES = {\n  navigationColor: '--slidejs-navigation-color',\n  paginationColor: '--slidejs-pagination-color',\n  paginationActiveColor: '--slidejs-pagination-active-color',\n  scrollbarBg: '--slidejs-scrollbar-bg',\n  scrollbarDragBg: '--slidejs-scrollbar-drag-bg',\n  arrowColor: '--slidejs-arrow-color',\n  progressBarColor: '--slidejs-progress-bar-color',\n  backgroundColor: '--slidejs-background-color',\n  textColor: '--slidejs-text-color',\n  linkColor: '--slidejs-link-color',\n  headingColor: '--slidejs-heading-color',\n  codeBackground: '--slidejs-code-background',\n} as const;\n\n/**\n * Runner 特定 CSS 变量映射（仅供内部参考，不导出）\n *\n * 注意：\n * 1. 此接口不导出，仅供内部类型检查使用\n * 2. 实际的映射在 runner 的 CSS 文件中通过 CSS `var()` 函数完成\n * 3. 本包只提供高级 API（标准变量），不提供低级 API（runner 特定变量）\n * 4. 如果需要直接设置 runner 特定变量，请自行使用 DOM API，风险自负\n *\n * 映射关系（仅供参考）：\n * - Reveal.js: `--slidejs-background-color` → `--slidejs-revealjs-background-color`\n * - Swiper: `--slidejs-navigation-color` → `--slidejs-swiper-navigation-color`\n * - Splide: `--slidejs-arrow-color` → `--slidejs-splide-arrow-color`\n *\n * 查看 runner 的 `style.css` 文件了解完整的映射关系。\n */\ninterface RunnerCSSVariableMap {\n  revealjs: {\n    '--slidejs-background-color': string;\n    '--slidejs-text-color': string;\n    '--slidejs-link-color': string;\n    '--slidejs-heading-color': string;\n    '--slidejs-code-background': string;\n  };\n  swiper: {\n    '--slidejs-navigation-color': string;\n    '--slidejs-pagination-color': string;\n    '--slidejs-pagination-active-color': string;\n    '--slidejs-scrollbar-bg': string;\n    '--slidejs-scrollbar-drag-bg': string;\n  };\n  splide: {\n    '--slidejs-arrow-color': string;\n    '--slidejs-pagination-color': string;\n    '--slidejs-pagination-active-color': string;\n    '--slidejs-progress-bar-color': string;\n  };\n}\n","/**\n * @slidejs/theme - 预设主题\n *\n * 提供内置的主题预设\n */\n\nimport type { StandardTheme } from './types';\n\n/**\n * 预设主题名称常量\n */\nconst PRESET_THEME_SOLARIZED_DARK = 'solarized-dark' as const;\nconst PRESET_THEME_SOLARIZED_LIGHT = 'solarized-light' as const;\n\n/**\n * Solarized Dark 主题\n *\n * 基于 Solarized 配色方案的深色主题\n * 参考：https://ethanschoonover.com/solarized/\n */\nexport const solarizedDark: StandardTheme = {\n  // 基础颜色\n  backgroundColor: '#002b36', // base03 - 最暗的背景\n  textColor: '#839496', // base0 - 主要文本\n  headingColor: '#93a1a1', // base1 - 标题文本\n  linkColor: '#268bd2', // blue - 链接颜色\n\n  // 导航和分页\n  navigationColor: '#268bd2', // blue - 导航按钮\n  paginationColor: '#268bd2', // blue - 分页器\n  paginationActiveColor: '#2aa198', // cyan - 激活状态\n  arrowColor: '#268bd2', // blue - 箭头（Splide）\n  progressBarColor: '#2aa198', // cyan - 进度条\n\n  // 滚动条\n  scrollbarBg: 'rgba(131, 148, 150, 0.2)', // base0 with opacity\n  scrollbarDragBg: 'rgba(131, 148, 150, 0.5)', // base0 with opacity\n\n  // 代码\n  codeBackground: '#073642', // base02 - 代码背景\n};\n\n/**\n * Solarized Light 主题\n *\n * 基于 Solarized 配色方案的浅色主题\n * 参考：https://ethanschoonover.com/solarized/\n */\nexport const solarizedLight: StandardTheme = {\n  // 基础颜色\n  backgroundColor: '#fdf6e3', // base3 - 最亮的背景\n  textColor: '#657b83', // base00 - 主要文本\n  headingColor: '#586e75', // base01 - 标题文本\n  linkColor: '#268bd2', // blue - 链接颜色\n\n  // 导航和分页\n  navigationColor: '#268bd2', // blue - 导航按钮\n  paginationColor: '#268bd2', // blue - 分页器\n  paginationActiveColor: '#2aa198', // cyan - 激活状态\n  arrowColor: '#268bd2', // blue - 箭头（Splide）\n  progressBarColor: '#2aa198', // cyan - 进度条\n\n  // 滚动条\n  scrollbarBg: 'rgba(101, 123, 131, 0.2)', // base00 with opacity\n  scrollbarDragBg: 'rgba(101, 123, 131, 0.5)', // base00 with opacity\n\n  // 代码\n  codeBackground: '#eee8d5', // base2 - 代码背景\n};\n\n/**\n * 预设主题映射\n * 使用常量作为键，确保类型安全\n */\nexport const presets = {\n  [PRESET_THEME_SOLARIZED_DARK]: solarizedDark,\n  [PRESET_THEME_SOLARIZED_LIGHT]: solarizedLight,\n} as const;\n\n/**\n * 预设主题名称类型\n */\nexport type PresetThemeName = keyof typeof presets;\n\n/**\n * 预设主题名称常量对象\n * 提供类型安全的命名空间访问\n */\nexport const Preset = {\n  SolarizedDark: PRESET_THEME_SOLARIZED_DARK,\n  SolarizedLight: PRESET_THEME_SOLARIZED_LIGHT,\n} as const;\n","/**\n * @slidejs/theme - CSS Hook API\n *\n * 提供运行时动态设置标准 CSS 变量的 API\n *\n * 注意：本包只提供高级 API（标准变量），不提供低级 API（runner 特定变量）。\n * 如果需要直接设置 runner 特定变量，请自行使用 DOM API，风险自负。\n */\n\nimport type { StandardTheme } from './types';\nimport { STANDARD_CSS_VARIABLES } from './types';\nimport { presets, type PresetThemeName } from './presets';\n\n/**\n * 设置 CSS 变量的辅助函数\n */\nfunction setCSSVariable(\n  element: HTMLElement | Document,\n  variableName: string,\n  value: string\n): void {\n  if (element instanceof Document) {\n    element.documentElement.style.setProperty(variableName, value);\n  } else {\n    element.style.setProperty(variableName, value);\n  }\n}\n\n/**\n * 应用标准主题（高级 API）\n * 设置标准 CSS 变量，runner 会将这些变量映射到自己的变量\n */\nfunction applyStandardTheme(element: HTMLElement | Document, theme: StandardTheme): void {\n  if (theme.navigationColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.navigationColor, theme.navigationColor);\n  }\n  if (theme.paginationColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.paginationColor, theme.paginationColor);\n  }\n  if (theme.paginationActiveColor) {\n    setCSSVariable(\n      element,\n      STANDARD_CSS_VARIABLES.paginationActiveColor,\n      theme.paginationActiveColor\n    );\n  }\n  if (theme.scrollbarBg) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.scrollbarBg, theme.scrollbarBg);\n  }\n  if (theme.scrollbarDragBg) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.scrollbarDragBg, theme.scrollbarDragBg);\n  }\n  if (theme.arrowColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.arrowColor, theme.arrowColor);\n  }\n  if (theme.progressBarColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.progressBarColor, theme.progressBarColor);\n  }\n  if (theme.backgroundColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.backgroundColor, theme.backgroundColor);\n  }\n  if (theme.textColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.textColor, theme.textColor);\n  }\n  if (theme.linkColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.linkColor, theme.linkColor);\n  }\n  if (theme.headingColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.headingColor, theme.headingColor);\n  }\n  if (theme.codeBackground) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.codeBackground, theme.codeBackground);\n  }\n}\n\n/**\n * CSS Hook API 类\n *\n * 只提供高级 API（标准变量），不提供低级 API（runner 特定变量）\n */\nexport class SlideThemeHook {\n  private target: HTMLElement | Document;\n\n  /**\n   * 创建主题 Hook 实例\n   *\n   * @param target - 目标元素或文档（默认为 document）\n   */\n  constructor(target?: HTMLElement | Document | string) {\n    if (typeof target === 'string') {\n      const element = document.querySelector(target);\n      if (!element) {\n        throw new Error(`Element not found: ${target}`);\n      }\n      this.target = element as HTMLElement;\n    } else if (target) {\n      this.target = target;\n    } else {\n      this.target = document;\n    }\n  }\n\n  /**\n   * 设置标准主题（高级 API）\n   * 使用标准变量名，不针对特定 runner\n   *\n   * 这是 SlideJS 官方支持的 API\n   *\n   * @param theme - 标准主题配置或预设主题名称\n   */\n  set(theme: StandardTheme | PresetThemeName): void {\n    if (typeof theme === 'string') {\n      const preset = presets[theme];\n      if (!preset) {\n        throw new Error(\n          `Unknown preset theme: ${theme}. Available presets: ${Object.keys(presets).join(', ')}`\n        );\n      }\n      applyStandardTheme(this.target, preset);\n    } else {\n      applyStandardTheme(this.target, theme);\n    }\n  }\n\n  /**\n   * 获取 CSS 变量值\n   *\n   * @param variableName - CSS 变量名（标准变量或 runner 特定变量）\n   * @returns CSS 变量值\n   */\n  get(variableName: string): string | null {\n    if (this.target instanceof Document) {\n      return getComputedStyle(this.target.documentElement).getPropertyValue(variableName).trim();\n    }\n    return getComputedStyle(this.target).getPropertyValue(variableName).trim();\n  }\n\n  /**\n   * 移除 CSS 变量\n   *\n   * @param variableName - CSS 变量名（标准变量或 runner 特定变量）\n   */\n  remove(variableName: string): void {\n    if (this.target instanceof Document) {\n      this.target.documentElement.style.removeProperty(variableName);\n    } else {\n      this.target.style.removeProperty(variableName);\n    }\n  }\n\n  /**\n   * 清除所有标准主题变量\n   */\n  clear(): void {\n    Object.values(STANDARD_CSS_VARIABLES).forEach(variableName => {\n      this.remove(variableName);\n    });\n  }\n}\n\n/**\n * 全局主题 Hook 实例（作用于 document）\n */\nexport const globalTheme = new SlideThemeHook();\n\n/**\n * 设置全局标准主题（高级 API）\n *\n * 这是 SlideJS 官方支持的 API\n * 使用标准变量名，所有 runner 会自动映射这些变量\n *\n * @param theme - 标准主题配置或预设主题名称\n *\n * @example\n * ```typescript\n * import { setTheme } from '@slidejs/theme';\n *\n * // 使用自定义主题\n * setTheme({\n *   navigationColor: '#ff0000',\n *   paginationColor: '#00ff00',\n * });\n *\n * // 使用预设主题\n * setTheme('solarized-dark');\n * setTheme('solarized-light');\n * ```\n */\nexport function setTheme(theme: StandardTheme | PresetThemeName): void {\n  if (typeof theme === 'string') {\n    const preset = presets[theme];\n    if (!preset) {\n      throw new Error(\n        `Unknown preset theme: ${theme}. Available presets: ${Object.keys(presets).join(', ')}`\n      );\n    }\n    globalTheme.set(preset);\n  } else {\n    globalTheme.set(theme);\n  }\n}\n\n/**\n * 创建作用域主题 Hook\n *\n * @param selector - CSS 选择器或 HTMLElement\n * @returns 主题 Hook 实例\n *\n * @example\n * ```typescript\n * import { useTheme } from '@slidejs/theme';\n *\n * const theme = useTheme('#my-slides');\n * theme.set({\n *   navigationColor: '#ff0000',\n * });\n * ```\n */\nexport function useTheme(selector?: HTMLElement | string): SlideThemeHook {\n  return new SlideThemeHook(selector);\n}\n"],"names":["STANDARD_CSS_VARIABLES","PRESET_THEME_SOLARIZED_DARK","PRESET_THEME_SOLARIZED_LIGHT","solarizedDark","solarizedLight","presets","Preset","setCSSVariable","element","variableName","value","applyStandardTheme","theme","SlideThemeHook","target","preset","globalTheme","setTheme","useTheme","selector"],"mappings":"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"}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@slidejs/theme",
+  "version": "0.1.3",
+  "description": "SlideJS Theme System - Runtime CSS Variable Hook API",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {},
+  "devDependencies": {
+    "typescript": "^5.3.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^1.0.0"
+  },
+  "keywords": [
+    "slide",
+    "theme",
+    "css",
+    "variables",
+    "customization"
+  ],
+  "author": "",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest --passWithNoTests",
+    "clean": "rm -rf dist"
+  }
+}