KayFaraday
/
Zaimki
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[dark] add "automatic" to the mode switch

This commit is contained in:
Andrea 2022-01-18 20:26:21 +01:00
parent b7a2800608
commit 306e54fc4d
22 changed files with 87 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Footer.vue
View File

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

44
components/ModeSwitch.vue
View File

@ -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);
}
}
}

2
layouts/basic.vue
View File

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

2
layouts/default.vue
View File

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

3
locale/_base/translations.suml
View File

@ -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'

3
locale/de/translations.suml
View File

@ -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'

3
locale/en/translations.suml
View File

@ -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'

3
locale/eo/translations.suml
View File

@ -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'

3
locale/es/translations.suml
View File

@ -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'

3
locale/fr/translations.suml
View File

@ -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'

3
locale/gl/translations.suml
View File

@ -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'

3
locale/ja/translations.suml
View File

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

3
locale/lad/translations.suml
View File

@ -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'

3
locale/nl/translations.suml
View File

@ -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'

3
locale/no/translations.suml
View File

@ -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'

3
locale/pl/translations.suml
View File

@ -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'

3
locale/pt/translations.suml
View File

@ -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'

3
locale/ru/translations.suml
View File

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

3
locale/sv/translations.suml
View File

@ -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'

3
locale/yi/translations.suml
View File

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

3
locale/zh/translations.suml
View File

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

37
plugins/dark.js
View File

@ -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');
}
},
}