From 306e54fc4db3301f4af64d7ee1217b7c628ad732 Mon Sep 17 00:00:00 2001
From: Andrea <andrea@avris.it>
Date: Tue, 18 Jan 2022 20:26:21 +0100
Subject: [PATCH] [dark] add "automatic" to the mode switch

---
 components/Footer.vue          |  2 +-
 components/ModeSwitch.vue      | 44 +++++++++++++++++++++-------------
 layouts/basic.vue              |  2 +-
 layouts/default.vue            |  2 +-
 locale/_base/translations.suml |  3 ++-
 locale/de/translations.suml    |  3 ++-
 locale/en/translations.suml    |  3 ++-
 locale/eo/translations.suml    |  3 ++-
 locale/es/translations.suml    |  3 ++-
 locale/fr/translations.suml    |  3 ++-
 locale/gl/translations.suml    |  3 ++-
 locale/ja/translations.suml    |  3 ++-
 locale/lad/translations.suml   |  3 ++-
 locale/nl/translations.suml    |  3 ++-
 locale/no/translations.suml    |  3 ++-
 locale/pl/translations.suml    |  3 ++-
 locale/pt/translations.suml    |  3 ++-
 locale/ru/translations.suml    |  3 ++-
 locale/sv/translations.suml    |  3 ++-
 locale/yi/translations.suml    |  3 ++-
 locale/zh/translations.suml    |  3 ++-
 plugins/dark.js                | 37 ++++++++++++++++------------
 22 files changed, 87 insertions(+), 51 deletions(-)

diff --git a/components/Footer.vue b/components/Footer.vue
index 141d3a02..a9f3e3dc 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -40,7 +40,7 @@
                     </li>
                 </ul>
 
-                <div class="my-2">
+                <div class="mt-2 mb-4 text-center">
                     <ModeSwitch/>
                 </div>
 
diff --git a/components/ModeSwitch.vue b/components/ModeSwitch.vue
index d347cbf9..0e644f94 100644
--- a/components/ModeSwitch.vue
+++ b/components/ModeSwitch.vue
@@ -1,12 +1,12 @@
 <template>
-    <div class="py-2 px-3">
-        <div class="form-check form-switch text-dark">
-            <label>
-                <input class="form-check-input" type="checkbox" v-model="isDark">
-                <Icon :v="isDark ? 'moon' : 'sun'"/>
-                {{ $t('mode.' + (isDark ? 'dark' : 'light')) }}
-            </label>
-        </div>
+    <div class="btn-group" role="group">
+        <button v-for="(buttonIcon, buttonMode) in modes" type="button"
+                :class="['btn', 'btn-sm', mode === buttonMode ? 'btn-primary' : 'btn-outline-primary']"
+                @click="mode = buttonMode"
+        >
+            <Icon :v="buttonIcon"/>
+            <T>mode.{{ buttonMode }}</T>
+        </button>
     </div>
 </template>
 
@@ -17,7 +17,13 @@
         mixins: [dark],
         data() {
             return {
+                mode: 'automatic',
                 isDark: false,
+                modes: {
+                    light: 'sun',
+                    automatic: 'eclipse',
+                    dark: 'moon',
+                }
             }
         },
         mounted() {
@@ -25,20 +31,26 @@
                 return false;
             }
 
+            this.mode = this.getMode();
             this.isDark = this.detectDark();
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => this.isDark = e.matches);
 
-            this.$eventHub.$on('mode-changed', dark => {
-                if (dark !== this.isDark) {
-                    this.isDark = dark;
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => this.isDark = this.detectDark());
+
+            this.$eventHub.$on('mode-changed', mode => {
+                if (mode !== this.mode) {
+                    this.mode = mode;
                 }
             })
         },
         watch: {
-            isDark(dark) {
-                this.$eventHub.$emit('mode-changed', dark);
-                this.setMode(dark);
-                this.$store.commit('setDarkMode', dark);
+            mode() {
+                this.$eventHub.$emit('mode-changed', this.mode);
+                this.setMode(this.mode);
+                this.isDark = this.detectDark();
+            },
+            isDark() {
+                this.setIsDark(this.isDark);
+                this.$store.commit('setDarkMode', this.isDark);
             }
         }
     }
diff --git a/layouts/basic.vue b/layouts/basic.vue
index bdbc0980..bcc87213 100644
--- a/layouts/basic.vue
+++ b/layouts/basic.vue
@@ -10,7 +10,7 @@
     export default {
         mixins: [dark],
         mounted() {
-            this.setMode(this.detectDark());
+            this.setIsDark(this.detectDark());
         }
     }
 </script>
diff --git a/layouts/default.vue b/layouts/default.vue
index a18d7bc5..de37507b 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -42,7 +42,7 @@
                         });
                 });
             };
-            this.setMode(this.detectDark());
+            this.setIsDark(this.detectDark());
 
             if (!process.client) { return; }
 
diff --git a/locale/_base/translations.suml b/locale/_base/translations.suml
index a1ada10f..de671571 100644
--- a/locale/_base/translations.suml
+++ b/locale/_base/translations.suml
@@ -798,8 +798,9 @@ captcha:
     invalid: 'Invalid CAPTCHA, please try again'
 
 mode:
-    dark: 'Dark mode'
     light: 'Light mode'
+    automatic: 'Automatic'
+    dark: 'Dark mode'
 
 ban:
     reason: 'Ban reason'
diff --git a/locale/de/translations.suml b/locale/de/translations.suml
index 4eafc9aa..2f3bda4e 100644
--- a/locale/de/translations.suml
+++ b/locale/de/translations.suml
@@ -707,8 +707,9 @@ captcha:
     invalid: 'Die CAPTCHA-Eingabe war leider ungültig, bitte versuch es erneut.'
 
 mode:
-    dark: 'Dunkelmodus'
     light: 'Lichtmodus'
+    automatic: 'Automatisch'
+    dark: 'Dunkelmodus'
 
 ban:
     reason: 'Grund der Sperrung'
diff --git a/locale/en/translations.suml b/locale/en/translations.suml
index 916a81a6..fbe89d8e 100644
--- a/locale/en/translations.suml
+++ b/locale/en/translations.suml
@@ -851,8 +851,9 @@ captcha:
     invalid: 'Invalid CAPTCHA, please try again'
 
 mode:
-    dark: 'Dark mode'
     light: 'Light mode'
+    automatic: 'Automatic'
+    dark: 'Dark mode'
 
 ban:
     reason: 'Ban reason'
diff --git a/locale/eo/translations.suml b/locale/eo/translations.suml
index 80e8b430..1a711405 100644
--- a/locale/eo/translations.suml
+++ b/locale/eo/translations.suml
@@ -783,8 +783,9 @@ captcha:
     invalid: 'Invalid CAPTCHA, please try again'
 
 mode:
-    dark: 'Dark mode'
     light: 'Light mode'
+    automatic: 'Automatic'
+    dark: 'Dark mode'
 
 ban:
     reason: 'Ban reason'
diff --git a/locale/es/translations.suml b/locale/es/translations.suml
index 0bd11106..cce67d91 100644
--- a/locale/es/translations.suml
+++ b/locale/es/translations.suml
@@ -725,8 +725,9 @@ captcha:
     invalid: 'CAPTCHA no válida, por favor intenta de nuevo'
 
 mode:
-    dark: 'Modo oscuro'
     light: 'Modo claro'
+    automatic: 'Automatico'
+    dark: 'Modo oscuro'
 
 ban:
     reason: 'Razón para banear'
diff --git a/locale/fr/translations.suml b/locale/fr/translations.suml
index 1a4e2490..1f924549 100644
--- a/locale/fr/translations.suml
+++ b/locale/fr/translations.suml
@@ -718,8 +718,9 @@ captcha:
     invalid: 'Captcha invalide, veuillez réessayer'
 
 mode:
-    dark: 'Mode sombre'
     light: 'Mode clair'
+    automatic: 'Automatique'
+    dark: 'Mode sombre'
 
 ban:
     reason: 'Raison du bannissement'
diff --git a/locale/gl/translations.suml b/locale/gl/translations.suml
index 101f91e7..f6b3e9c0 100644
--- a/locale/gl/translations.suml
+++ b/locale/gl/translations.suml
@@ -731,8 +731,9 @@ captcha:
     invalid: 'O Captcha foi invalidado, por favor, tente novamente'
 
 mode:
-    dark: 'Modo escuro'
     light: 'Modo claro'
+    automatic: 'Automatic'  # TODO
+    dark: 'Modo escuro'
 
 ban:
     reason: 'Razão de ban'
diff --git a/locale/ja/translations.suml b/locale/ja/translations.suml
index f5eebb97..6dbd1889 100644
--- a/locale/ja/translations.suml
+++ b/locale/ja/translations.suml
@@ -740,8 +740,9 @@ captcha:
     invalid: 'CAPTCHAが無効です。もう一度お試しください。'
 
 mode:
-    dark: 'ダークモード'
     light: 'ライトモード'
+    automatic: 'Automatic'  # TODO
+    dark: 'ダークモード'
 
 ban:
     reason: '禁止の理由'
diff --git a/locale/lad/translations.suml b/locale/lad/translations.suml
index 771af197..9df1c986 100644
--- a/locale/lad/translations.suml
+++ b/locale/lad/translations.suml
@@ -701,8 +701,9 @@ captcha:
     invalid: 'CAPTCHA enfirma, por favor aprova de muevo'
 
 mode:
-    dark: 'Modo eskuro'
     light: 'Modo klaro'
+    automatic: 'Automatic'
+    dark: 'Modo eskuro'
 
 ban:
     reason: 'Razon para banear'
diff --git a/locale/nl/translations.suml b/locale/nl/translations.suml
index e4e21676..0ba201f8 100644
--- a/locale/nl/translations.suml
+++ b/locale/nl/translations.suml
@@ -721,8 +721,9 @@ captcha:
     invalid: 'Ongeldige CAPTCHA, probeer het alsjeblieft nog een keer.'
 
 mode:
-    dark: 'Donkere modus'
     light: 'Lichte modus'
+    automatic: 'Automatische'
+    dark: 'Donkere modus'
 
 ban:
     reason: 'Reden voor ban'
diff --git a/locale/no/translations.suml b/locale/no/translations.suml
index 664c5bb1..15e4677a 100644
--- a/locale/no/translations.suml
+++ b/locale/no/translations.suml
@@ -727,8 +727,9 @@ captcha:
     invalid: 'Ugyldig CAPTCHA, vennligst prøv igjen'
 
 mode:
-    dark: 'Mørkt tema'
     light: 'Lyst tema'
+    automatic: 'Automatisk'
+    dark: 'Mørkt tema'
 
 ban:
     reason: 'Grunn til forbud'
diff --git a/locale/pl/translations.suml b/locale/pl/translations.suml
index 3db943c8..d6d5a051 100644
--- a/locale/pl/translations.suml
+++ b/locale/pl/translations.suml
@@ -1555,8 +1555,9 @@ captcha:
     invalid: 'Nieprawidłowa CAPTCHA, spróbuj ponownie'
 
 mode:
-    dark: 'Tryb nocny'
     light: 'Tryb dzienny'
+    automatic: 'Auto'
+    dark: 'Tryb nocny'
 
 ban:
     reason: 'Powód blokady'
diff --git a/locale/pt/translations.suml b/locale/pt/translations.suml
index 4c8468ef..daf2971d 100644
--- a/locale/pt/translations.suml
+++ b/locale/pt/translations.suml
@@ -723,8 +723,9 @@ captcha:
     invalid: 'O Captcha foi invalidado, por favor, tente novamente'
 
 mode:
-    dark: 'Modo escuro'
     light: 'Modo claro'
+    automatic: 'Automático'
+    dark: 'Modo escuro'
 
 ban:
     reason: 'Razão de ban'
diff --git a/locale/ru/translations.suml b/locale/ru/translations.suml
index 6c90e5f5..1e654bf8 100644
--- a/locale/ru/translations.suml
+++ b/locale/ru/translations.suml
@@ -748,8 +748,9 @@ captcha:
     invalid: 'Капча введена неверно. Пожалуйста, попробуйте ещё раз'
 
 mode:
-    dark: 'Тёмная тема'
     light: 'Светлая тема'
+    automatic: 'Автоматический'
+    dark: 'Тёмная тема'
 
 ban:
     reason: 'Причина блокировки'
diff --git a/locale/sv/translations.suml b/locale/sv/translations.suml
index 270fea3f..20cdab89 100644
--- a/locale/sv/translations.suml
+++ b/locale/sv/translations.suml
@@ -742,8 +742,9 @@ captcha:
     invalid: 'Ogiltlig CAPTCHA, snälla försök igen'
 
 mode:
-    dark: 'Mörkt läge'
     light: 'Ljust läge'
+    automatic: 'Automatiskt'
+    dark: 'Mörkt läge'
 
 ban: # TODO
     reason: 'Ban reason'
diff --git a/locale/yi/translations.suml b/locale/yi/translations.suml
index 31339fbd..dc569d79 100644
--- a/locale/yi/translations.suml
+++ b/locale/yi/translations.suml
@@ -704,8 +704,9 @@ captcha:
     invalid: 'Invalid CAPTCHA, please try again'
 
 mode:
-    dark: 'טונקלמאָדוס'
     light: 'ליכטמאָדוס'
+    automatic: 'Automatic'  # TODO
+    dark: 'טונקלמאָדוס'
 
 # TODO
 ban:
diff --git a/locale/zh/translations.suml b/locale/zh/translations.suml
index ecfe97f1..0f2a3506 100644
--- a/locale/zh/translations.suml
+++ b/locale/zh/translations.suml
@@ -707,8 +707,9 @@ captcha:
     invalid: 'Invalid CAPTCHA, please try again'
 
 mode:
-    dark: '黑暗模式'
     light: '明亮模式'
+    automatic: 'Automatic'  # TODO
+    dark: '黑暗模式'
 
 ban:
     reason: '封禁原因'
diff --git a/plugins/dark.js b/plugins/dark.js
index 1bc05853..0e6a3218 100644
--- a/plugins/dark.js
+++ b/plugins/dark.js
@@ -1,28 +1,35 @@
 export default {
     methods: {
-        detectDark() {
-            if (!process.client) {
-                return false;
-            }
+        getMode() {
+            if (!process.client) { return 'automatic'; }
 
-            if (localStorage.getItem('darkMode') !== null) {
-                return localStorage.getItem('darkMode') === 'dark';
-            }
-
-            const mediaMatch = window.matchMedia('(prefers-color-scheme: dark)');
-            return mediaMatch.matches;
+            return localStorage.getItem('mode') || 'automatic';
         },
-        setMode(dark) {
-            if (!process.client) {
-                return;
+        detectDark() {
+            if (!process.client) { return false; }
+
+            switch (this.getMode()) {
+                case 'light':
+                    return false;
+                case 'dark':
+                    return true;
+                case 'automatic':
+                default:
+                    return window.matchMedia('(prefers-color-scheme: dark)').matches;
             }
+        },
+        setMode(mode) {
+            if (!process.client) { return; }
+
+            localStorage.setItem('mode', mode);
+        },
+        setIsDark(dark) {
+            if (!process.client) { return; }
 
             if (dark) {
                 document.body.setAttribute('data-theme', 'dark');
-                localStorage.setItem('darkMode', 'dark');
             } else {
                 document.body.removeAttribute('data-theme');
-                localStorage.setItem('darkMode', 'light');
             }
         },
     }