From 24524a20fe428d9adea1e95690b39745d0df4ab4 Mon Sep 17 00:00:00 2001
From: ReimarPB <reimarpb@gmail.com>
Date: Sat, 9 Sep 2023 18:06:32 +0200
Subject: [PATCH] Fix visual bug in chrome while changing themes

---
 assets/icons/light-mode/theme-auto.svg |  2 +-
 assets/style/dark-mode.css             |  1 +
 assets/style/light-mode.css            |  1 +
 assets/style/main.css                  |  8 ++++++++
 inc/sidebar.inc                        | 18 ++++++++++--------
 5 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/assets/icons/light-mode/theme-auto.svg b/assets/icons/light-mode/theme-auto.svg
index aa0708e..be99f6f 100644
--- a/assets/icons/light-mode/theme-auto.svg
+++ b/assets/icons/light-mode/theme-auto.svg
@@ -4,5 +4,5 @@
         <rect x="0" y="0" width="50" height="100" fill="white" />
     </mask>
     <circle cx="50" cy="50" r="50" fill="black" mask="url(#mask)" />
-    <circle cx="50" cy="50" r="45" fill-opacity="0" stroke="black" stroke-width="10" />
+    <circle cx="50" cy="50" r="45" fill-opacity="0" stroke="currentColor" stroke-width="10" />
 </svg>
diff --git a/assets/style/dark-mode.css b/assets/style/dark-mode.css
index 14eefb6..5b00465 100644
--- a/assets/style/dark-mode.css
+++ b/assets/style/dark-mode.css
@@ -76,3 +76,4 @@ body {
 .light {
     display: none !important;
 }
+
diff --git a/assets/style/light-mode.css b/assets/style/light-mode.css
index 6f9a47b..ea772db 100644
--- a/assets/style/light-mode.css
+++ b/assets/style/light-mode.css
@@ -76,3 +76,4 @@ body {
 .dark {
     display: none !important;
 }
+
diff --git a/assets/style/main.css b/assets/style/main.css
index b3cfe8f..56f757f 100644
--- a/assets/style/main.css
+++ b/assets/style/main.css
@@ -214,6 +214,14 @@ h1, h2 {
     float: right;
 }
 
+.light, .dark {
+	display: none;
+}
+
+.icon-wrapper {
+	display: inline-block;
+	width: 1em;
+}
 .icon {
     -ms-interpolation-mode: nearest-neighbor;
     display: inline-block;
diff --git a/inc/sidebar.inc b/inc/sidebar.inc
index ff23b51..57f0558 100644
--- a/inc/sidebar.inc
+++ b/inc/sidebar.inc
@@ -4,14 +4,16 @@
 			<div class="section container" style="font-size: 14px;">
 				<h2>Theme</h2>
                 <?php foreach (["auto", "light", "dark"] as $theme): ?>
-                    <picture class="light">
-                        <source type="image/svg+xml" srcset="/assets/icons/light-mode/theme-<?= $theme ?>.svg">
-                        <img class="icon" src="/assets/icons/light-mode/theme-<?= $theme ?>.png" alt="">
-                    </picture>
-                    <picture class="dark">
-                        <source type="image/svg+xml" srcset="/assets/icons/dark-mode/theme-<?= $theme ?>.svg">
-                        <img class="icon" src="/assets/icons/dark-mode/theme-<?= $theme ?>.png" alt="">
-                    </picture>
+					<div class="icon-wrapper">
+						<picture class="light">
+							<source type="image/svg+xml" srcset="/assets/icons/light-mode/theme-<?= $theme ?>.svg">
+							<img class="icon" src="/assets/icons/light-mode/theme-<?= $theme ?>.png" alt="">
+						</picture>
+						<picture class="dark">
+							<source type="image/svg+xml" srcset="/assets/icons/dark-mode/theme-<?= $theme ?>.svg">
+							<img class="icon" src="/assets/icons/dark-mode/theme-<?= $theme ?>.png" alt="">
+						</picture>
+					</div>
 					<span id="<?= $theme ?>-theme">
 						<a class="theme-btn" data-theme="<?= $theme ?>" href="/api/set_theme/<?= $name ?>.php">
 							<?= ucwords($theme) ?>