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:从 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§

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

Constants§

THEME_PRELOAD_SCRIPT 🔒

Functions§

ThemePreload
首屏主题预加载脚本组件。
ThemeToggle
主题切换按钮组件(三态循环: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。