@riebeckite/plugin-color-mode 0.0.13 → 0.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/README_ja.md +5 -5
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@ needs no JavaScript in the theme itself.
|
|
|
10
10
|
## Overview
|
|
11
11
|
|
|
12
12
|
Themes derive their palette from three CSS states (see
|
|
13
|
-
[theme-system.md](../../../docs/en/reference/theme-api.md)):
|
|
13
|
+
[theme-system.md](../../../docs/en/docs/reference/theme-api.md)):
|
|
14
14
|
|
|
15
15
|
- `:root` — light
|
|
16
16
|
- `:root[data-theme="dark"]` — dark
|
|
@@ -162,5 +162,5 @@ diagrams) can follow mode changes in the future.
|
|
|
162
162
|
|
|
163
163
|
## See also
|
|
164
164
|
|
|
165
|
-
- [Theme system](../../../docs/en/reference/theme-api.md)
|
|
166
|
-
- [`@riebeckite/plugin-ux`](../ux/README.md)
|
|
165
|
+
- [Theme system](../../../docs/en/docs/reference/theme-api.md)
|
|
166
|
+
- [`@riebeckite/plugin-ux`](../ux/README.md)
|
package/README_ja.md
CHANGED
|
@@ -6,13 +6,13 @@ Riebeckite サイト向けのライト / ダーク / システム連動のカラ
|
|
|
6
6
|
|
|
7
7
|
## 概要
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
[theme-system.md](../../../docs/ja/docs/reference/theme-api.md) テーマの配色は、次の 3 つの CSS 状態で決まります。
|
|
10
10
|
|
|
11
11
|
- `:root` — ライト
|
|
12
12
|
- `:root[data-theme="dark"]` — ダーク
|
|
13
13
|
- `@media (prefers-color-scheme: dark) { :root:not([data-theme]) }` — OS に追随（system）
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
プラグインは、この 3 つの CSS 状態を切り替えるだけの薄い実行時スイッチで、次の 3 つを提供します。
|
|
16
16
|
|
|
17
17
|
- `ColorModeScript` — `<head>` に置く 1 行のインラインスクリプト。**最初の描画の前に**保存済みモードを適用し、テーマのちらつき（FOUC）を防ぎます。
|
|
18
18
|
- `ColorModeToggle` — ライト / ダーク / システムのセグメント型コントロール。
|
|
@@ -104,7 +104,7 @@ return (
|
|
|
104
104
|
|
|
105
105
|
## イベント
|
|
106
106
|
|
|
107
|
-
`initColorMode` は `document` 上で `CustomEvent`
|
|
107
|
+
`initColorMode` は `document` 上で `CustomEvent` を発火します。
|
|
108
108
|
|
|
109
109
|
```ts
|
|
110
110
|
document.addEventListener("riebeckite:color-mode", (event) => {
|
|
@@ -132,5 +132,5 @@ document.addEventListener("riebeckite:color-mode", (event) => {
|
|
|
132
132
|
|
|
133
133
|
## 関連
|
|
134
134
|
|
|
135
|
-
- [テーマシステム](../../../docs/ja/reference/theme-api.md)
|
|
136
|
-
- [`@riebeckite/plugin-ux`](../ux/README_ja.md)
|
|
135
|
+
- [テーマシステム](../../../docs/ja/docs/reference/theme-api.md)
|
|
136
|
+
- [`@riebeckite/plugin-ux`](../ux/README_ja.md)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@riebeckite/plugin-color-mode",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.15",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"hono": "^4.12.25",
|
|
25
|
-
"@riebeckite/core": "0.0.
|
|
25
|
+
"@riebeckite/core": "0.0.15"
|
|
26
26
|
},
|
|
27
27
|
"publishConfig": {
|
|
28
28
|
"access": "public"
|