useTheme

View source
读写主题状态(颜色、圆角、字体、图标、深色模式)并导出 CSS 变量或配置代码。

简介

useTheme 暴露主题的响应式状态与导出方法,是 ThemePicker 组件的底层逻辑,可用于自定义主题面板或在业务逻辑中读写主题。

返回值

const {
  // 颜色
  color, primary, primaryColors, neutral, neutralColors,
  blackAsPrimary, setBlackAsPrimary,
  // 圆角 / 字体 / 图标 / 模式
  radius, radiuses, font, fonts, icon, icons, mode, modes,
  // 注入与状态
  style, link, hasCSSChanges, hasConfigChanges,
  // 导出
  exportCSS, exportConfig, resetTheme
} = useTheme()
分组成员说明
颜色color / primary / primaryColors主色及可选项
颜色neutral / neutralColors中性色及可选项
颜色blackAsPrimary / setBlackAsPrimary以黑色作为主色的开关
圆角radius / radiuses当前圆角及可选档位
字体font / fonts当前字体及可选项
图标icon / icons当前图标集及可选项
模式mode / modes深色模式(light/dark/system)及可选项
注入style / link需注入到页面的 CSS 变量与字体链接
状态hasCSSChanges / hasConfigChanges是否有相对默认的改动
开箱即用的可视化主题面板见 ThemePicker 组件。
Copyright © 2025 - 2026 YiXuan - MIT License