Add a dark mode

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

src/locales/en.json

@@ -51,6 +51,9 @@
 	"config": {
 		"title": "Preferences",
 		"language": "Language",
+		"colorMode": "Theme",
+		"lightTheme": "Light",
+		"darkTheme": "Dark",
 		"close": "@:invariants.controls.close"
 	},
 	"deleteAccount": {

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": {

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 setGlobalAttribute = (attrName, storageName, defaultValue) => {
-const stored_locale = useStorage('sake-locale', '');
+	const stored_value = useStorage(storageName, '');
-if (!stored_locale.value) {
+	if (!stored_value.value) {
-	stored_locale.value = default_locale;
+		stored_value.value = defaultValue;
-}
+	}
-document.documentElement.setAttribute('lang', stored_locale.value);
+	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,
+	locale: locale.stored.value,
-	fallbackLocale: default_locale,
+	fallbackLocale: locale.defaultValue,
 	messages,
 });
 

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>