From bbf5bff023b8e70d13d7b35543084d5bdd42e31a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodolphe=20Br=C3=A9ard?= <v.code.ngyvz7vf@what.tf>
Date: Fri, 29 Sep 2023 18:11:25 +0200
Subject: [PATCH] Detect the dark theme

---
 CHANGELOG.md | 6 ++++++
 src/main.js  | 6 +++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 884e9ce..e0f0bdf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 
+## [Unreleased]
+
+### Changed
+- If the browser uses a dark theme, the default theme is also set to dark
+
+
 ## [0.4.0] - 2023-09-26
 
 ### Added
diff --git a/src/main.js b/src/main.js
index 489809b..faab355 100644
--- a/src/main.js
+++ b/src/main.js
@@ -23,8 +23,12 @@ const setGlobalAttribute = (attrName, storageName, defaultValue, allowedValues)
 		'defaultValue': defaultValue,
 	};
 };
+const getDefaultColorMode = () => {
+	const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+	return darkMediaQuery.matches ? 'dark' : 'light';
+};
 const locale = setGlobalAttribute('lang', 'sake-locale', getDefaultLocale(), allowedLocales);
-const colorMode = setGlobalAttribute('data-bs-theme', 'sake-color-mode', 'light', allowedColorModes);
+const colorMode = setGlobalAttribute('data-bs-theme', 'sake-color-mode', getDefaultColorMode(), allowedColorModes);
 
 const i18n = createI18n({
 	legacy: false,