Skies.ui開始使用
主題與樣式（Theming）
Skies.ui 主題理念、三套 OKLCH 配色，以及在專案中的設定方式
主題與樣式（Theming）
主題怎麼運作
元件怎麼上色
- CLI 裝好的元件用 Tailwind 工具類（例如
bg-primary、text-muted-foreground）。 - 這些 class 對應 CSS 變數（
--primary、--muted-foreground…）。
你在專案裡提供什麼
- 顏色與圓角：在
:root，或data-theme/.dark區塊裡定義語意變數。 - Tailwind v4：用
@theme把變數接到bg-*、text-*等 token。 - 編譯掃描：用
@source指到 CLI 輸出的元件資料夾；路徑須與components.json的paths.ui一致（常見為components/ui）。
建議閱讀順序
- 三套配色（或自訂色票）
- 語意變數一覽
- 專案全域 CSS — 整段複製進你的入口檔
三套配色（Skies.ui）
均以 OKLCH 定義，可單用其中一套，或三套並存再以 data-theme 切換。
| 名稱 | data-theme | 氣質 |
|---|---|---|
| 晴空藍（Skyblue） | skyblue | 冷色、預設亮色基調 |
| 星光金（Starlight） | starlight | 暖色、香檳金調 |
| 深夜藍（Midnight） | midnight | 暗色介面 |
去哪裡抄完整數值
參考檔：apps/docs/src/app/globals.css → @layer base 裡三塊：
:root, [data-theme="skyblue"][data-theme="starlight"][data-theme="midnight"], .dark
若沒用 Fumadocs
只需複製 --background～--ring 與語意色；可略過 --color-fd-*。
語意變數一覽
| 變數 | 用途 |
|---|---|
--background / --foreground | 頁面底、預設字色 |
--card / --card-foreground | 卡片 |
--primary / --primary-foreground | 主色、強調 |
--secondary / --secondary-foreground | 次色 |
--muted / --muted-foreground | 弱背景、說明字 |
--accent / --accent-foreground | hover／強調底 |
--destructive / --destructive-foreground | 危險操作 |
--border / --input / --ring | 邊框、輸入、focus |
變數名稱須與上表一致；數值可用 OKLCH、HSL 等。
專案全域 CSS（Tailwind v4，可整段複製）
前置： 已在同一檔（或先載入的層）定義好上表的語意變數，或已從「三套配色」貼入 :root 區塊。
再來： 在全域入口（例如 app/globals.css）加入：
@import "tailwindcss";
@theme {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--radius-xl: 1rem;
--radius-lg: 0.75rem;
--radius-md: 0.5rem;
--radius-sm: 0.25rem;
}
@source "../../components/ui";
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground antialiased;
}
}@theme 與 @source 各做什麼
@theme— 把--background等接到bg-background、text-primary這類工具類。@source— 路徑要相對於此 CSS 檔，指向你放 Skies.ui 元件的資料夾（對齊paths.ui）。
在專案裏套用「其中一套」（最常見：晴空藍）
- 從參考檔
globals.css複製:root, [data-theme="skyblue"] { … }整段到你的全域 CSS（可合併進單一:root）。 - 同一檔加入 「專案全域 CSS」 整段。
- 完成後即為 單一亮色主題；無需
next-themes也可先跑起元件。
換預設成星光金或深夜藍： 把對應區塊的變數貼進 :root，或保留 [data-theme="…"] 選擇器。
進階：三組配色切換
- 三個
@layer base區塊一併放入全域 CSS（見「三套配色」）。 - Next.js 使用
next-themes：
<ThemeProvider
attribute="data-theme"
defaultTheme="skyblue"
themes={["skyblue", "starlight", "midnight"]}
enableSystem={false}
>
{children}
</ThemeProvider>Midnight 與 Fumadocs
- Midnight：建議
<html>同時帶class="dark"，與 CSS 裡[data-theme="midnight"], .dark對齊；自寫切換鈕時兩邊要同步。 - Fumadocs：可用
RootProvider的theme設定達到類似效果。
另選：只有亮／暗兩模式
- 在
:root與.dark各定義同一組變數名。 next-themes使用attribute="class"切換即可（上文三套data-theme非必須）。.dark內要覆寫所有語意變數。
檢查清單
- 語意變數 — 「語意變數一覽」中的名稱都有定義。
- 全域 CSS 範例 — 已貼上 「專案全域 CSS」（
@theme、@source、*／body基底樣式）。 - 多主題 —
data-theme的值與 CSS 選擇器一致。