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

package-lock.json

@@ -14,6 +14,7 @@
         "@vueuse/core": "^10.2.1",
         "base32-encode": "^2.0.0",
         "bootstrap": "^5.3.2",
+        "bootswatch": "^5.3.2",
         "vue": "^3.3.4",
         "vue-i18n": "^9.2.2",
         "vue-qrcode-reader": "^5.1.0",
@@ -900,6 +901,11 @@
         "@popperjs/core": "^2.11.8"
       }
     },
+    "node_modules/bootswatch": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/bootswatch/-/bootswatch-5.3.2.tgz",
+      "integrity": "sha512-r05xOSLSx7MJvjpk/uoU8wPYgkPHWLV+uenLaRsS7yBsqSUcWYPjeUkz+tmrRv6s1eFxkF08NvQfBSSPCTyYaA=="
+    },
     "node_modules/braces": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",

package.json

@@ -19,6 +19,7 @@
     "@vueuse/core": "^10.2.1",
     "base32-encode": "^2.0.0",
     "bootstrap": "^5.3.2",
+    "bootswatch": "^5.3.2",
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
     "vue-qrcode-reader": "^5.1.0",

src/assets/main.sass

@@ -1,4 +1,6 @@
 @charset "utf-8"
 
+@import "bootswatch/dist/minty/variables"
 @import "variables.scss"
 @import "bootstrap/scss/bootstrap"
+@import "bootswatch/dist/minty/bootswatch"

src/components/NavBarComponent.vue

@@ -6,7 +6,7 @@ import { Popover } from 'bootstrap';
 </script>
 
 <template>
-	<nav class="navbar navbar-expand-lg bg-body-tertiary">
+	<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
 		<div class="container-fluid">
 			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavBar" aria-controls="mainNavBar" aria-expanded="false" aria-label="Toggle navigation">
 				<span class="navbar-toggler-icon"></span>

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>