allow user to toggle dark mode setting and persist to localstorage

2025-12-01 23:25:50 +01:00 · 2024-02-07 20:50:30 +10:00
parent 1cb011c54c
commit a392bdea34
3 changed files with 49 additions and 6 deletions
@@ -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>

@@ -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" />
@@ -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>