主題變數
容器注入的 CSS 變數完整清單。數值取自目前的 App 版本，會隨 App 改版調整：請用變數，不要把下表的數值抄進程式。
使用方式見主題與版面。
顏色 --im-color-*
深淺色跟隨 App 設定自動切換。主色系（primary、primary-dim、on-accent、gradient-*）還會隨使用者選的主題色與增強對比改變，下表是預設主題色的值。
| 變數 | 淺色 | 深色 | 用途 |
|---|---|---|---|
--im-color-primary | #ff6543 | #ff7a57 | 品牌主色（按鈕、強調） |
--im-color-primary-dim | #ff8d4c | #ff9a6b | 主色的淺一階 |
--im-color-on-primary | #ffffff | #ffffff | 固定白色。放在主色上的文字請用 on-accent |
--im-color-on-accent | #ffffff | #ffffff | 放在主色、品牌漸層上的文字與圖示（隨主題色變，深色模式部分主題色會變成深色字） |
--im-color-text | #16181d | #f4f2f1 | 主要文字 |
--im-color-text-secondary | #62666f | #a9a5a3 | 次要文字 |
--im-color-text-tertiary | #6b6f7a | #8c8886 | 第三層文字（說明、時間） |
--im-color-text-placeholder | #c3c6cd | #6c6866 | 輸入框提示文字 |
--im-color-background | #fffaf7 | #121012 | 頁面背景 |
--im-color-surface | #ffffff | #1e1b1d | 卡片、面板 |
--im-color-surface2 | #f6f5f8 | #29252a | 次一層的面板、輸入框底色 |
--im-color-chip | #f6f5f8 | #29252a | 標籤底色 |
--im-color-border | #efebea | #332e31 | 邊框 |
--im-color-pressed | #fff1ea | #2e2725 | 按下時的底色 |
--im-color-divider | #f4f1f4 | #2a2629 | 分隔線 |
--im-color-danger | #d93025 | #ff5b4f | 危險、錯誤 |
--im-color-success | #1dd182 | #2ed58e | 成功 |
--im-color-badge | #ff5646 | #ff5b4f | 未讀數字底色 |
--im-color-muted | #c3c6cd | #6c6866 | 非文字的安靜元素（圖示、把手、停用狀態） |
--im-color-nav-bar | #ffffff | #1a1719 | 導覽列底色 |
--im-color-scrim | rgba(0,0,0,0.451) | rgba(0,0,0,0.6) | 遮罩（對話框背後） |
--im-color-overlay | #000000 | #000000 | 全螢幕媒體底色（看圖、播放），深淺色都是黑 |
--im-color-on-overlay | #ffffff | #ffffff | 全螢幕媒體上的文字與圖示 |
--im-color-shadow | rgba(22,24,29,0.039) | rgba(0,0,0,0.302) | 卡片、浮起元素的極淡陰影 |
--im-color-shimmer-highlight | rgba(255,255,255,0.902) | #3a353b | 骨架流光的高光（比 surface2 亮） |
--im-color-online | #1dd182 | #2ed58e | 在線狀態綠點 |
--im-color-gradient-start | #ff8d4c | #f2834a | 品牌漸層起點（左上 → 右下） |
--im-color-gradient-end | #ff5646 | #e8503f | 品牌漸層終點 |
間距 --im-space-*
| 變數 | 值 |
|---|---|
--im-space-xxs | 2px |
--im-space-xs | 4px |
--im-space-sm | 8px |
--im-space-ms | 12px |
--im-space-md | 16px |
--im-space-ml | 20px |
--im-space-lg | 24px |
--im-space-xl | 32px |
--im-space-xxl | 48px |
圓角 --im-radius-*
| 變數 | 值 |
|---|---|
--im-radius-xs | 4px |
--im-radius-sm | 8px |
--im-radius-md | 12px |
--im-radius-card | 18px |
--im-radius-sheet | 24px |
--im-radius-pill | 999px |
--im-radius-pill 用於膠囊形狀（按鈕、標籤）。
字級 --im-font-*
下表是系統預設字級時的值；使用者調大系統字級時，所有字級變數等比例放大。
| 變數 | 值 |
|---|---|
--im-font-large-title | 30px |
--im-font-title1 | 26px |
--im-font-title2 | 22px |
--im-font-title3 | 18px |
--im-font-headline | 17px |
--im-font-body | 16px |
--im-font-callout | 15px |
--im-font-subhead | 14px |
--im-font-footnote | 13px |
--im-font-caption | 12px |
--im-font-caption2 | 10px |
安全區
| 變數 | 說明 |
|---|---|
--im-safe-top | 目前固定為 0px（導覽列由容器繪製，頁面從導覽列下方開始） |
--im-safe-bottom | 底部 Home 指示條的高度（iPhone 約 34px；沒有指示條或鍵盤打開時為 0px） |
其他
:root設定了color-scheme（light／dark）、background-color: var(--im-color-background)、color: var(--im-color-text)。<html>有data-im-theme="light"或"dark"屬性。