forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
fix(post): resolve dark mode issue
+69
-29
+66
-6
src/components/layout/BaseHead.astro
+66
-6
src/components/layout/BaseHead.astro
···
57
57
<meta property="twitter:description" content={description} />
58
58
<meta property="twitter:image" content={new URL('/chiri-og.png', Astro.url)} />
59
59
60
-
<!-- Transitions Initialization -->
60
+
<!-- Transitions and Theme Initialization -->
61
61
<script is:inline define:vars={{ fadeAnimation: themeConfig.general.fadeAnimation }}>
62
62
function initMotionPref(doc = document) {
63
63
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
···
91
91
doc.documentElement.classList.add('js')
92
92
}
93
93
94
-
initMotionPref()
94
+
// Theme initialization function
95
+
function initTheme(doc = document) {
96
+
const htmlElement = doc.documentElement
97
+
98
+
// Get system theme preference
99
+
function getSystemTheme() {
100
+
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
101
+
return isDark ? 'dark' : 'light'
102
+
}
103
+
104
+
// Get current actual theme state
105
+
function getCurrentTheme() {
106
+
const hasLight = htmlElement.classList.contains('light')
107
+
const hasDark = htmlElement.classList.contains('dark')
108
+
109
+
if (hasLight) {
110
+
return 'light'
111
+
}
112
+
if (hasDark) {
113
+
return 'dark'
114
+
}
115
+
116
+
const systemTheme = getSystemTheme()
117
+
return systemTheme
118
+
}
119
+
120
+
// Apply theme
121
+
function applyTheme(theme) {
122
+
htmlElement.classList.remove('light', 'dark')
123
+
124
+
if (theme === 'dark') {
125
+
htmlElement.classList.add('dark')
126
+
} else {
127
+
htmlElement.classList.add('light')
128
+
}
129
+
}
130
+
131
+
// Initialize theme - ensure explicit classes are always present
132
+
function initThemeState() {
133
+
const systemTheme = getSystemTheme()
134
+
applyTheme(systemTheme)
135
+
}
136
+
137
+
// Listen for system theme changes
138
+
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
139
+
mediaQuery.addEventListener('change', function (e) {
140
+
const newTheme = e.matches ? 'dark' : 'light'
141
+
applyTheme(newTheme)
142
+
})
143
+
144
+
// Initialize theme state
145
+
initThemeState()
146
+
}
147
+
148
+
// Initialize both motion preferences and theme
149
+
function initAll(doc = document) {
150
+
initMotionPref(doc)
151
+
initTheme(doc)
152
+
}
153
+
154
+
initAll()
95
155
96
156
document.addEventListener('astro:before-swap', ({ newDocument }) => {
97
-
initMotionPref(newDocument)
157
+
initAll(newDocument)
98
158
})
99
159
100
160
document.addEventListener('astro:page-load', () => {
101
-
initMotionPref()
161
+
initAll()
102
162
})
103
163
104
164
document.addEventListener('visibilitychange', () => {
105
165
if (document.visibilityState === 'visible') {
106
-
initMotionPref()
166
+
initAll()
107
167
}
108
168
})
109
169
110
170
window.addEventListener('pageshow', () => {
111
-
initMotionPref()
171
+
initAll()
112
172
})
113
173
</script>
+3
-23
src/components/ui/ThemeToggle.astro
+3
-23
src/components/ui/ThemeToggle.astro
···
15
15
window.addEventListener('DOMContentLoaded', function () {
16
16
const htmlElement = document.documentElement
17
17
18
-
// Get system theme preference
19
-
function getSystemTheme() {
20
-
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
21
-
return isDark ? 'dark' : 'light'
22
-
}
23
-
24
18
// Get current actual theme state
25
19
function getCurrentTheme() {
26
20
const hasLight = htmlElement.classList.contains('light')
···
33
27
return 'dark'
34
28
}
35
29
36
-
const systemTheme = getSystemTheme()
37
-
return systemTheme
30
+
// Fallback to system theme
31
+
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
32
+
return isDark ? 'dark' : 'light'
38
33
}
39
34
40
35
// Apply theme
···
48
43
}
49
44
}
50
45
51
-
// Initialize theme - ensure explicit classes are always present
52
-
function initTheme() {
53
-
const systemTheme = getSystemTheme()
54
-
applyTheme(systemTheme)
55
-
}
56
-
57
-
// Listen for system theme changes
58
-
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
59
-
mediaQuery.addEventListener('change', function (e) {
60
-
const newTheme = e.matches ? 'dark' : 'light'
61
-
applyTheme(newTheme)
62
-
})
63
-
64
46
// Get theme toggle button (only if it exists)
65
47
const themeToggle = document.getElementById('theme-toggle')
66
48
if (themeToggle) {
···
77
59
toggleTheme()
78
60
})
79
61
}
80
-
81
-
initTheme()
82
62
})
83
63
</script>
84
64