@riebeckite/plugin-color-mode 0.0.19 → 0.0.21
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 +5 -4
- package/README_ja.md +5 -4
- 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/docs/reference/theme-api.
|
|
13
|
+
[theme-system.md](../../../docs/docs/reference/theme-api.md)):
|
|
14
14
|
|
|
15
15
|
- `:root` — light
|
|
16
16
|
- `:root[data-theme="dark"]` — dark
|
|
@@ -47,10 +47,11 @@ entry.
|
|
|
47
47
|
|
|
48
48
|
```tsx
|
|
49
49
|
import { ColorModeScript, ColorModeToggle } from "@riebeckite/plugin-color-mode";
|
|
50
|
+
import { ThemeRoot } from "@riebeckite/honox/ui";
|
|
50
51
|
|
|
51
52
|
// ...in your renderer
|
|
52
53
|
return (
|
|
53
|
-
<
|
|
54
|
+
<ThemeRoot theme={config.theme}>
|
|
54
55
|
<head>
|
|
55
56
|
<ColorModeScript />
|
|
56
57
|
{/* stylesheets, ... */}
|
|
@@ -61,7 +62,7 @@ return (
|
|
|
61
62
|
</header>
|
|
62
63
|
{children}
|
|
63
64
|
</body>
|
|
64
|
-
</
|
|
65
|
+
</ThemeRoot>
|
|
65
66
|
);
|
|
66
67
|
```
|
|
67
68
|
|
|
@@ -162,5 +163,5 @@ diagrams) can follow mode changes in the future.
|
|
|
162
163
|
|
|
163
164
|
## See also
|
|
164
165
|
|
|
165
|
-
- [Theme system](../../../docs/docs/reference/theme-api.
|
|
166
|
+
- [Theme system](../../../docs/docs/reference/theme-api.md)
|
|
166
167
|
- [`@riebeckite/plugin-ux`](../ux/README.md)
|
package/README_ja.md
CHANGED
|
@@ -6,7 +6,7 @@ Riebeckite サイト向けのライト / ダーク / システム連動のカラ
|
|
|
6
6
|
|
|
7
7
|
## 概要
|
|
8
8
|
|
|
9
|
-
[theme-system.md](../../../docs/docs/reference/theme-api.md) テーマの配色は、次の 3 つの CSS 状態で決まります。
|
|
9
|
+
[theme-system.md](../../../docs/docs/reference/theme-api.ja.md) テーマの配色は、次の 3 つの CSS 状態で決まります。
|
|
10
10
|
|
|
11
11
|
- `:root` — ライト
|
|
12
12
|
- `:root[data-theme="dark"]` — ダーク
|
|
@@ -38,10 +38,11 @@ export default defineConfig({
|
|
|
38
38
|
|
|
39
39
|
```tsx
|
|
40
40
|
import { ColorModeScript, ColorModeToggle } from "@riebeckite/plugin-color-mode";
|
|
41
|
+
import { ThemeRoot } from "@riebeckite/honox/ui";
|
|
41
42
|
|
|
42
43
|
// ...レンダラー内
|
|
43
44
|
return (
|
|
44
|
-
<
|
|
45
|
+
<ThemeRoot theme={config.theme}>
|
|
45
46
|
<head>
|
|
46
47
|
<ColorModeScript />
|
|
47
48
|
{/* スタイルシート, ... */}
|
|
@@ -52,7 +53,7 @@ return (
|
|
|
52
53
|
</header>
|
|
53
54
|
{children}
|
|
54
55
|
</body>
|
|
55
|
-
</
|
|
56
|
+
</ThemeRoot>
|
|
56
57
|
);
|
|
57
58
|
```
|
|
58
59
|
|
|
@@ -132,5 +133,5 @@ document.addEventListener("riebeckite:color-mode", (event) => {
|
|
|
132
133
|
|
|
133
134
|
## 関連
|
|
134
135
|
|
|
135
|
-
- [テーマシステム](../../../docs/docs/reference/theme-api.md)
|
|
136
|
+
- [テーマシステム](../../../docs/docs/reference/theme-api.ja.md)
|
|
136
137
|
- [`@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.21",
|
|
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.21"
|
|
26
26
|
},
|
|
27
27
|
"publishConfig": {
|
|
28
28
|
"access": "public"
|