allow user to toggle dark mode setting and persist to localstorage

pancake3000 · Feb 7, 2024 · a392bde · a392bde
1 parent 1cb011c
commit a392bde
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -13,12 +13,6 @@
 
 <body id="top">
   <div id="app" class="container"></div>
-  <script>
-    if (window.matchMedia &&
-      window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      document.body.classList.add('dark');
-    }
-  </script>
   <script type="module" src="/src/main.js"></script>
 </body>
 

diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,7 @@
 <script setup>
 import './assets/main.css'
 import Header from './components/Header.vue'
+import DarkModeToggle from './components/DarkModeToggle.vue'
 import Summary from './components/Summary.vue'
 import Configuration from './components/Configuration.vue'
 import ThankYou from './components/ThankYou.vue'
@@ -10,6 +11,7 @@ import Footer from './components/Footer.vue'
 
 <template>
   <header>
+    <DarkModeToggle />
     <Header addonName="Stremio Addon Manager"
       addonSummary="Effortlessly manage the order of your Stremio addons without re-installing."
       addonTagline="Including the default Cinemeta catalogs." addonLogo="logo.png" />

diff --git a/src/components/DarkModeToggle.vue b/src/components/DarkModeToggle.vue
@@ -0,0 +1,47 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const darkIcon = '🌙'
+const lightIcon = '☀️'
+let darkEnabled = ref(getDarkModePreference())
+let toggleIcon = ref(darkEnabled.value ? lightIcon : darkIcon)
+
+function getDarkModePreference() {
+    const userSet = localStorage.getItem('darkMode')
+    // User explicit setting takes precedence
+    if (userSet !== null) {
+        return userSet === 'true'
+    } else {
+        // If user has no preference, use system preference
+        if (window.matchMedia &&
+            window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return true
+        }
+    }
+
+    return false
+}
+
+function toggleMode() {
+    darkEnabled.value = !darkEnabled.value
+    localStorage.setItem('darkMode', darkEnabled.value)
+    document.body.classList.toggle('dark')
+    if (darkEnabled.value) {
+        toggleIcon.value = lightIcon
+    } else {
+        toggleIcon.value = darkIcon
+    }
+}
+
+onMounted(() => {
+    if (darkEnabled.value) {
+        document.body.classList.add('dark')
+    }
+})
+</script>
+
+<template>
+    <h1 class="pull-right" style="margin: 0;">
+        <a @click="toggleMode">{{ toggleIcon }}</a>
+    </h1>
+</template>