Client - take browser preferences into account for dark mode
This commit is contained in:
parent
4c5a5f3d23
commit
816296c976
@ -136,9 +136,7 @@
|
||||
const darkMode: ComputedRef<boolean | null> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.DARK_MODE]
|
||||
)
|
||||
const darkTheme: ComputedRef<boolean> = computed(
|
||||
() => darkMode.value !== false
|
||||
)
|
||||
const darkTheme: ComputedRef<boolean> = computed(() => getDarkTheme())
|
||||
const themeIcon: ComputedRef<string> = computed(() =>
|
||||
darkTheme.value ? 'fa-moon' : 'fa-sun'
|
||||
)
|
||||
@ -166,6 +164,15 @@
|
||||
function updateDisplayModal(display: boolean) {
|
||||
displayModal.value = display
|
||||
}
|
||||
function getDarkTheme() {
|
||||
if (
|
||||
darkMode.value === null &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
) {
|
||||
return true
|
||||
}
|
||||
return darkMode.value === true
|
||||
}
|
||||
function setTheme() {
|
||||
if (darkTheme.value) {
|
||||
document.body.setAttribute('data-theme', 'dark')
|
||||
|
Loading…
Reference in New Issue
Block a user