設計與主題

自訂設計只需要兩個檔案，放在專案的 .moss/theme/ 目錄裡（青苔在你開啟資料夾時會自動建立它）：

my-site/
├── .moss/
│   └── theme/
│       ├── style.css   ← 自訂 CSS
│       └── script.js   ← 自訂 JS
├── index.md
└── ...

青苔會自動載入這兩個檔案：style.css 覆寫預設主題，無需寫 !important；script.js 在所有內建指令碼之後執行。

用變數調整外觀

青苔的樣式建立在一套 --moss-* CSS 變數上。覆蓋幾個變數就能換掉整體觀感：

:root {
  --moss-color-accent: #2d5a2d;      /* 連結與強調色 */
  --moss-font-body: "Inter", sans-serif;
  --moss-content-width: 72ch;        /* 內文最大寬度 */
}

深色模式只需覆蓋一個選擇器，青苔已經把系統偏好和手動切換都歸到 data-theme 上：

:root[data-theme="dark"] {
  --moss-color-bg: #0f0f0f;
  --moss-color-accent: #6abf6a;
}

執行命令列工具 moss describe --json 可列出全部變數及其亮色／暗色預設值。

針對元件微調

青苔生成的每個元件都有穩定的 .moss-* class 名稱，可以在 style.css 裡直接定位，例如 .moss-grid-card、.moss-collection-card、.callout。也可以給短代碼掛自訂 class：:::grid 3 {.profiles}，再寫 .profiles .moss-grid-card { … }。

其他資源

你也可以把其他媒體檔案放入 .moss/theme/ 中，供 script.js 和 style.css 引用。比如，把 .woff2 放在 .moss/theme/fonts/，在 style.css 中用 @font-face { src: url('fonts/myfont.woff2') } 引用。

深入了解

完整的 CSS 變數表、元件 class 名稱清單、資料屬性和 DOM 結構，見英文文件 Write a theme、CSS tokens 和 Components。

青苔發佈