altf4arnold/datatracker
1
0
Fork 0
Code Issues Pull requests Actions 3 Packages Projects Releases Wiki Activity

feat: change theme dynamically when system preferences change (#7956)

Browse source
This commit is contained in:
Matthew Holloway 2024-09-25 03:53:08 +12:00 committed by GitHub
parent 5581dc79e1
commit 5ea4cc13bb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 16 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
client/App.vue
View file

@ -30,17 +30,24 @@ const appContainer = ref(null)
// Set user theme // Set user theme
// -------------------------------------------------------------------- // --------------------------------------------------------------------
const desiredTheme = window.localStorage?.getItem('theme') function updateTheme() {
if (desiredTheme === 'dark') { const desiredTheme = window.localStorage?.getItem('theme')
siteStore.theme = 'dark' if (desiredTheme === 'dark') {
} else if (desiredTheme === 'light') { siteStore.theme = 'dark'
siteStore.theme = 'light' } else if (desiredTheme === 'light') {
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) { siteStore.theme = 'light'
siteStore.theme = 'dark' } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
} else { siteStore.theme = 'dark'
siteStore.theme = 'light' } else {
siteStore.theme = 'light'
}
} }
updateTheme()
// this change event fires for either light or dark changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
// -------------------------------------------------------------------- // --------------------------------------------------------------------
// Handle browser resize // Handle browser resize
// -------------------------------------------------------------------- // --------------------------------------------------------------------