From 1b9c3cf18f6f9f5cd839c33966633f81d2471803 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Mon, 8 Mar 2021 10:24:58 +0100
Subject: [PATCH] docs: save user colorscheme

---
 docs/.vitepress/components/ThemeToggle.vue | 23 ++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/docs/.vitepress/components/ThemeToggle.vue b/docs/.vitepress/components/ThemeToggle.vue
index 39d4e47b..7147ddc2 100644
--- a/docs/.vitepress/components/ThemeToggle.vue
+++ b/docs/.vitepress/components/ThemeToggle.vue
@@ -65,13 +65,32 @@ function isDarkMode() {
   return !htmlElement.classList.contains('light')
 }
 
-const isDark = ref(isBrowser ? isDarkMode() : true)
+const storageKey = 'pinia-color-scheme'
+
+const localIsDark = ref(
+  isBrowser ? localStorage.getItem(storageKey) !== 'light' : true
+)
+
+const isDark = computed<boolean>({
+  get() {
+    return localIsDark.value
+  },
+  set(isDark) {
+    localStorage.setItem(storageKey, isDark ? 'dark' : 'light')
+    localIsDark.value = isDark
+  },
+})
 
 const label = computed(() =>
   isDark.value ? 'Switch to light mode' : 'Switch to dark mode'
 )
 
 onMounted(() => {
+  window.addEventListener('storage', () => {
+    const storedScheme = localStorage.getItem(storageKey)
+    isDark.value = storedScheme !== 'light'
+  })
+
   watchEffect(() => {
     const htmlElement = document.body.parentElement!
     if (isDark.value) {
@@ -84,7 +103,7 @@ onMounted(() => {
 </script>
 
 <style scoped>
-button {
+.icon-button {
   display: flex;
   font-size: 1.05rem;
   border: 0;
-- 
2.47.2