From efacc6f2181250bd79cc37276f7998a9093f134f Mon Sep 17 00:00:00 2001
From: Xander Frangos <33106561+xanderfrangos@users.noreply.github.com>
Date: Wed, 18 Dec 2024 12:43:55 -0500
Subject: [PATCH] Fix theme handling when high contrast is enabled

https://github.com/xanderfrangos/twinkle-tray/issues/908
---
 src/css/vars.scss       | 8 ++++----
 src/electron.js         | 2 ++
 src/panel-preload.js    | 2 ++
 src/settings-preload.js | 3 +++
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/css/vars.scss b/src/css/vars.scss
index f515629d..53a15dfe 100644
--- a/src/css/vars.scss
+++ b/src/css/vars.scss
@@ -41,7 +41,7 @@
     --slider-track-color-focus: rgba(0, 0, 0, 0.65);
 
 
-    @media screen and (prefers-color-scheme: dark) {
+    body[data-theme="dark"] {
         --tray-background-base: #1f1f1f;
         --tray-background-transparent: rgba(41, 41, 41, 0.95);
         --tray-background-blur: rgba(41, 41, 41, 0);
@@ -110,8 +110,8 @@ body[data-transparent="true"][data-acrylic="true"][data-use-native-animation="tr
     }
 }
 
-@media screen and (prefers-color-scheme: dark) {
-    body[data-colored-taskbar="true"] {
+html body[data-theme="dark"] {
+    &[data-colored-taskbar="true"] {
         .window-base {
             --tray-background: var(--system-accent-dark) !important;
         }
@@ -192,7 +192,7 @@ html body[data-is-win11="true"], html body[data-is-win11="true"] {
 
     --mica-base-color: #f1f1f1;
 
-    @media screen and (prefers-color-scheme: dark) {
+    &[data-theme="dark"] {
 
         --page-background: #202020 !important;
         --page-section-bg: #ffffff0a;
diff --git a/src/electron.js b/src/electron.js
index 825dc669..f0036714 100644
--- a/src/electron.js
+++ b/src/electron.js
@@ -718,6 +718,7 @@ function processSettings(newSettings = {}, sendUpdate = true) {
 
     if (settings.theme) {
       nativeTheme.themeSource = determineTheme(settings.theme)
+      sendToAllWindows('theme-settings', lastTheme)
     }
 
     updateStartupOption((settings.openAtLogin || false))
@@ -803,6 +804,7 @@ function processSettings(newSettings = {}, sendUpdate = true) {
         settings.isWin11 = isReallyWin11
       }
       newSettings.useAcrylic = settings.useAcrylic
+      sendToAllWindows('theme-settings', lastTheme)
       doRestartPanel = true
     }
 
diff --git a/src/panel-preload.js b/src/panel-preload.js
index c061dcb4..051b8797 100644
--- a/src/panel-preload.js
+++ b/src/panel-preload.js
@@ -307,6 +307,7 @@ ipc.on('theme-settings', (event, theme) => {
     try {
         window.theme = (theme.SystemUsesLightTheme == 0 ? "dark" : "light")
         window.document.body.dataset["systemTheme"] = (theme.SystemUsesLightTheme == 0 ? "dark" : "light")
+        window.document.body.dataset["theme"] = (settings.theme == "dark" || settings.theme == "light" ? settings.theme : window.theme)
         window.document.body.dataset["transparent"] = (theme.EnableTransparency == 0 || theme.UseAcrylic == 0 ? "false" : "true")
         window.document.body.dataset["acrylic"] = (theme.UseAcrylic == 0 || settings?.isWin11 ? "false" : "true")
         window.document.body.dataset["coloredTaskbar"] = (theme.ColorPrevalence == 0 ? "false" : "true")
@@ -314,6 +315,7 @@ ipc.on('theme-settings', (event, theme) => {
         isTransparent = theme.EnableTransparency
     } catch (e) {
         window.document.body.dataset["systemTheme"] = "default"
+        window.document.body.dataset["theme"] = "dark"
         window.document.body.dataset["transparent"] = "false"
         window.document.body.dataset["acrylic"] = "false"
         window.document.body.dataset["coloredTaskbar"] = "false"
diff --git a/src/settings-preload.js b/src/settings-preload.js
index c4e77e77..ba0d2a1c 100644
--- a/src/settings-preload.js
+++ b/src/settings-preload.js
@@ -183,7 +183,9 @@ ipc.on('localization-updated', (event, localization) => {
 
 const processTheme = (event, theme) => {
     try {
+        window.theme = (theme.SystemUsesLightTheme == 0 ? "dark" : "light")
         window.document.body.dataset["systemTheme"] = (theme.SystemUsesLightTheme == 0 ? "dark" : "light")
+        window.document.body.dataset["theme"] = (settings.theme == "dark" || settings.theme == "light" ? settings.theme : window.theme)
         window.document.body.dataset["transparent"] = (theme.EnableTransparency == 0 || theme.UseAcrylic == 0 ? "false" : "true")
         window.document.body.dataset["acrylic"] = (theme.UseAcrylic == 0 ? "false" : "true")
 
@@ -196,6 +198,7 @@ const processTheme = (event, theme) => {
         window.document.body.dataset["coloredTaskbar"] = (theme.ColorPrevalence == 0 ? "false" : "true")
     } catch (e) {
         window.document.body.dataset["systemTheme"] = "default"
+        window.document.body.dataset["theme"] = "dark"
         window.document.body.dataset["transparent"] = "false"
         window.document.body.dataset["acrylic"] = false
         window.document.body.dataset["coloredTaskbar"] = "false"