From 6e759ea30648a25149934c2ff392bc8927593d49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodolphe=20Br=C3=A9ard?= <v.code.ngyvz7vf@what.tf>
Date: Mon, 25 Sep 2023 18:38:38 +0200
Subject: [PATCH] Add a dark mode

---
 CHANGELOG.md             |  1 +
 src/locales/en.json      |  3 +++
 src/locales/fr.json      |  3 +++
 src/main.js              | 23 +++++++++++++++--------
 src/views/ConfigView.vue | 15 +++++++++++++++
 5 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6fca586..fc2e3d0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - Possibility to set a default account
+- Dark mode
 
 ### Changed
 - The style has been entirely reworked using Bootstrap instead of Bulma
diff --git a/src/locales/en.json b/src/locales/en.json
index bf89aee..7c13534 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -51,6 +51,9 @@
 	"config": {
 		"title": "Preferences",
 		"language": "Language",
+		"colorMode": "Theme",
+		"lightTheme": "Light",
+		"darkTheme": "Dark",
 		"close": "@:invariants.controls.close"
 	},
 	"deleteAccount": {
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 6cccfea..168ccf0 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -51,6 +51,9 @@
 	"config": {
 		"title": "Préférences",
 		"language": "Langue",
+		"colorMode": "Thème",
+		"lightTheme": "Clair",
+		"darkTheme": "Sombre",
 		"close": "@:invariants.controls.close"
 	},
 	"deleteAccount": {
diff --git a/src/main.js b/src/main.js
index 46bdeb2..04f0db4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,17 +7,24 @@ import App from './App.vue';
 import router from './router';
 import messages from '@intlify/unplugin-vue-i18n/messages';
 
-const default_locale = 'en';
-const stored_locale = useStorage('sake-locale', '');
-if (!stored_locale.value) {
-	stored_locale.value = default_locale;
-}
-document.documentElement.setAttribute('lang', stored_locale.value);
+const setGlobalAttribute = (attrName, storageName, defaultValue) => {
+	const stored_value = useStorage(storageName, '');
+	if (!stored_value.value) {
+		stored_value.value = defaultValue;
+	}
+	document.documentElement.setAttribute(attrName, stored_value.value);
+	return {
+		'stored': stored_value,
+		'defaultValue': defaultValue,
+	};
+};
+const locale = setGlobalAttribute('lang', 'sake-locale', 'en');
+const colorMode = setGlobalAttribute('data-bs-theme', 'sake-color-mode', 'light');
 
 const i18n = createI18n({
 	legacy: false,
-	locale: stored_locale.value,
-	fallbackLocale: default_locale,
+	locale: locale.stored.value,
+	fallbackLocale: locale.defaultValue,
 	messages,
 });
 
diff --git a/src/views/ConfigView.vue b/src/views/ConfigView.vue
index 23d7ea5..0e534f1 100644
--- a/src/views/ConfigView.vue
+++ b/src/views/ConfigView.vue
@@ -9,6 +9,11 @@ import LayoutComponent from '../components/LayoutComponent.vue';
 const router = useRouter();
 const stored_locale = useStorage('sake-locale', '');
 const { t, locale } = useI18n({ useScope: 'global' });
+const colorMode = useStorage('sake-color-mode');
+const allowedColorModes = [
+	'light',
+	'dark',
+];
 
 const toMainView = () => {
 	return router.push('/');
@@ -18,6 +23,10 @@ watch(locale, async (newLocale) => {
 	stored_locale.value = newLocale;
 	document.documentElement.setAttribute('lang', newLocale);
 });
+watch(colorMode, async (newColorMode) => {
+	console.log(`new color mode: ${newColorMode}`);
+	document.documentElement.setAttribute('data-bs-theme', newColorMode);
+});
 </script>
 
 <template>
@@ -30,6 +39,12 @@ watch(locale, async (newLocale) => {
 				<option v-for="locale_id in $i18n.availableLocales" :key="`locale-${locale_id}`" :value="locale_id">{{ $t("locale_name", 1, { locale: locale_id}) }}</option>
 			</select>
 		</div>
+		<div class="mb-3">
+			<label class="form-label" for="app-color-mode">{{ $t("config.colorMode") }}</label>
+			<select class="form-select" id="app-color-mode" v-model="colorMode">
+				<option v-for="mode in allowedColorModes" :key="mode" :value="mode">{{ $t(`config.${mode}Theme`) }}</option>
+			</select>
+		</div>
 
 		<ButtonGroupComponent>
 			<button type="button" class="btn btn-secondary" @click="toMainView">{{ $t("about.close") }}</button>