## Theme

:dark {
  /* Mode 1 */
  /* colors */
  --accent: hsl(221 83% 53%);
  --accent-foreground: hsl(212 96% 78%);
  --accent-soft: hsl(225 59% 22%);
  --background: hsl(224 46% 8%);
  --border: hsl(215 19% 35%);
  --border-soft: hsl(215 25% 27%);
  --border-strong: hsl(215 16% 47%);
  --card: hsl(215 25% 27%);
  --card-foreground: hsl(0 0 85%);
  --destructive: hsl(0 84% 60%);
  --foreground: hsl(220 14% 96%);
  --foreground-soft: hsl(218 11% 65%);
  --foreground-strong: hsl(0 0 100%);
  --input: hsl(220 13% 91%);
  --input-foreground: hsl(220 9% 46%);
  --layer-primary: hsl(217 33% 17%);
  --layer-secondary: hsl(220 36% 13%);
  --muted: hsl(215 25% 27%);
  --muted-foreground: hsl(218 11% 65%);
  --popover: hsl(220 36% 13%);
  --popover-foreground: hsl(216 12% 84%);
  --primary: hsl(221 83% 53%);
  --primary-foreground: hsl(0 0 100%);
  --secondary: hsl(188 86% 53%);
  --sidebar: hsl(222 47% 11%);
  --sidebar-foreground: hsl(218 11% 65%);
  --sidebar-foreground-strong: hsl(220 14% 96%);
  --sidebar-item: hsl(224 53% 15%);
  --success: hsl(142 71% 45%);
  --success-soft: hsl(142 72% 29%);
  --tabs-accent: hsl(212 96% 78%);
  --tag-foreground: hsl(216 12% 84%);
  --tag-role: hsl(193 82% 31%);
  --tag-role-foreground: hsl(185 96% 90%);
  --tag-site: hsl(215 25% 27%);
  --tag-zone: hsl(215 16% 47%);
  --tooltip: hsl(225 59% 22%);
}

## background
主要用於界面的背景色

| variable | Description |
| -------- | -------- |
| background | 主要背景色 |

## sidebar
用於側邊欄的設計
| variable | Description |
| -------- | -------- |
| sidebar | 側邊欄的背景色 |
| sidebar-foreground | 側邊欄的文字和圖標色 |
| sidebar-foreground-strong | 側邊欄中強調文字或選中項目的顏色 |
| sidebar-item | 側邊欄項目的背景色 |

## accent
hover/active effect e.g. `Select`, `Dropdown`

| variable | Description |
| -------- | -------- |
| accent | 強調底色 |
| accent-soft | 次要或較不突出的強調底色 |
| accent-foreground | 強調底色上的文字色 |

## border
用於元素的邊框和分割線
| variable | Description |
| -------- | -------- |
| border | 標準邊框色 |
| border-soft | 較輕的邊框色，用於較細或次要的分割線 |
| border-strong | 較強的邊框色，用於突出顯示的分割線或邊框 |

## card
- 用於卡片式設計元素

| variable | Description |
| -------- | -------- |
| card | 卡片的背景色 |
| card-foreground | 卡片上的文字和圖標色 |

## text and typography
- 主要用於文字和排版

| variable | Description |
| -------- | -------- |
| foreground | 主要文字顏色 |
| foreground-soft | 次要或較不突出的文字顏色、icon顏色 |
| foreground-strong | 用於標題或重要文字的強調色 |

## layer
- 用於界面分層和深度效果

| variable | Description |
| -------- | -------- |
| layer-primary | 主要層級背景色，用於突出界面元素 |
| layer-secondary | 次要層級背景色，用於背景分層效果 |

## tag and label
- 用於標籤和標記

| variable | Description |
| -------- | -------- |
| tag-foreground | 標籤文字的顏色 |
| tag-role | 角色標籤的背景色 |
| tag-role-foreground | 角色標籤文字的顏色 |
| tag-site | 站點標籤的背景色 |
| tag-zone | 區域標籤的背景色 |

## Functional color
用於主要和次要界面元素的顏色
| variable | Description |
| -------- | -------- |
| primary | 主要界面元素的顏色 |
| primary-foreground | 在主要顏色上的文字顏色 |
| secondary | 次要界面元素的顏色 |
| success | 成功或確認消息的顏色 |
| success-soft | 次要的成功或確認消息的顏色 |
| destructive | 錯誤或危險消息的顏色 |

## muted
用於低調或不顯眼但又得呈現的元素
- `Input`的placeholder
- `Tabs` inactive的Tab
- `Select` 中unselected的部分

| variable | Description |
| -------- | -------- |
| muted | 低調的背景色 |
| muted-foreground | 低調的文字顏色 |

## popover
用於彈出窗口或浮動元素 e.g. `Select`, `Dialog`, `Toast`

| variable | Description |
| -------- | -------- |
| popover | 彈出窗口的背景色|
| popover-foreground | 彈出窗口的文字色 |

## Input
用於特殊輸入框等互動元素
| variable | Description |
| -------- | -------- |
| input | 輸入框背景色 |
| input-foreground | 輸入框中的文字顏色 |

## Others
| variable | Description |
| -------- | -------- |
| tooltip | 工具提示的背景色 |
| tabs-accent | 標籤和導航的強調色 |