CHANGELOG.md

@@ -16,7 +16,6 @@ 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,7 +14,6 @@
         "@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",
@@ -901,11 +900,6 @@
         "@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,7 +19,6 @@
     "@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,6 +1,4 @@
 @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-primary" data-bs-theme="dark">
+	<nav class="navbar navbar-expand-lg bg-body-tertiary">
 		<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,9 +51,6 @@
 	"config": {
 		"title": "Preferences",
 		"language": "Language",
-		"colorMode": "Theme",
-		"lightTheme": "Light",
-		"darkTheme": "Dark",
 		"close": "@:invariants.controls.close"
 	},
 	"deleteAccount": {

src/locales/fr.json

@@ -51,9 +51,6 @@
 	"config": {
 		"title": "Préférences",
 		"language": "Langue",
-		"colorMode": "Thème",
-		"lightTheme": "Clair",
-		"darkTheme": "Sombre",
 		"close": "@:invariants.controls.close"
 	},
 	"deleteAccount": {

src/main.js

@@ -7,24 +7,17 @@ import App from './App.vue';
 import router from './router';
 import messages from '@intlify/unplugin-vue-i18n/messages';
 
-const setGlobalAttribute = (attrName, storageName, defaultValue) => {
-	const stored_value = useStorage(storageName, '');
-	if (!stored_value.value) {
-		stored_value.value = defaultValue;
+const default_locale = 'en';
+const stored_locale = useStorage('sake-locale', '');
+if (!stored_locale.value) {
+	stored_locale.value = default_locale;
 }
-	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');
+document.documentElement.setAttribute('lang', stored_locale.value);
 
 const i18n = createI18n({
 	legacy: false,
-	locale: locale.stored.value,
-	fallbackLocale: locale.defaultValue,
+	locale: stored_locale.value,
+	fallbackLocale: default_locale,
 	messages,
 });
 

src/views/ConfigView.vue

@@ -9,11 +9,6 @@ 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('/');
@@ -23,10 +18,6 @@ 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>
@@ -39,12 +30,6 @@ watch(colorMode, async (newColorMode) => {
 				<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>