diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 68d0180a..96f57c27 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -90,6 +90,12 @@ jobs:
- run: npm ci
- run: npx playwright install --with-deps
- run: npm run test:e2e
+ - uses: actions/upload-artifact@v4
+ if: always()
+ with:
+ name: playwright-report-${{ matrix.os }}-${{ matrix.node }}
+ path: playwright-report/
+ retention-days: 30
build:
strategy:
diff --git a/src/components/ThemeSwitch/theme.cjs b/src/components/ThemeSwitch/theme.cjs
index 77272b67..4c1cb771 100644
--- a/src/components/ThemeSwitch/theme.cjs
+++ b/src/components/ThemeSwitch/theme.cjs
@@ -1,5 +1,4 @@
const htmlEl = document.documentElement
-const themeToggle = document.querySelector('#toggle')
const currentTheme = localStorage.getItem('@kremalicious/theme')
function getPreferTheme() {
@@ -17,11 +16,6 @@ function getThemeColor(theme) {
let themeValue = getPreferTheme()
let themeColor = getThemeColor(themeValue)
-function setPreference() {
- localStorage.setItem('@kremalicious/theme', themeValue)
- reflectPreference()
-}
-
function reflectPreference() {
const sun = document.querySelector('#sun')
const moon = document.querySelector('#moon')
@@ -35,6 +29,7 @@ function reflectPreference() {
metaThemeColor?.setAttribute('content', themeColor)
metaThemeColorMs?.setAttribute('content', themeColor)
+ const themeToggle = document.querySelector('#theme-toggle')
themeToggle?.setAttribute('checked', `${themeValue === 'dark'}`)
if (themeValue === 'dark') {
@@ -46,29 +41,34 @@ function reflectPreference() {
}
}
-function themeInit() {
- // set early so no page flashes / CSS is made aware
+function setPreference() {
+ localStorage.setItem('@kremalicious/theme', themeValue)
+ reflectPreference()
+}
+
+// set early so no page flashes / CSS is made aware
+reflectPreference()
+
+window.onload = () => {
+ // set on load again so screen readers
+ // can get the latest value on the button
reflectPreference()
- window.onload = () => {
- // set on load so screen readers can get the latest value on the button
- reflectPreference()
+ const themeToggle = document.querySelector('#theme-toggle')
- themeToggle?.addEventListener('change', () => {
- themeValue = themeValue === 'light' ? 'dark' : 'light'
+ themeToggle?.addEventListener('change', () => {
+ console.log('themeToggle change')
+ themeValue = themeValue === 'light' ? 'dark' : 'light'
+ themeColor = getThemeColor(themeValue)
+ setPreference()
+ })
+
+ // sync with system changes
+ window
+ .matchMedia('(prefers-color-scheme: dark)')
+ .addEventListener('change', ({ matches: isDark }) => {
+ themeValue = isDark ? 'dark' : 'light'
themeColor = getThemeColor(themeValue)
setPreference()
})
-
- // sync with system changes
- window
- .matchMedia('(prefers-color-scheme: dark)')
- .addEventListener('change', ({ matches: isDark }) => {
- themeValue = isDark ? 'dark' : 'light'
- themeColor = getThemeColor(themeValue)
- setPreference()
- })
- }
}
-
-themeInit()
diff --git a/src/layouts/Base/Head.astro b/src/layouts/Base/Head.astro
index 2248d3d1..f0ae26cd 100644
--- a/src/layouts/Base/Head.astro
+++ b/src/layouts/Base/Head.astro
@@ -119,7 +119,9 @@ const faviconSvg = await getImage({ src: faviconSvgSrc, format: 'svg' })
)
}
-
+ {
+ /* src/components/ThemeSwitch/theme.cjs is symlinked to public/theme.js before build */
+ }
{style && }