@docusaurus/theme-classic 0.0.0-5934 → 0.0.0-5938

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.
Files changed (3) hide show
  1. package/lib/index.js +44 -40
  2. package/package.json +14 -14
  3. package/src/index.ts +50 -41
package/lib/index.js CHANGED
@@ -15,54 +15,58 @@ const theme_translations_1 = require("@docusaurus/theme-translations");
15
15
  const translations_1 = require("./translations");
16
16
  const requireFromDocusaurusCore = (0, module_1.createRequire)(require.resolve('@docusaurus/core/package.json'));
17
17
  const ContextReplacementPlugin = requireFromDocusaurusCore('webpack/lib/ContextReplacementPlugin');
18
- // Need to be inlined to prevent dark mode FOUC
19
- // Make sure the key is the same as the one in `/theme/hooks/useTheme.js`
20
- const ThemeStorageKey = 'theme';
21
18
  // Support for ?docusaurus-theme=dark
22
19
  const ThemeQueryStringKey = 'docusaurus-theme';
23
20
  // Support for ?docusaurus-data-mode=embed&docusaurus-data-myAttr=42
24
21
  const DataQueryStringPrefixKey = 'docusaurus-data-';
25
- const noFlashColorMode = ({ defaultMode, respectPrefersColorScheme, }) =>
26
- /* language=js */
27
- `(function() {
28
- var defaultMode = '${defaultMode}';
29
- var respectPrefersColorScheme = ${respectPrefersColorScheme};
22
+ const noFlashColorMode = ({ colorMode: { defaultMode, respectPrefersColorScheme }, siteStorage, }) => {
23
+ // Need to be inlined to prevent dark mode FOUC
24
+ // Make sure the key is the same as the one in the color mode React context
25
+ // Currently defined in: `docusaurus-theme-common/src/contexts/colorMode.tsx`
26
+ const themeStorageKey = `theme${siteStorage.namespace}`;
27
+ /* language=js */
28
+ return `(function() {
29
+ var defaultMode = '${defaultMode}';
30
+ var respectPrefersColorScheme = ${respectPrefersColorScheme};
30
31
 
31
- function setDataThemeAttribute(theme) {
32
- document.documentElement.setAttribute('data-theme', theme);
33
- }
32
+ function setDataThemeAttribute(theme) {
33
+ document.documentElement.setAttribute('data-theme', theme);
34
+ }
34
35
 
35
- function getQueryStringTheme() {
36
- try {
37
- return new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
38
- } catch(e) {}
39
- }
36
+ function getQueryStringTheme() {
37
+ try {
38
+ return new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
39
+ } catch (e) {
40
+ }
41
+ }
40
42
 
41
- function getStoredTheme() {
42
- try {
43
- return localStorage.getItem('${ThemeStorageKey}');
44
- } catch (err) {}
45
- }
43
+ function getStoredTheme() {
44
+ try {
45
+ return window['${siteStorage.type}'].getItem('${themeStorageKey}');
46
+ } catch (err) {
47
+ }
48
+ }
46
49
 
47
- var initialTheme = getQueryStringTheme() || getStoredTheme();
48
- if (initialTheme !== null) {
49
- setDataThemeAttribute(initialTheme);
50
- } else {
51
- if (
52
- respectPrefersColorScheme &&
53
- window.matchMedia('(prefers-color-scheme: dark)').matches
54
- ) {
55
- setDataThemeAttribute('dark');
56
- } else if (
57
- respectPrefersColorScheme &&
58
- window.matchMedia('(prefers-color-scheme: light)').matches
59
- ) {
60
- setDataThemeAttribute('light');
50
+ var initialTheme = getQueryStringTheme() || getStoredTheme();
51
+ if (initialTheme !== null) {
52
+ setDataThemeAttribute(initialTheme);
61
53
  } else {
62
- setDataThemeAttribute(defaultMode === 'dark' ? 'dark' : 'light');
54
+ if (
55
+ respectPrefersColorScheme &&
56
+ window.matchMedia('(prefers-color-scheme: dark)').matches
57
+ ) {
58
+ setDataThemeAttribute('dark');
59
+ } else if (
60
+ respectPrefersColorScheme &&
61
+ window.matchMedia('(prefers-color-scheme: light)').matches
62
+ ) {
63
+ setDataThemeAttribute('light');
64
+ } else {
65
+ setDataThemeAttribute(defaultMode === 'dark' ? 'dark' : 'light');
66
+ }
63
67
  }
64
- }
65
- })();`;
68
+ })();`;
69
+ };
66
70
  /* language=js */
67
71
  const DataAttributeQueryStringInlineJavaScript = `
68
72
  (function() {
@@ -101,7 +105,7 @@ function getInfimaCSSFile(direction) {
101
105
  return `infima/dist/css/default/default${direction === 'rtl' ? '-rtl' : ''}.css`;
102
106
  }
103
107
  function themeClassic(context, options) {
104
- const { i18n: { currentLocale, localeConfigs }, } = context;
108
+ const { i18n: { currentLocale, localeConfigs }, siteStorage, } = context;
105
109
  const themeConfig = context.siteConfig.themeConfig;
106
110
  const { announcementBar, colorMode, prism: { additionalLanguages }, } = themeConfig;
107
111
  const { customCss } = options;
@@ -171,7 +175,7 @@ function themeClassic(context, options) {
171
175
  {
172
176
  tagName: 'script',
173
177
  innerHTML: `
174
- ${noFlashColorMode(colorMode)}
178
+ ${noFlashColorMode({ colorMode, siteStorage })}
175
179
  ${DataAttributeQueryStringInlineJavaScript}
176
180
  ${announcementBar ? AnnouncementBarInlineJavaScript : ''}
177
181
  `,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@docusaurus/theme-classic",
3
- "version": "0.0.0-5934",
3
+ "version": "0.0.0-5938",
4
4
  "description": "Classic theme for Docusaurus",
5
5
  "main": "lib/index.js",
6
6
  "types": "src/theme-classic.d.ts",
@@ -20,18 +20,18 @@
20
20
  "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
21
21
  },
22
22
  "dependencies": {
23
- "@docusaurus/core": "0.0.0-5934",
24
- "@docusaurus/mdx-loader": "0.0.0-5934",
25
- "@docusaurus/module-type-aliases": "0.0.0-5934",
26
- "@docusaurus/plugin-content-blog": "0.0.0-5934",
27
- "@docusaurus/plugin-content-docs": "0.0.0-5934",
28
- "@docusaurus/plugin-content-pages": "0.0.0-5934",
29
- "@docusaurus/theme-common": "0.0.0-5934",
30
- "@docusaurus/theme-translations": "0.0.0-5934",
31
- "@docusaurus/types": "0.0.0-5934",
32
- "@docusaurus/utils": "0.0.0-5934",
33
- "@docusaurus/utils-common": "0.0.0-5934",
34
- "@docusaurus/utils-validation": "0.0.0-5934",
23
+ "@docusaurus/core": "0.0.0-5938",
24
+ "@docusaurus/mdx-loader": "0.0.0-5938",
25
+ "@docusaurus/module-type-aliases": "0.0.0-5938",
26
+ "@docusaurus/plugin-content-blog": "0.0.0-5938",
27
+ "@docusaurus/plugin-content-docs": "0.0.0-5938",
28
+ "@docusaurus/plugin-content-pages": "0.0.0-5938",
29
+ "@docusaurus/theme-common": "0.0.0-5938",
30
+ "@docusaurus/theme-translations": "0.0.0-5938",
31
+ "@docusaurus/types": "0.0.0-5938",
32
+ "@docusaurus/utils": "0.0.0-5938",
33
+ "@docusaurus/utils-common": "0.0.0-5938",
34
+ "@docusaurus/utils-validation": "0.0.0-5938",
35
35
  "@mdx-js/react": "^3.0.0",
36
36
  "clsx": "^2.0.0",
37
37
  "copy-text-to-clipboard": "^3.2.0",
@@ -61,5 +61,5 @@
61
61
  "engines": {
62
62
  "node": ">=18.0"
63
63
  },
64
- "gitHead": "e5fc3801fc9b646c2dbaab6ae024a74344be0bb4"
64
+ "gitHead": "05801ec2481c5f73abb6085e50dda53aa70bbac9"
65
65
  }
package/src/index.ts CHANGED
@@ -10,7 +10,7 @@ import {createRequire} from 'module';
10
10
  import rtlcss from 'rtlcss';
11
11
  import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
12
12
  import {getTranslationFiles, translateThemeConfig} from './translations';
13
- import type {LoadContext, Plugin} from '@docusaurus/types';
13
+ import type {LoadContext, Plugin, SiteStorage} from '@docusaurus/types';
14
14
  import type {ThemeConfig} from '@docusaurus/theme-common';
15
15
  import type {Plugin as PostCssPlugin} from 'postcss';
16
16
  import type {PluginOptions} from '@docusaurus/theme-classic';
@@ -23,58 +23,66 @@ const ContextReplacementPlugin = requireFromDocusaurusCore(
23
23
  'webpack/lib/ContextReplacementPlugin',
24
24
  ) as typeof webpack.ContextReplacementPlugin;
25
25
 
26
- // Need to be inlined to prevent dark mode FOUC
27
- // Make sure the key is the same as the one in `/theme/hooks/useTheme.js`
28
- const ThemeStorageKey = 'theme';
29
26
  // Support for ?docusaurus-theme=dark
30
27
  const ThemeQueryStringKey = 'docusaurus-theme';
31
28
  // Support for ?docusaurus-data-mode=embed&docusaurus-data-myAttr=42
32
29
  const DataQueryStringPrefixKey = 'docusaurus-data-';
33
30
 
34
31
  const noFlashColorMode = ({
35
- defaultMode,
36
- respectPrefersColorScheme,
37
- }: ThemeConfig['colorMode']) =>
32
+ colorMode: {defaultMode, respectPrefersColorScheme},
33
+ siteStorage,
34
+ }: {
35
+ colorMode: ThemeConfig['colorMode'];
36
+ siteStorage: SiteStorage;
37
+ }) => {
38
+ // Need to be inlined to prevent dark mode FOUC
39
+ // Make sure the key is the same as the one in the color mode React context
40
+ // Currently defined in: `docusaurus-theme-common/src/contexts/colorMode.tsx`
41
+ const themeStorageKey = `theme${siteStorage.namespace}`;
42
+
38
43
  /* language=js */
39
- `(function() {
40
- var defaultMode = '${defaultMode}';
41
- var respectPrefersColorScheme = ${respectPrefersColorScheme};
44
+ return `(function() {
45
+ var defaultMode = '${defaultMode}';
46
+ var respectPrefersColorScheme = ${respectPrefersColorScheme};
42
47
 
43
- function setDataThemeAttribute(theme) {
44
- document.documentElement.setAttribute('data-theme', theme);
45
- }
48
+ function setDataThemeAttribute(theme) {
49
+ document.documentElement.setAttribute('data-theme', theme);
50
+ }
46
51
 
47
- function getQueryStringTheme() {
48
- try {
49
- return new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
50
- } catch(e) {}
51
- }
52
+ function getQueryStringTheme() {
53
+ try {
54
+ return new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
55
+ } catch (e) {
56
+ }
57
+ }
52
58
 
53
- function getStoredTheme() {
54
- try {
55
- return localStorage.getItem('${ThemeStorageKey}');
56
- } catch (err) {}
57
- }
59
+ function getStoredTheme() {
60
+ try {
61
+ return window['${siteStorage.type}'].getItem('${themeStorageKey}');
62
+ } catch (err) {
63
+ }
64
+ }
58
65
 
59
- var initialTheme = getQueryStringTheme() || getStoredTheme();
60
- if (initialTheme !== null) {
61
- setDataThemeAttribute(initialTheme);
62
- } else {
63
- if (
64
- respectPrefersColorScheme &&
65
- window.matchMedia('(prefers-color-scheme: dark)').matches
66
- ) {
67
- setDataThemeAttribute('dark');
68
- } else if (
69
- respectPrefersColorScheme &&
70
- window.matchMedia('(prefers-color-scheme: light)').matches
71
- ) {
72
- setDataThemeAttribute('light');
66
+ var initialTheme = getQueryStringTheme() || getStoredTheme();
67
+ if (initialTheme !== null) {
68
+ setDataThemeAttribute(initialTheme);
73
69
  } else {
74
- setDataThemeAttribute(defaultMode === 'dark' ? 'dark' : 'light');
70
+ if (
71
+ respectPrefersColorScheme &&
72
+ window.matchMedia('(prefers-color-scheme: dark)').matches
73
+ ) {
74
+ setDataThemeAttribute('dark');
75
+ } else if (
76
+ respectPrefersColorScheme &&
77
+ window.matchMedia('(prefers-color-scheme: light)').matches
78
+ ) {
79
+ setDataThemeAttribute('light');
80
+ } else {
81
+ setDataThemeAttribute(defaultMode === 'dark' ? 'dark' : 'light');
82
+ }
75
83
  }
76
- }
77
- })();`;
84
+ })();`;
85
+ };
78
86
 
79
87
  /* language=js */
80
88
  const DataAttributeQueryStringInlineJavaScript = `
@@ -126,6 +134,7 @@ export default function themeClassic(
126
134
  ): Plugin<undefined> {
127
135
  const {
128
136
  i18n: {currentLocale, localeConfigs},
137
+ siteStorage,
129
138
  } = context;
130
139
  const themeConfig = context.siteConfig.themeConfig as ThemeConfig;
131
140
  const {
@@ -218,7 +227,7 @@ export default function themeClassic(
218
227
  {
219
228
  tagName: 'script',
220
229
  innerHTML: `
221
- ${noFlashColorMode(colorMode)}
230
+ ${noFlashColorMode({colorMode, siteStorage})}
222
231
  ${DataAttributeQueryStringInlineJavaScript}
223
232
  ${announcementBar ? AnnouncementBarInlineJavaScript : ''}
224
233
  `,