altf4arnold/datatracker
1
0
Fork 0
Code Issues Pull requests Actions 4 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
// --------------------------------------------------------------------
const desiredTheme = window.localStorage?.getItem('theme')
if (desiredTheme === 'dark') {
siteStore.theme = 'dark'
} else if (desiredTheme === 'light') {
siteStore.theme = 'light'
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
siteStore.theme = 'dark'
} else {
siteStore.theme = 'light'
function updateTheme() {
const desiredTheme = window.localStorage?.getItem('theme')
if (desiredTheme === 'dark') {
siteStore.theme = 'dark'
} else if (desiredTheme === 'light') {
siteStore.theme = 'light'
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
siteStore.theme = 'dark'
} 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
// --------------------------------------------------------------------