update

frontend/index.html

@@ -6,10 +6,10 @@
     <title>Planer2</title>
     <script>
       (function () {
-        var stored = localStorage.getItem('darkMode')
+        var modus = localStorage.getItem('darkModus')
-        var dark = stored === null
+        var dark = modus === 'hell' || modus === 'dunkel'
-          ? window.matchMedia('(prefers-color-scheme: dark)').matches
+          ? modus === 'dunkel'
-          : stored === 'true'
+          : window.matchMedia('(prefers-color-scheme: dark)').matches
         if (dark) document.documentElement.classList.add('dark')
       })()
     </script>

frontend/src/App.vue

@@ -10,7 +10,15 @@ import { offen as pruefungOffen, starte as startePruefung, schliesse as schliess
 const projekte = ref([])
 const aktivesProjekt = ref(null)
 const meldung = ref('')
-const dunkel = ref(document.documentElement.classList.contains('dark'))
+
+// Drei Modi im Kreis; „auto" folgt der Systemeinstellung
+const MODI = ['auto', 'hell', 'dunkel']
+const ICONS = { auto: 'A', hell: '☀', dunkel: '☾' }
+const TITEL = { auto: 'Systemeinstellung', hell: 'Hellmodus', dunkel: 'Dunkelmodus' }
+
+const systemDunkel = window.matchMedia('(prefers-color-scheme: dark)')
+const gemerkterModus = localStorage.getItem('darkModus')
+const modus = ref(MODI.includes(gemerkterModus) ? gemerkterModus : 'auto')
 
 async function ladeProjekte() {
   meldung.value = ''
@@ -40,12 +48,20 @@ watch(aktivesProjekt, name => {
   else localStorage.removeItem('aktivesProjekt')
 })
 
-function wechsleDarkMode() {
+function wendeAn() {
-  dunkel.value = !dunkel.value
+  const dunkel = modus.value === 'auto' ? systemDunkel.matches : modus.value === 'dunkel'
-  document.documentElement.classList.toggle('dark', dunkel.value)
+  document.documentElement.classList.toggle('dark', dunkel)
-  localStorage.setItem('darkMode', dunkel.value)
 }
 
+function wechsleDarkMode() {
+  modus.value = MODI[(MODI.indexOf(modus.value) + 1) % MODI.length]
+  localStorage.setItem('darkModus', modus.value)
+  wendeAn()
+}
+
+// Systemwechsel wirkt sofort, solange „auto" aktiv ist
+systemDunkel.addEventListener('change', () => { if (modus.value === 'auto') wendeAn() })
+
 onMounted(async () => {
   await ladeProjekte()
   const gemerkt = localStorage.getItem('aktivesProjekt')
@@ -70,8 +86,8 @@ onMounted(async () => {
         title="Karten prüfen"
         @click="startePruefung(aktivesProjekt)"
       >⌾</button>
-      <button class="icon-knopf" :title="dunkel ? 'Hellmodus' : 'Dunkelmodus'" @click="wechsleDarkMode">
+      <button class="icon-knopf" :title="TITEL[modus]" @click="wechsleDarkMode">
-        {{ dunkel ? '☀' : '☾' }}
+        {{ ICONS[modus] }}
       </button>
     </SeitenLeiste>