From a1b595d52f3f31ab946263c4b26fa70e6c46ee1d Mon Sep 17 00:00:00 2001
From: Hampus <hampus@fluxer.app>
Date: Wed, 19 Aug 2026 12:40:43 +0200
Subject: [PATCH] fix(app): apply the current system theme when relaunching
 (#1737)

---
 .../src/features/theme/hooks/useThemeCssVariables.ts   | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/fluxer_app/src/features/theme/hooks/useThemeCssVariables.ts b/fluxer_app/src/features/theme/hooks/useThemeCssVariables.ts
index 3194d241a..df2820ec0 100644
--- a/fluxer_app/src/features/theme/hooks/useThemeCssVariables.ts
+++ b/fluxer_app/src/features/theme/hooks/useThemeCssVariables.ts
@@ -29,7 +29,13 @@ export function useThemeCssVariables({
 }: ThemeCssVariablesOptions): void {
 	useLayoutEffect(() => {
 		const htmlNode = document.documentElement;
-		htmlNode.classList.add(`theme-${effectiveTheme}`);
+		const themeClass = `theme-${effectiveTheme}`;
+		for (const existingClass of Array.from(htmlNode.classList)) {
+			if (existingClass.startsWith('theme-') && existingClass !== themeClass) {
+				htmlNode.classList.remove(existingClass);
+			}
+		}
+		htmlNode.classList.add(themeClass);
 		htmlNode.style.setProperty('--saturation-factor', saturationFactor.toString());
 		htmlNode.style.setProperty('--user-select', enableTextSelection ? 'auto' : 'none');
 		htmlNode.style.setProperty('--font-size', remFromPx(fontSize));
@@ -47,7 +53,7 @@ export function useThemeCssVariables({
 			htmlNode.style.removeProperty('--markup-strikethrough-color');
 		}
 		return () => {
-			htmlNode.classList.remove(`theme-${effectiveTheme}`);
+			htmlNode.classList.remove(themeClass);
 			htmlNode.style.removeProperty('--saturation-factor');
 			htmlNode.style.removeProperty('--link-decoration');
 			htmlNode.style.removeProperty('--markup-strikethrough-color');