Expand description
主题(浅色 / 深色 / 跟随系统)管理。
三态模型:
Theme::Light/Theme::Dark:用户显式选择,持久化到 localStorage。Theme::System:跟随系统偏好。移除 localStorage 持久化,首屏防闪烁 脚本因此自动回退到prefers-color-scheme分支;运行时监听matchMedia('(prefers-color-scheme: dark)')的change事件,系统切换 主题时实时同步.darkclass 与下游(CodeMirror 等)。
提供两条初始化路径:
- SSR:从 HTTP 请求 Cookie 中的
theme字段检测主题,避免首屏闪烁。 - WASM 客户端:优先读取
localStorage中的持久化主题;不存在时回退到Theme::System(不再直接固化系统偏好)。
下游消费者(CodeMirror、SVG 图标判定)应读 ResolvedTheme(实际生效明暗),
而非 Theme(用户意图),这样 System 模式下系统偏好变化能自动传播。
Re-exports§
pub use ThemePreload_completions::Component::ThemePreload;pub use ThemeToggle_completions::Component::ThemeToggle;
Enums§
- Resolved
Theme - 实际生效的明暗主题(用户选择经
resolve()解析后的结果)。 - Theme
- 用户选择的主题意图(三态)。
Constants§
Functions§
- Theme
Preload - 首屏主题预加载脚本组件。
- Theme
Toggle - 主题切换按钮组件(三态循环:Light → Dark → System → Light)。
- detect_
initial_ 🔒theme - 检测初始主题意图。
- mode_
label 🔒 - 主题意图的中文标签,用于 aria-label / title。
- read_
system_ 🔒dark - 读取当前系统是否为深色偏好。
- use_
resolved_ theme - 读取实际生效明暗主题的 Hook。
- use_
theme - 读取当前主题意图 Signal 的 Hook。
- use_
theme_ provider - 提供主题上下文的 Hook。