@@ -26,74 +26,76 @@ const { defaultThemeIdJson, darkThemeIdJson, metaColorsJson } = themeData()
2626 }}
2727>
2828 // @ts-nocheck
29- document.addEventListener(
30- 'DOMContentLoaded',
31- () => {
32- /**
33- * This code is only for initial page load from the site. DOMContentLoaded does
34- * not fire when using the Astro View Transitions API for page navigation, so
35- * the themes store defines a side effect to set up an event listener for the
36- * "astro:before-swap" event.
37- */
38- try {
39- const defaultThemeId = JSON.parse(defaultThemeIdJson)
40- const darkThemeId = JSON.parse(darkThemeIdJson)
41- const themeMetaColors = JSON.parse(metaColorsJson)
29+ const runThemeInit = () => {
30+ /**
31+ * This code is only for initial page load from the site. DOMContentLoaded does
32+ * not fire when using the Astro View Transitions API for page navigation, so
33+ * the themes store defines a side effect to set up an event listener for the
34+ * "astro:before-swap" event.
35+ */
36+ try {
37+ const defaultThemeId = JSON.parse(defaultThemeIdJson)
38+ const darkThemeId = JSON.parse(darkThemeIdJson)
39+ const themeMetaColors = JSON.parse(metaColorsJson)
40+
41+ /** 1. Read theme preference from localStorage (set by user's previous selection) */
42+ const stored = localStorage.getItem('theme')
4243
43- /** 1. Read theme preference from localStorage (set by user's previous selection) */
44- const stored = localStorage.getItem('theme')
44+ if (stored && stored !== defaultThemeId) {
45+ /** User explicitly chose a theme - apply it immediately */
46+ /** <html> element */
47+ document.documentElement.dataset['theme'] = stored
48+ } else if (!stored) {
49+ /** No stored preference - use system preference */
50+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
51+ /** <html> element */
52+ document.documentElement.dataset['theme'] = prefersDark ? darkThemeId : defaultThemeId
53+ }
4554
46- if (stored && stored !== defaultThemeId) {
47- /** User explicitly chose a theme - apply it immediately */
48- /** <html> element */
49- document.documentElement.dataset['theme'] = stored
50- } else if (!stored) {
51- /** No stored preference - use system preference */
52- const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
53- /** <html> element */
54- document.documentElement.dataset['theme'] = prefersDark ? darkThemeId : defaultThemeId
55- }
55+ /** 2. Turn <body> visible. It's set to hidden in BaseLayout.astro to avoid FOUC. Do
56+ * here to make sure it gets turned on, in case the <meta> element selector throws.
57+ */
58+ document.body.classList.remove('invisible')
5659
57- /** 2. Turn <body> visible. It's set to hidden in BaseLayout.astro to avoid FOUC. Do
58- * here to make sure it gets turned on, in case the <meta> element selector throws.
59- */
60- document.body.classList.remove('invisible')
60+ /** 3. Add theme entries from src/content/themes.json to the window.metaColors object */
61+ window.metaColors = window.metaColors || {}
62+ Object.assign(window.metaColors, themeMetaColors)
6163
62- /** 3. Add theme entries from src/content/themes.json to the window.metaColors object */
63- window.metaColors = window.metaColors || {}
64- Object.assign(window.metaColors, themeMetaColors)
64+ /** 4. Update meta theme-color used for PWAs */
65+ const metaElement = document.querySelector('meta[name="theme-color"]')
66+ if (stored && stored !== defaultThemeId && metaElement && window.metaColors) {
67+ /** User explicitly chose a theme - apply it immediately */
68+ metaElement.setAttribute('content', window.metaColors[stored] || '')
69+ } else if (!stored && metaElement && window.metaColors) {
70+ /** No stored preference - use system preference */
71+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
72+ metaElement.setAttribute(
73+ 'content',
74+ window.metaColors[prefersDark ? darkThemeId : defaultThemeId] || ''
75+ )
76+ }
6577
66- /** 4. Update meta theme-color used for PWAs */
67- const metaElement = document.querySelector('meta[name="theme-color"]')
68- if (stored && stored !== defaultThemeId && metaElement && window.metaColors) {
69- /** User explicitly chose a theme - apply it immediately */
70- metaElement.setAttribute('content', window.metaColors[stored] || '')
71- } else if (!stored && metaElement && window.metaColors) {
72- /** No stored preference - use system preference */
73- const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
74- metaElement.setAttribute(
75- 'content',
76- window.metaColors[prefersDark ? darkThemeId : defaultThemeId] || ''
77- )
78- }
78+ /**
79+ * 5. If stored === defaultThemeId, BaseLayout.astro already set it
80+ * on <html> data-theme attribute and Meta.astro already set it on
81+ * <meta name="theme-color">, so nothing to do
82+ */
7983
80- /**
81- * 5. If stored === defaultThemeId, BaseLayout.astro already set it
82- * on <html> data-theme attribute and Meta.astro already set it on
83- * <meta name="theme-color">, so nothing to do
84- */
84+ /** 6. Success! */
85+ console.log('🎨 Theme init on initial load executed')
86+ } catch (error) {
87+ /** localStorage access can fail (privacy mode, etc.) */
88+ /** Fall back to BaseLayout's data-theme="light", make sure the page is visible */
89+ document.body.classList.remove('invisible')
90+ console.error('❌ Theme init on initial load failed with errors:', error)
91+ }
92+ }
8593
86- /** 6. Success! */
87- console.log('🎨 Theme init on "DOMContentLoaded" executed')
88- } catch (error) {
89- /** localStorage access can fail (privacy mode, etc.) */
90- /** Fall back to BaseLayout's data-theme="light", make sure the page is visible */
91- document.body.classList.remove('invisible')
92- console.error('❌ Theme init on "DOMContentLoaded" failed with errors:', error)
93- }
94- },
95- { once: true }
96- )
94+ if (document.readyState === 'loading') {
95+ document.addEventListener('DOMContentLoaded', runThemeInit, { once: true })
96+ } else {
97+ runThemeInit()
98+ }
9799
98100 /**
99101 * Add the fast theme setting logic for Astro View Transition API navigation events.
0 commit comments