Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - take browser preferences into account for dark mode

Browse Source
This commit is contained in:
Sam 2023-12-17 10:07:19 +01:00
parent 4c5a5f3d23
commit 816296c976
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
fittrackee_client/src/components/NavBar.vue
View File

@ -136,9 +136,7 @@
const darkMode: ComputedRef<boolean | null> = computed( const darkMode: ComputedRef<boolean | null> = computed(
() => store.getters[ROOT_STORE.GETTERS.DARK_MODE] () => store.getters[ROOT_STORE.GETTERS.DARK_MODE]
) )
const darkTheme: ComputedRef<boolean> = computed( const darkTheme: ComputedRef<boolean> = computed(() => getDarkTheme())
() => darkMode.value !== false
)
const themeIcon: ComputedRef<string> = computed(() => const themeIcon: ComputedRef<string> = computed(() =>
darkTheme.value ? 'fa-moon' : 'fa-sun' darkTheme.value ? 'fa-moon' : 'fa-sun'
) )
@ -166,6 +164,15 @@
function updateDisplayModal(display: boolean) { function updateDisplayModal(display: boolean) {
displayModal.value = display displayModal.value = display
} }
function getDarkTheme() {
if (
darkMode.value === null &&
window.matchMedia('(prefers-color-scheme: dark)').matches
) {
return true
}
return darkMode.value === true
}
function setTheme() { function setTheme() {
if (darkTheme.value) { if (darkTheme.value) {
document.body.setAttribute('data-theme', 'dark') document.body.setAttribute('data-theme', 'dark')