Skip to main content

Module theme

Module theme 

Source
Expand description

主题(浅色 / 深色 / 跟随系统)管理。

三态模型:

  • Theme::Light / Theme::Dark:用户显式选择,持久化到 localStorage。
  • Theme::System:跟随系统偏好。移除 localStorage 持久化,首屏防闪烁 脚本因此自动回退到 prefers-color-scheme 分支;运行时监听 matchMedia('(prefers-color-scheme: dark)')change 事件,系统切换 主题时实时同步 .dark class 与下游(CodeMirror 等)。

SSR 与客户端 hydration 都从 Theme::System 开始;挂载后再读取 localStorage 恢复用户选择。首屏配色和图标均由 ThemePreload 提前设置, 不依赖 WASM 加载速度或服务端无法读取的浏览器偏好。

下游消费者(CodeMirror、SVG 图标判定)应读 ResolvedTheme(实际生效明暗), 而非 Theme(用户意图),这样 System 模式下系统偏好变化能自动传播。

Re-exports§

pub use ThemePreload_completions::Component::ThemePreload;
pub use ThemeToggle_completions::Component::ThemeToggle;

Enums§

ResolvedTheme
实际生效的明暗主题(用户选择经 resolve() 解析后的结果)。
Theme
用户选择的主题意图(三态)。

Constants§

THEME_ICON_STYLE 🔒
THEME_PRELOAD_SCRIPT 🔒

Functions§

ThemePreload
首屏主题预加载脚本组件。
ThemeToggle
主题切换按钮组件(三态循环:Dark → Light → System → Dark)。
mode_label 🔒
主题意图的中文标签,用于 aria-label / title。
read_system_dark 🔒
读取当前系统是否为深色偏好。
use_resolved_theme
读取实际生效明暗主题的 Hook。
use_theme
读取当前主题意图 Signal 的 Hook。
use_theme_provider
提供主题上下文的 Hook。