Color mode

Theme の設定

Theme は theme で設定します。

ts
theme: {
  colorMode: "system",
  articleLayout: "article",
}

raw configuration または宣言済み Theme を利用できます。

Theme は presentation の設定です。

HonoX、Vite、Cloudflare など Integration 固有の設定を Core configuration へ入れないでください。

Diagram source
text
flowchart TD
    Config["Riebeckite Config"]
 
    Config --> Site["Site"]
    Config --> Content["Content"]
    Config --> Markdown["Markdown"]
    Config --> Theme["Theme"]
    Config --> Plugins["Plugins"]
 
    Framework["HonoX / Vite / Platform"]
    Framework --> Integration["Integration Config"]
 
    Integration -. "Core Configへ混ぜない" .-> Config

History

1 changesCollapseExpand
1 + ---
2 + title: Theme の設定
3 + sidebar:
4 + label: Theme の設定
5 + order: 70
6 + ---
7 + # Theme の設定
8 +
9 + Theme は `theme` で設定します。
10 +
11 + ```ts id="pgj2be"
12 + theme: {
13 + colorMode: "system",
14 + articleLayout: "article",
15 + }
16 + ```
17 +
18 + raw configuration または宣言済み Theme を利用できます。
19 +
20 + Theme は presentation の設定です。
21 +
22 + HonoX、Vite、Cloudflare など Integration 固有の設定を Core configuration へ入れないでください。
23 +
24 + ```mermaid id="m54zmx"
25 + flowchart TD
26 + Config["Riebeckite Config"]
27 +
28 + Config --> Site["Site"]
29 + Config --> Content["Content"]
30 + Config --> Markdown["Markdown"]
31 + Config --> Theme["Theme"]
32 + Config --> Plugins["Plugins"]
33 +
34 + Framework["HonoX / Vite / Platform"]
35 + Framework --> Integration["Integration Config"]
36 +
37 + Integration -. "Core Configへ混ぜない" .-> Config
38 + ```
39 +