From 1330da1fe24c2caf9b443276e37e0e587a9f46c9 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Mon, 8 Mar 2021 10:32:31 +0100 Subject: [PATCH] docs: follow prefered user scheme --- docs/.vitepress/components/ThemeToggle.vue | 24 ++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/docs/.vitepress/components/ThemeToggle.vue b/docs/.vitepress/components/ThemeToggle.vue index 7147ddc2..dbb13e11 100644 --- a/docs/.vitepress/components/ThemeToggle.vue +++ b/docs/.vitepress/components/ThemeToggle.vue @@ -60,16 +60,20 @@ import { computed, onMounted, ref, watchEffect } from 'vue' const isBrowser = typeof window !== 'undefined' +const PREFERS_LIGHT = '(prefers-color-scheme: light)' + function isDarkMode() { - const htmlElement = document.body.parentElement! - return !htmlElement.classList.contains('light') + if (!isBrowser) return true + + const storedTheme = localStorage.getItem(storageKey) + if (storedTheme != null) return storedTheme !== 'light' + + return !window.matchMedia(PREFERS_LIGHT).matches } const storageKey = 'pinia-color-scheme' -const localIsDark = ref( - isBrowser ? localStorage.getItem(storageKey) !== 'light' : true -) +const localIsDark = ref(isDarkMode()) const isDark = computed({ get() { @@ -88,9 +92,17 @@ const label = computed(() => onMounted(() => { window.addEventListener('storage', () => { const storedScheme = localStorage.getItem(storageKey) - isDark.value = storedScheme !== 'light' + localIsDark.value = storedScheme !== 'light' }) + const mediaQuery = window.matchMedia(PREFERS_LIGHT) + + if ('addEventListener' in mediaQuery) { + mediaQuery.addEventListener('change', (event) => { + localIsDark.value = !event.matches + }) + } + watchEffect(() => { const htmlElement = document.body.parentElement! if (isDark.value) { -- 2.47.2