[dark] add "automatic" to the mode switch

components/Footer.vue

@@ -40,7 +40,7 @@
                     </li>
                 </ul>
 
-                <div class="my-2">
+                <div class="mt-2 mb-4 text-center">
                     <ModeSwitch/>
                 </div>
 

components/ModeSwitch.vue

@@ -1,12 +1,12 @@
 <template>
-    <div class="py-2 px-3">
+    <div class="btn-group" role="group">
-        <div class="form-check form-switch text-dark">
+        <button v-for="(buttonIcon, buttonMode) in modes" type="button"
-            <label>
+                :class="['btn', 'btn-sm', mode === buttonMode ? 'btn-primary' : 'btn-outline-primary']"
-                <input class="form-check-input" type="checkbox" v-model="isDark">
+                @click="mode = buttonMode"
-                <Icon :v="isDark ? 'moon' : 'sun'"/>
+        >
-                {{ $t('mode.' + (isDark ? 'dark' : 'light')) }}
+            <Icon :v="buttonIcon"/>
-            </label>
+            <T>mode.{{ buttonMode }}</T>
-        </div>
+        </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 => {
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => this.isDark = this.detectDark());
-                if (dark !== this.isDark) {
+
-                    this.isDark = dark;
+            this.$eventHub.$on('mode-changed', mode => {
+                if (mode !== this.mode) {
+                    this.mode = mode;
                 }
             })
         },
         watch: {
-            isDark(dark) {
+            mode() {
-                this.$eventHub.$emit('mode-changed', dark);
+                this.$eventHub.$emit('mode-changed', this.mode);
-                this.setMode(dark);
+                this.setMode(this.mode);
-                this.$store.commit('setDarkMode', dark);
+                this.isDark = this.detectDark();
+            },
+            isDark() {
+                this.setIsDark(this.isDark);
+                this.$store.commit('setDarkMode', this.isDark);
             }
         }
     }

layouts/basic.vue

@@ -10,7 +10,7 @@
     export default {
         mixins: [dark],
         mounted() {
-            this.setMode(this.detectDark());
+            this.setIsDark(this.detectDark());
         }
     }
 </script>

layouts/default.vue

@@ -42,7 +42,7 @@
                         });
                 });
             };
-            this.setMode(this.detectDark());
+            this.setIsDark(this.detectDark());
 
             if (!process.client) { return; }
 

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'

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'

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'

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'

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'

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'

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'

locale/ja/translations.suml

@@ -740,8 +740,9 @@ captcha:
     invalid: 'CAPTCHAが無効です。もう一度お試しください。'
 
 mode:
-    dark: 'ダークモード'
     light: 'ライトモード'
+    automatic: 'Automatic'  # TODO
+    dark: 'ダークモード'
 
 ban:
     reason: '禁止の理由'

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'

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'

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'

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'

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'

locale/ru/translations.suml

@@ -748,8 +748,9 @@ captcha:
     invalid: 'Капча введена неверно. Пожалуйста, попробуйте ещё раз'
 
 mode:
-    dark: 'Тёмная тема'
     light: 'Светлая тема'
+    automatic: 'Автоматический'
+    dark: 'Тёмная тема'
 
 ban:
     reason: 'Причина блокировки'

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'

locale/yi/translations.suml

@@ -704,8 +704,9 @@ captcha:
     invalid: 'Invalid CAPTCHA, please try again'
 
 mode:
-    dark: 'טונקלמאָדוס'
     light: 'ליכטמאָדוס'
+    automatic: 'Automatic'  # TODO
+    dark: 'טונקלמאָדוס'
 
 # TODO
 ban:

locale/zh/translations.suml

@@ -707,8 +707,9 @@ captcha:
     invalid: 'Invalid CAPTCHA, please try again'
 
 mode:
-    dark: '黑暗模式'
     light: '明亮模式'
+    automatic: 'Automatic'  # TODO
+    dark: '黑暗模式'
 
 ban:
     reason: '封禁原因'

plugins/dark.js

@@ -1,28 +1,35 @@
 export default {
     methods: {
-        detectDark() {
+        getMode() {
-            if (!process.client) {
+            if (!process.client) { return 'automatic'; }
-                return false;
-            }
 
-            if (localStorage.getItem('darkMode') !== null) {
+            return localStorage.getItem('mode') || 'automatic';
-                return localStorage.getItem('darkMode') === 'dark';
-            }
-
-            const mediaMatch = window.matchMedia('(prefers-color-scheme: dark)');
-            return mediaMatch.matches;
         },
-        setMode(dark) {
+        detectDark() {
-            if (!process.client) {
+            if (!process.client) { return false; }
-                return;
+
+            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');
             }
         },
     }