@docusaurus/theme-common 3.7.0-canary-6242 → 3.7.0-canary-6243
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/lib/contexts/colorMode.d.ts.map +1 -1
- package/lib/contexts/colorMode.js +39 -21
- package/lib/contexts/colorMode.js.map +1 -1
- package/lib/utils/useThemeConfig.d.ts +2 -1
- package/lib/utils/useThemeConfig.d.ts.map +1 -1
- package/lib/utils/useThemeConfig.js.map +1 -1
- package/package.json +8 -8
- package/src/contexts/colorMode.tsx +55 -32
- package/src/utils/useThemeConfig.ts +2 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colorMode.d.ts","sourceRoot":"","sources":["../../src/contexts/colorMode.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAc,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,KAAK,YAAY,GAAG;IAClB,0BAA0B;IAC1B,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;IAC9B,0BAA0B;IAC1B,QAAQ,CAAC,YAAY,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"colorMode.d.ts","sourceRoot":"","sources":["../../src/contexts/colorMode.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAc,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,KAAK,YAAY,GAAG;IAClB,0BAA0B;IAC1B,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;IAC9B,0BAA0B;IAC1B,QAAQ,CAAC,YAAY,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IAItD,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC;IACnC,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC;CACnC,CAAC;AAOF,QAAA,MAAM,UAAU;;;CAGN,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AA8JrE,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,SAAS,CAGZ;AAED,wBAAgB,YAAY,IAAI,YAAY,CAS3C"}
|
|
@@ -18,15 +18,39 @@ const ColorModes = {
|
|
|
18
18
|
};
|
|
19
19
|
// Ensure to always return a valid colorMode even if input is invalid
|
|
20
20
|
const coerceToColorMode = (colorMode) => colorMode === ColorModes.dark ? ColorModes.dark : ColorModes.light;
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
const ColorModeAttribute = {
|
|
22
|
+
get: () => {
|
|
23
|
+
return coerceToColorMode(document.documentElement.getAttribute('data-theme'));
|
|
24
|
+
},
|
|
25
|
+
set: (colorMode) => {
|
|
26
|
+
document.documentElement.setAttribute('data-theme', coerceToColorMode(colorMode));
|
|
27
|
+
},
|
|
28
|
+
};
|
|
29
|
+
const readInitialColorMode = () => {
|
|
30
|
+
if (!ExecutionEnvironment.canUseDOM) {
|
|
31
|
+
throw new Error("Can't read initial color mode on the server");
|
|
32
|
+
}
|
|
33
|
+
return ColorModeAttribute.get();
|
|
34
|
+
};
|
|
24
35
|
const storeColorMode = (newColorMode) => {
|
|
25
36
|
ColorModeStorage.set(coerceToColorMode(newColorMode));
|
|
26
37
|
};
|
|
38
|
+
// The color mode state is initialized in useEffect on purpose
|
|
39
|
+
// to avoid a React hydration mismatch errors
|
|
40
|
+
// The useColorMode() hook value lags behind on purpose
|
|
41
|
+
// This helps users avoid hydration mismatch errors in their code
|
|
42
|
+
// See also https://github.com/facebook/docusaurus/issues/7986
|
|
43
|
+
function useColorModeState() {
|
|
44
|
+
const { colorMode: { defaultMode }, } = useThemeConfig();
|
|
45
|
+
const [colorMode, setColorModeState] = useState(defaultMode);
|
|
46
|
+
useEffect(() => {
|
|
47
|
+
setColorModeState(readInitialColorMode());
|
|
48
|
+
}, []);
|
|
49
|
+
return [colorMode, setColorModeState];
|
|
50
|
+
}
|
|
27
51
|
function useContextValue() {
|
|
28
52
|
const { colorMode: { defaultMode, disableSwitch, respectPrefersColorScheme }, } = useThemeConfig();
|
|
29
|
-
const [colorMode, setColorModeState] =
|
|
53
|
+
const [colorMode, setColorModeState] = useColorModeState();
|
|
30
54
|
useEffect(() => {
|
|
31
55
|
// A site is deployed without disableSwitch
|
|
32
56
|
// => User visits the site and has a persisted value
|
|
@@ -39,6 +63,7 @@ function useContextValue() {
|
|
|
39
63
|
const setColorMode = useCallback((newColorMode, options = {}) => {
|
|
40
64
|
const { persist = true } = options;
|
|
41
65
|
if (newColorMode) {
|
|
66
|
+
ColorModeAttribute.set(newColorMode);
|
|
42
67
|
setColorModeState(newColorMode);
|
|
43
68
|
if (persist) {
|
|
44
69
|
storeColorMode(newColorMode);
|
|
@@ -46,34 +71,27 @@ function useContextValue() {
|
|
|
46
71
|
}
|
|
47
72
|
else {
|
|
48
73
|
if (respectPrefersColorScheme) {
|
|
49
|
-
|
|
74
|
+
const osColorMode = window.matchMedia('(prefers-color-scheme: dark)')
|
|
75
|
+
.matches
|
|
50
76
|
? ColorModes.dark
|
|
51
|
-
: ColorModes.light
|
|
77
|
+
: ColorModes.light;
|
|
78
|
+
ColorModeAttribute.set(osColorMode);
|
|
79
|
+
setColorModeState(osColorMode);
|
|
52
80
|
}
|
|
53
81
|
else {
|
|
82
|
+
ColorModeAttribute.set(defaultMode);
|
|
54
83
|
setColorModeState(defaultMode);
|
|
55
84
|
}
|
|
56
85
|
ColorModeStorage.del();
|
|
57
86
|
}
|
|
58
|
-
}, [respectPrefersColorScheme, defaultMode]);
|
|
59
|
-
useEffect(() => {
|
|
60
|
-
document.documentElement.setAttribute('data-theme', coerceToColorMode(colorMode));
|
|
61
|
-
}, [colorMode]);
|
|
87
|
+
}, [setColorModeState, respectPrefersColorScheme, defaultMode]);
|
|
62
88
|
useEffect(() => {
|
|
63
89
|
if (disableSwitch) {
|
|
64
90
|
return undefined;
|
|
65
91
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}
|
|
70
|
-
const storedColorMode = ColorModeStorage.get();
|
|
71
|
-
if (storedColorMode !== null) {
|
|
72
|
-
setColorMode(coerceToColorMode(storedColorMode));
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
|
-
window.addEventListener('storage', onChange);
|
|
76
|
-
return () => window.removeEventListener('storage', onChange);
|
|
92
|
+
return ColorModeStorage.listen((e) => {
|
|
93
|
+
setColorMode(coerceToColorMode(e.newValue));
|
|
94
|
+
});
|
|
77
95
|
}, [disableSwitch, setColorMode]);
|
|
78
96
|
// PCS is coerced to light mode when printing, which causes the color mode to
|
|
79
97
|
// be reset to dark when exiting print mode, disregarding user settings. When
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colorMode.js","sourceRoot":"","sources":["../../src/contexts/colorMode.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,EACZ,QAAQ,EACR,WAAW,EACX,SAAS,EACT,UAAU,EACV,OAAO,EACP,MAAM,GAEP,MAAM,OAAO,CAAC;AACf,OAAO,oBAAoB,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAC,iBAAiB,EAAC,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAC,cAAc,EAAC,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"colorMode.js","sourceRoot":"","sources":["../../src/contexts/colorMode.tsx"],"names":[],"mappings":"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"}
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
import type { PrismTheme } from 'prism-react-renderer';
|
|
8
8
|
import type { DeepPartial } from 'utility-types';
|
|
9
9
|
import type { MagicCommentConfig } from './codeBlockUtils';
|
|
10
|
+
import type { ColorMode } from '../contexts/colorMode';
|
|
10
11
|
export type DocsVersionPersistence = 'localStorage' | 'none';
|
|
11
12
|
export type NavbarItem = {
|
|
12
13
|
type?: string | undefined;
|
|
@@ -36,7 +37,7 @@ export type Navbar = {
|
|
|
36
37
|
logo?: NavbarLogo;
|
|
37
38
|
};
|
|
38
39
|
export type ColorModeConfig = {
|
|
39
|
-
defaultMode:
|
|
40
|
+
defaultMode: ColorMode;
|
|
40
41
|
disableSwitch: boolean;
|
|
41
42
|
respectPrefersColorScheme: boolean;
|
|
42
43
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useThemeConfig.d.ts","sourceRoot":"","sources":["../../src/utils/useThemeConfig.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"useThemeConfig.d.ts","sourceRoot":"","sources":["../../src/utils/useThemeConfig.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useThemeConfig.js","sourceRoot":"","sources":["../../src/utils/useThemeConfig.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,oBAAoB,MAAM,kCAAkC,CAAC;
|
|
1
|
+
{"version":3,"file":"useThemeConfig.js","sourceRoot":"","sources":["../../src/utils/useThemeConfig.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,oBAAoB,MAAM,kCAAkC,CAAC;AAqIpE;;GAEG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,oBAAoB,EAAE,CAAC,UAAU,CAAC,WAA0B,CAAC;AACtE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@docusaurus/theme-common",
|
|
3
|
-
"version": "3.7.0-canary-
|
|
3
|
+
"version": "3.7.0-canary-6243",
|
|
4
4
|
"description": "Common code for Docusaurus themes.",
|
|
5
5
|
"main": "./lib/index.js",
|
|
6
6
|
"types": "./lib/index.d.ts",
|
|
@@ -30,10 +30,10 @@
|
|
|
30
30
|
},
|
|
31
31
|
"license": "MIT",
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@docusaurus/mdx-loader": "3.7.0-canary-
|
|
34
|
-
"@docusaurus/module-type-aliases": "3.7.0-canary-
|
|
35
|
-
"@docusaurus/utils": "3.7.0-canary-
|
|
36
|
-
"@docusaurus/utils-common": "3.7.0-canary-
|
|
33
|
+
"@docusaurus/mdx-loader": "3.7.0-canary-6243",
|
|
34
|
+
"@docusaurus/module-type-aliases": "3.7.0-canary-6243",
|
|
35
|
+
"@docusaurus/utils": "3.7.0-canary-6243",
|
|
36
|
+
"@docusaurus/utils-common": "3.7.0-canary-6243",
|
|
37
37
|
"@types/history": "^4.7.11",
|
|
38
38
|
"@types/react": "*",
|
|
39
39
|
"@types/react-router-config": "*",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"utility-types": "^3.10.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@docusaurus/core": "3.7.0-canary-
|
|
48
|
-
"@docusaurus/types": "3.7.0-canary-
|
|
47
|
+
"@docusaurus/core": "3.7.0-canary-6243",
|
|
48
|
+
"@docusaurus/types": "3.7.0-canary-6243",
|
|
49
49
|
"fs-extra": "^11.1.1",
|
|
50
50
|
"lodash": "^4.17.21"
|
|
51
51
|
},
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"engines": {
|
|
58
58
|
"node": ">=18.0"
|
|
59
59
|
},
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "230bf7b323faac13ba6bf0bca875d222efdab11a"
|
|
61
61
|
}
|
|
@@ -25,7 +25,8 @@ type ContextValue = {
|
|
|
25
25
|
/** Set new color mode. */
|
|
26
26
|
readonly setColorMode: (colorMode: ColorMode) => void;
|
|
27
27
|
|
|
28
|
-
// TODO
|
|
28
|
+
// TODO Docusaurus v4
|
|
29
|
+
// legacy APIs kept for retro-compatibility: deprecate them
|
|
29
30
|
readonly isDarkTheme: boolean;
|
|
30
31
|
readonly setLightTheme: () => void;
|
|
31
32
|
readonly setDarkTheme: () => void;
|
|
@@ -47,22 +48,55 @@ export type ColorMode = (typeof ColorModes)[keyof typeof ColorModes];
|
|
|
47
48
|
const coerceToColorMode = (colorMode?: string | null): ColorMode =>
|
|
48
49
|
colorMode === ColorModes.dark ? ColorModes.dark : ColorModes.light;
|
|
49
50
|
|
|
50
|
-
const
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
51
|
+
const ColorModeAttribute = {
|
|
52
|
+
get: () => {
|
|
53
|
+
return coerceToColorMode(
|
|
54
|
+
document.documentElement.getAttribute('data-theme'),
|
|
55
|
+
);
|
|
56
|
+
},
|
|
57
|
+
set: (colorMode: ColorMode) => {
|
|
58
|
+
document.documentElement.setAttribute(
|
|
59
|
+
'data-theme',
|
|
60
|
+
coerceToColorMode(colorMode),
|
|
61
|
+
);
|
|
62
|
+
},
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
const readInitialColorMode = (): ColorMode => {
|
|
66
|
+
if (!ExecutionEnvironment.canUseDOM) {
|
|
67
|
+
throw new Error("Can't read initial color mode on the server");
|
|
68
|
+
}
|
|
69
|
+
return ColorModeAttribute.get();
|
|
70
|
+
};
|
|
54
71
|
|
|
55
72
|
const storeColorMode = (newColorMode: ColorMode) => {
|
|
56
73
|
ColorModeStorage.set(coerceToColorMode(newColorMode));
|
|
57
74
|
};
|
|
58
75
|
|
|
76
|
+
// The color mode state is initialized in useEffect on purpose
|
|
77
|
+
// to avoid a React hydration mismatch errors
|
|
78
|
+
// The useColorMode() hook value lags behind on purpose
|
|
79
|
+
// This helps users avoid hydration mismatch errors in their code
|
|
80
|
+
// See also https://github.com/facebook/docusaurus/issues/7986
|
|
81
|
+
function useColorModeState() {
|
|
82
|
+
const {
|
|
83
|
+
colorMode: {defaultMode},
|
|
84
|
+
} = useThemeConfig();
|
|
85
|
+
|
|
86
|
+
const [colorMode, setColorModeState] = useState(defaultMode);
|
|
87
|
+
|
|
88
|
+
useEffect(() => {
|
|
89
|
+
setColorModeState(readInitialColorMode());
|
|
90
|
+
}, []);
|
|
91
|
+
|
|
92
|
+
return [colorMode, setColorModeState] as const;
|
|
93
|
+
}
|
|
94
|
+
|
|
59
95
|
function useContextValue(): ContextValue {
|
|
60
96
|
const {
|
|
61
97
|
colorMode: {defaultMode, disableSwitch, respectPrefersColorScheme},
|
|
62
98
|
} = useThemeConfig();
|
|
63
|
-
const [colorMode, setColorModeState] =
|
|
64
|
-
getInitialColorMode(defaultMode),
|
|
65
|
-
);
|
|
99
|
+
const [colorMode, setColorModeState] = useColorModeState();
|
|
66
100
|
|
|
67
101
|
useEffect(() => {
|
|
68
102
|
// A site is deployed without disableSwitch
|
|
@@ -77,49 +111,38 @@ function useContextValue(): ContextValue {
|
|
|
77
111
|
const setColorMode = useCallback(
|
|
78
112
|
(newColorMode: ColorMode | null, options: {persist?: boolean} = {}) => {
|
|
79
113
|
const {persist = true} = options;
|
|
114
|
+
|
|
80
115
|
if (newColorMode) {
|
|
116
|
+
ColorModeAttribute.set(newColorMode);
|
|
81
117
|
setColorModeState(newColorMode);
|
|
82
118
|
if (persist) {
|
|
83
119
|
storeColorMode(newColorMode);
|
|
84
120
|
}
|
|
85
121
|
} else {
|
|
86
122
|
if (respectPrefersColorScheme) {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
);
|
|
123
|
+
const osColorMode = window.matchMedia('(prefers-color-scheme: dark)')
|
|
124
|
+
.matches
|
|
125
|
+
? ColorModes.dark
|
|
126
|
+
: ColorModes.light;
|
|
127
|
+
ColorModeAttribute.set(osColorMode);
|
|
128
|
+
setColorModeState(osColorMode);
|
|
92
129
|
} else {
|
|
130
|
+
ColorModeAttribute.set(defaultMode);
|
|
93
131
|
setColorModeState(defaultMode);
|
|
94
132
|
}
|
|
95
133
|
ColorModeStorage.del();
|
|
96
134
|
}
|
|
97
135
|
},
|
|
98
|
-
[respectPrefersColorScheme, defaultMode],
|
|
136
|
+
[setColorModeState, respectPrefersColorScheme, defaultMode],
|
|
99
137
|
);
|
|
100
138
|
|
|
101
|
-
useEffect(() => {
|
|
102
|
-
document.documentElement.setAttribute(
|
|
103
|
-
'data-theme',
|
|
104
|
-
coerceToColorMode(colorMode),
|
|
105
|
-
);
|
|
106
|
-
}, [colorMode]);
|
|
107
|
-
|
|
108
139
|
useEffect(() => {
|
|
109
140
|
if (disableSwitch) {
|
|
110
141
|
return undefined;
|
|
111
142
|
}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
}
|
|
116
|
-
const storedColorMode = ColorModeStorage.get();
|
|
117
|
-
if (storedColorMode !== null) {
|
|
118
|
-
setColorMode(coerceToColorMode(storedColorMode));
|
|
119
|
-
}
|
|
120
|
-
};
|
|
121
|
-
window.addEventListener('storage', onChange);
|
|
122
|
-
return () => window.removeEventListener('storage', onChange);
|
|
143
|
+
return ColorModeStorage.listen((e) => {
|
|
144
|
+
setColorMode(coerceToColorMode(e.newValue));
|
|
145
|
+
});
|
|
123
146
|
}, [disableSwitch, setColorMode]);
|
|
124
147
|
|
|
125
148
|
// PCS is coerced to light mode when printing, which causes the color mode to
|
|
@@ -9,6 +9,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
|
|
9
9
|
import type {PrismTheme} from 'prism-react-renderer';
|
|
10
10
|
import type {DeepPartial} from 'utility-types';
|
|
11
11
|
import type {MagicCommentConfig} from './codeBlockUtils';
|
|
12
|
+
import type {ColorMode} from '../contexts/colorMode';
|
|
12
13
|
|
|
13
14
|
export type DocsVersionPersistence = 'localStorage' | 'none';
|
|
14
15
|
|
|
@@ -44,7 +45,7 @@ export type Navbar = {
|
|
|
44
45
|
};
|
|
45
46
|
|
|
46
47
|
export type ColorModeConfig = {
|
|
47
|
-
defaultMode:
|
|
48
|
+
defaultMode: ColorMode;
|
|
48
49
|
disableSwitch: boolean;
|
|
49
50
|
respectPrefersColorScheme: boolean;
|
|
50
51
|
};
|