Riebeckite
Menu
Color mode

Color Mode

このページは テーマ作成の詳細 の一部で、Color Mode の指定と CSS での扱いを扱います。

5. Color Mode

Theme は3種類の Color Mode を扱えます。

ts
type ThemeColorMode =
  | "light"
  | "dark"
  | "system";
Mode 動作
light Light 配色
dark Dark 配色
system OS の設定に追従

Theme は data-theme と Semantic Token を使って配色を切り替えます。

個々の Component に Light / Dark の色を直接埋め込まないでください。

6. Color Mode の CSS

基本となる CSS は次の形です。

css
/* Light */
:is(:root, .rb-theme-root)
[data-theme-name="<name>"] {
  /* ... */
}
 
/* Dark */
:is(:root, .rb-theme-root)
[data-theme-name="<name>"]
[data-theme="dark"] {
  /* ... */
}
 
/* System */
@media (prefers-color-scheme: dark) {
  :is(:root, .rb-theme-root)
  [data-theme-name="<name>"]
  :not([data-theme]) {
    /* ... */
  }
}

Server は colorMode が "system" 以外なら <html> に data-theme を出力します。

html
<html
  data-theme-name="example"
  data-theme="dark"
>

"system" の場合は data-theme を出力しません。

html
<html data-theme-name="example">

この違いは重要です。

7. system では Attribute を削除する

実行時に Color Mode を変更する場合は、

text
light
  → data-theme="light"
 
dark
  → data-theme="dark"
 
system
  → data-theme を削除

とします。

たとえば、

ts
document.documentElement.dataset.theme =
  "dark";

から System へ戻す場合は、

ts
delete document.documentElement.dataset.theme;

とします。

次のように空文字へ変更してはいけません。

ts
document.documentElement.dataset.theme = "";

これは、

html
<html data-theme="">

となり、依然として [data-theme] Selector に一致するためです。

その結果、

css
:not([data-theme])

が成立せず、System Mode の Media Query が機能しません。

@riebeckite/plugin-color-mode がこの Contract の参照実装です。

History

1 changesCollapseExpand
1 + ---
2 + title: Color Mode
3 + sidebar:
4 + label: Color Mode
5 + order: 10
6 + ---
7 + # Color Mode
8 +
9 + このページは [テーマ作成の詳細](../theme-system.ja.md) の一部で、Color Mode の指定と CSS での扱いを扱います。
10 +
11 + ## 5. Color Mode
12 +
13 + Theme は3種類の Color Mode を扱えます。
14 +
15 + ```ts id="9qfwqg"
16 + type ThemeColorMode =
17 + | "light"
18 + | "dark"
19 + | "system";
20 + ```
21 +
22 + | Mode | 動作 |
23 + | --- | --- |
24 + | `light` | Light 配色 |
25 + | `dark` | Dark 配色 |
26 + | `system` | OS の設定に追従 |
27 +
28 + Theme は `data-theme` と Semantic Token を使って配色を切り替えます。
29 +
30 + 個々の Component に Light / Dark の色を直接埋め込まないでください。
31 +
32 +
33 + ## 6. Color Mode の CSS
34 +
35 + 基本となる CSS は次の形です。
36 +
37 + ```css id="m87m0s"
38 + /* Light */
39 + :is(:root, .rb-theme-root)
40 + [data-theme-name="<name>"] {
41 + /* ... */
42 + }
43 +
44 + /* Dark */
45 + :is(:root, .rb-theme-root)
46 + [data-theme-name="<name>"]
47 + [data-theme="dark"] {
48 + /* ... */
49 + }
50 +
51 + /* System */
52 + @media (prefers-color-scheme: dark) {
53 + :is(:root, .rb-theme-root)
54 + [data-theme-name="<name>"]
55 + :not([data-theme]) {
56 + /* ... */
57 + }
58 + }
59 + ```
60 +
61 + Server は `colorMode` が `"system"` 以外なら `<html>` に `data-theme` を出力します。
62 +
63 + ```html id="s6hs50"
64 + <html
65 + data-theme-name="example"
66 + data-theme="dark"
67 + >
68 + ```
69 +
70 + `"system"` の場合は `data-theme` を出力しません。
71 +
72 + ```html id="k3dd13"
73 + <html data-theme-name="example">
74 + ```
75 +
76 + この違いは重要です。
77 +
78 +
79 + ## 7. `system` では Attribute を削除する
80 +
81 + 実行時に Color Mode を変更する場合は、
82 +
83 + ```text id="h03gwl"
84 + light
85 + → data-theme="light"
86 +
87 + dark
88 + → data-theme="dark"
89 +
90 + system
91 + → data-theme を削除
92 + ```
93 +
94 + とします。
95 +
96 + たとえば、
97 +
98 + ```ts id="iyf9ao"
99 + document.documentElement.dataset.theme =
100 + "dark";
101 + ```
102 +
103 + から System へ戻す場合は、
104 +
105 + ```ts id="6t0p0r"
106 + delete document.documentElement.dataset.theme;
107 + ```
108 +
109 + とします。
110 +
111 + 次のように空文字へ変更してはいけません。
112 +
113 + ```ts id="o2i8bp"
114 + document.documentElement.dataset.theme = "";
115 + ```
116 +
117 + これは、
118 +
119 + ```html id="25ohm9"
120 + <html data-theme="">
121 + ```
122 +
123 + となり、依然として `[data-theme]` Selector に一致するためです。
124 +
125 + その結果、
126 +
127 + ```css id="qfrb4j"
128 + :not([data-theme])
129 + ```
130 +
131 + が成立せず、System Mode の Media Query が機能しません。
132 +
133 + `@riebeckite/plugin-color-mode` がこの Contract の参照実装です。
134 +