dotsharp

主题 ​

@sharpdotnut/dotsharp 通过 useTheme() 管理主题：模式可以是 system（默认，跟随系统）、light 或 dark。 组合式函数会把解析后的结果写到 <html data-theme="light|dark"> 上，组件样式据此切换设计变量。

样式与变量 ​

安装与样式引入见快速开始。与主题相关的是：style.css 里定义 --ds-* 变量， 再由 Tailwind 的 @theme inline 映射成 bg-ds-primary、text-ds-fg 这类工具类——工具类引用的是变量本身， 所以切换 data-theme 只改变量值，组件类名保持不变。

  • 使用方无需安装 Tailwind，也无需配置 @source 扫描 node_modules。
  • 样式表不含 Tailwind preflight，不会重置应用自身的页面样式。
  • 单文件约 7 KB（压缩后），与组件颜色、圆角、字体一起发布。

使用 ​

ts
import { useTheme } from "@sharpdotnut/dotsharp";

const { theme, resolvedTheme, setTheme } = useTheme();

setTheme("dark"); // 'system' | 'light' | 'dark'

当前状态：模式 system，解析结果 light。

API ​

名称类型说明
themeComputedRef<'system' | 'light' | 'dark'>当前模式，默认 system
resolvedThemeComputedRef<'light' | 'dark'>实际生效的主题，system 模式下取系统偏好
setTheme(mode: 'system' | 'light' | 'dark') => void切换模式并立即写入 DOM 与本地存储

说明 ​

  • 默认模式为 system；系统偏好变化时，只有 system 模式会跟着变。
  • 选择会持久化到 localStorage 的 dotsharp-theme 键，刷新后自动恢复。
  • 组合式函数只写 data-theme="light|dark"，不写 .dark 类，因此不绑定任何特定文档框架。
  • 服务端渲染时不会访问 window，也不会写 DOM；界面首帧主题请自行在页面 head 中提前设置，本站的做法见本站配置。