Use the browser's preferred language if available

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Possibility to set a default account
 - Dark mode
+- Use the browser's preferred language if available
 
 ### Changed
 - The style has been entirely reworked using Bootstrap instead of Bulma

src/locales_utils.js

@@ -0,0 +1,19 @@
+import { allowedLocales } from './const';
+
+const fallBackValue = 'en';
+
+const getShortLanguageCode = (language) => {
+	language = language.split('-')[0];
+	language = language.split('_')[0];
+	return language;
+};
+
+export const getDefaultLocale = () => {
+	for (const lang of navigator.languages) {
+		const lang_short = getShortLanguageCode(lang);
+		if (allowedLocales.includes(lang_short)) {
+			return lang_short;
+		}
+	}
+	return fallBackValue;
+};

src/main.js

@@ -1,6 +1,7 @@
 import './assets/main.sass';
 
 import { allowedColorModes, allowedLocales } from './const';
+import { getDefaultLocale } from './locales_utils';
 import { createApp } from 'vue';
 import { createI18n } from 'vue-i18n';
 import { useStorage } from '@vueuse/core';
@@ -22,7 +23,7 @@ const setGlobalAttribute = (attrName, storageName, defaultValue, allowedValues)
 		'defaultValue': defaultValue,
 	};
 };
-const locale = setGlobalAttribute('lang', 'sake-locale', 'en', allowedLocales);
+const locale = setGlobalAttribute('lang', 'sake-locale', getDefaultLocale(), allowedLocales);
 const colorMode = setGlobalAttribute('data-bs-theme', 'sake-color-mode', 'light', allowedColorModes);
 
 const i18n = createI18n({