Skip to content
Astromer

主題

主題

Section titled “主題”

Astromer 使用 data-theme + light-dark() 管理亮/暗模式。

切換方式

Section titled “切換方式”

在 <html> 上設定 data-theme：

  • data-theme="light" — 強制亮色
  • data-theme="dark" — 強制暗色
  • data-theme="auto" — 跟隨系統 prefers-color-scheme

範例

Section titled “範例”
<html lang="zh-TW" data-theme="auto">

用 JavaScript 切換並可選持久化：

document.documentElement.setAttribute("data-theme", "dark");
localStorage.setItem("astromer-theme", "dark");

頁面載入時從 localStorage 讀回即可。

Token 層級

Section titled “Token 層級”
  1. Primitive — 原色與數值（@astromer/tokens 的 primitives.css）
  2. Semantic — light-dark() 語義變數（semantic.css）
  3. Component — 元件級覆寫（如 --am-button-bg）