Fix visual bug in chrome while changing themes

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>

assets/style/dark-mode.css

@@ -76,3 +76,4 @@ body {
 .light {
     display: none !important;
 }
+

assets/style/light-mode.css

@@ -76,3 +76,4 @@ body {
 .dark {
     display: none !important;
 }
+

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;

inc/sidebar.inc

@@ -4,6 +4,7 @@
 			<div class="section container" style="font-size: 14px;">
 				<h2>Theme</h2>
                 <?php foreach (["auto", "light", "dark"] as $theme): ?>
+					<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="">
@@ -12,6 +13,7 @@
 							<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) ?>