Switch Dark/Light automatically based on user browser preference

sass/_imports.scss

@@ -37,6 +37,17 @@
 @import './sass/special/_charts.sass';
 
 :root {
+    --text: #{$text};
+    --background: #{$background};
+    --background-accent: #{$background_accent};
+    --input-background: #{$input_background};
+    --button_text: #{$button_text};
+    --light-gray: #{$lightGray};
+    --green: #{$green};
+    --yellow: #{$yellow};
+    --red: #{$red};
+    --redlight: #{$redlight};
+
     --pwt-panel-background: #{$background_accent};
     --pwt-text-color: #{$text};
     --pwt-gauge-default: #{$green};
@@ -47,6 +58,32 @@
     --pwt-chart-grid-stroke: #{$background};
 }
 
+@if variable-exists(dark_text) {   
+    @media (prefers-color-scheme: dark){
+        :root {
+            --text: #{$dark_text};
+            --background: #{$dark_background};
+            --background-accent: #{$dark_background_accent};
+            --input-background: #{$dark_input_background};
+            --button_text: #{$dark_button_text};
+            --light-gray: #{$dark_lightGray};
+            --green: #{$dark_green};
+            --yellow: #{$dark_yellow};
+            --red: #{$dark_red};
+            --redlight: #{$dark_redlight};
+
+            --pwt-panel-background: #{$dark_background_accent};
+            --pwt-text-color: #{$dark_text};
+            --pwt-gauge-default: #{$dark_green};
+            --pwt-gauge-back: #{$dark_background};
+            --pwt-gauge-warn: #{$dark_yellow};
+            --pwt-gauge-crit: #{$dark_red};
+            --pwt-chart-primary: #{$dark_accent};
+            --pwt-chart-grid-stroke: #{$dark_background};
+        }
+    }
+}
+
 html {
     overflow: scroll;
     overflow-x: hidden;
@@ -59,13 +96,13 @@ html {
 ::-webkit-scrollbar {
     width: 0;
     height: 6px;
-    background: $input_background;
+    background: var(--input-background);
 
     &:hover {
-        background: $background_accent;
+        background: var(--background-accent);
     }
 }
 
 a {
-    color: $text;
+    color: var(--text);
 }

sass/proxmox/_proxmoxRRDChart.sass

@@ -1,2 +1,2 @@
 //div[id^="proxmoxRRDChart-"] > div:nth-child(3) > div
-//    background-color: $background_accent
+//    background-color: var(--background-accent)

sass/proxmox/_pveCeph.sass

@@ -1,2 +1,2 @@
 div[id^="pveCephInstallWindow-"][id$="-innerCt"] div div div div
-	background: $background_accent
+	background: var(--background-accent)

sass/proxmox/_pveDc.sass

@@ -1,7 +1,7 @@
 div[id^="pveDcHealth-"][id$="-body"], div[id^="pveDcGuests-"][id$="-body"],
 div[id^="pveDcSummary-"][id$="-innerCt"] > div:nth-child(3) > div:nth-child(2), div[id^="pveDcSummary-"][id$="-innerCt"] > div:nth-child(5) > div:nth-child(2) > div > div,
 div[id^="pveDcSummary-"][id$="-innerCt"] > div:nth-child(3) > div:nth-child(2) > div
-    background-color: $background_accent
+    background-color: var(--background-accent)
 
 div[id^="pveDcSummary-"][id$="-innerCt"] > div:nth-child(4) > div:nth-child(3)
-    border: 1px solid $background_accent
+    border: 1px solid var(--background-accent)

sass/special/_borders.sass

@@ -5,12 +5,12 @@ div[id^="PVE-node-Config-"]:not([id$="-body"]) > div:nth-child(1),
 div[id^="PVE-dc-Config-"]:not([id$="-body"]) > div:nth-child(1),
 div[id^="PVE-storage-Browser"]:not([id$="-body"]) > div:nth-child(1),
 div[id^="pvePanelConfig"]:not([id$="-body"]) > div:nth-child(1)
-    border-bottom: 3px solid $background_accent !important
+    border-bottom: 3px solid var(--background-accent) !important
 
 div[id^="PVE-node-Config-"][id$="-body"],
 div[id^="PVE-dc-Config-"][id$="-body"],
 div[id^="PVE-qemu-Config-"][id$="-body"],
 div[id^="PVE-lxc-Config-"][id$="-body"],
 div[id^="PVE-storage-Browser"][id$="-body"],
 div[id^="pvePanelConfig"][id$="-body"]
-    border-left: 3px solid $background_accent !important
+    border-left: 3px solid var(--background-accent) !important

sass/special/_charts.sass

@@ -18,4 +18,4 @@
 //      canvas#ext-element-*.x-surface-canvas
 //div[id^="proxmoxRRDChart"][id*="-ext-chart-axis-numeric-"] div[id^="ext-element-"] canvas[id^="ext-element-"],
 //div[id^="proxmoxRRDChart"][id*="-ext-chart-axis-time-"] div[id^="ext-element-"] canvas[id^="ext-element-"]
-//    filter: opacity(0.1) drop-shadow(0px 0px 0px $text) drop-shadow(0px 0px 0px $text) drop-shadow(0px 0px 0px $text) drop-shadow(0px 0px 0px $text) drop-shadow(0px 0px 0px $text)
+//    filter: opacity(0.1) drop-shadow(0px 0px 0px var(--text)) drop-shadow(0px 0px 0px var(--text)) drop-shadow(0px 0px 0px var(--text)) drop-shadow(0px 0px 0px var(--text)) drop-shadow(0px 0px 0px var(--text))

sass/special/_icons.sass

@@ -82,54 +82,54 @@
 	@include recolor($text)
 
 .fa-exchange:before
-	color: $text
+	color: var(--text)
 
 .fa-usb:before
-	color: $text
+	color: var(--text)
 
 .fa-object-group:before
-	color: $text
+	color: var(--text)
 
 .fa-hdd-o:before
-	color: $text
+	color: var(--text)
 
 .fa-cloud:before
-	color: $text
+	color: var(--text)
 
 .x-treelist-item-icon.fa:before
 	color: inherit
 
 .fa-volume-up:before
-	color: $text
+	color: var(--text)
 
 
 .fa-ceph:before
 	background-image: url(/pve2/images/logo-ceph.png)
 	@include recolor($text)
 
 .fa-sign-out:before
-	color: $red
+	color: var(--red)
 
 .fa-language:before
-	color: $text
+	color: var(--text)
 
 .fa-building.online
-	color: $accent !important
+	color: var(--accent) !important
 
 .fa-window-restore:before
-	color: $text
+	color: var(--text)
 
 .fa-fw.x-grid-icon-custom.fa
 	&.fa-database
 		color: adjust-color($accent, $lightness: -20%)
 		&.available
-			color: $accent
+			color: var(--accent)
 	&.fa-desktop
-		color: $accent
+		color: var(--accent)
 		&.stopped
 			color: adjust-color($accent, $lightness: -20%)
 	&.fa-cube
-		color: $accent
+		color: var(--accent)
 		&.stopped
 			color: adjust-color($accent, $lightness: -20%)
 	&.fa-file-o
@@ -142,21 +142,21 @@
 	&.fa-tags
 		color: adjust-color($accent, $lightness: -20%)
 	&.fa-th
-		color: $accent !important
+		color: var(--accent) !important
 
 .lxc:after
 	background: transparent !important
-	color: $accent
-	text-shadow: 0 0 0 $background !important
+	color: var(--accent)
+	text-shadow: 0 0 0 var(--background) !important
 
 .qemu:after
 	background: transparent !important
-	color: $accent
-	text-shadow: 0 0 0 $background !important
+	color: var(--accent)
+	text-shadow: 0 0 0 var(--background) !important
 
 .fa-network-wired:before
 	//background-image: url('/pve2/images/dd_icon-fa-network-wired.svg')
-	color: $text
+	color: var(--text)
 
 .fa-sdn:before
 	//background-image: url('/pve2/images/dd_icon-sdn.svg')

sass/special/_proxmox.sass

@@ -5,7 +5,7 @@ img[id^="proxmoxlogo-"]
 	background-color: #401314
 
 .usage
-	background-color: $accent
+	background-color: var(--accent)
 
 .usage-wrapper
 	border: 1px solid $accent
@@ -24,23 +24,31 @@ img[id^="proxmoxlogo-"]
 	//background-image: url('/pve2/images/dd_mini-bottom.png') !important
 
 .pmx-hint
-	color: $yellow
+	color: var(--yellow)
 	background-color: transparent
 
 .pmx-md code
-	background-color: $background
+	background-color: var(--background)
 
 .pmx-md pre code
-	border-left: 3px solid $input_background
+	border-left: 3px solid var(--input-background)
 
 .pmx-md tbody tr:nth-of-type(even)
-	background-color: darken($background_accent, 1)
+	background-color: var(--background-accent);
+	// to fix
+	//background-color: darken(var(--background-accent), 1)
 
-.pmx-md thead tr
-	background-color: darken($background_accent, 2)
+// .pmx-md thead tr
+//     background-color: var(--background-accent);
+// 	// to fix
+// 	// background-color: darken(var(--background-accent), 2)
 
 .pmx-md tbody td, .pmx-md tbody tr:last-of-type td
-	border-bottom: 1px solid lighten($background_accent, 5)
+	border-bottom: 1px solid var(--background-accent);
+	// to fix
+	// border-bottom: 1px solid lighten(var(--background-accent), 5)
 
 .pmx-md tbody tr:hover td
-	background-color: lighten($background_accent, 10)
+	background-color: var(--background-accent);
+	// to fix
+	// background-color: lighten(var(--background-accent), 10)

sass/special/_specific.sass

@@ -1,8 +1,8 @@
 #toolbar-1069-innerCt
-	background: $background
+	background: var(--background)
 
 #button-1030
-	background: $background_accent
+	background: var(--background-accent)
 	border: 1px solid #d23d3f
 
 #menuitem-1030-iconEl
@@ -18,87 +18,87 @@
 	color: #c52d2f
 
 [id^="pveNodeStatus"]
-	background: $background_accent
+	background: var(--background-accent)
 
 div[id^="toolbar-"][id$="-innerCt"] div[id^="toolbar-"][id$="-targetEl"] div ul li div
-	background-color: $background
+	background-color: var(--background)
 
 div[id^="pveGuestStatusView-"][id$="-body"]
-	background: $background_accent
+	background: var(--background-accent)
 
 div[id^="pveStorageStatusView-"][id$="-body"]
-	background: $background_accent
+	background: var(--background-accent)
 
 div[id^="pveNotesView-"][id$="-innerCt"]
-	background: $background_accent
+	background: var(--background-accent)
 
 [id^="versioninfo"]
-	background: $background_accent
+	background: var(--background-accent)
 
 [id^="proxmoxGauge"]
-	background: $background_accent
+	background: var(--background-accent)
 
 [id^="tooltip"]
-	background: $accent
-	color: $text
+	background: var(--accent)
+	color: var(--text)
 	border-width: 0
 
 [id^="ext-quicktips-tip-body"]
-	background-color: $accent
-	color: $text
+	background-color: var(--accent)
+	color: var(--text)
 	//If you use compass, instead of the line below you could use + border-radius($radius, $vertical-radius)
 	border-radius: 0
 	border-width: 0
 
 [id^="ext-quicktips-tip-innerCt"]
-	background-color: $accent
-	color: $text
+	background-color: var(--accent)
+	color: var(--text)
 	//If you use compass, instead of the line below you could use + border-radius($radius, $vertical-radius)
 	border-radius: 0
 	border-width: 0
 
 [id^="ext-quicktips-tip-ext-quicktips-tip-outerCt"]
-	background-color: $accent
-	color: $text
+	background-color: var(--accent)
+	color: var(--text)
 	//If you use compass, instead of the line below you could use + border-radius($radius, $vertical-radius)
 	border-radius: 0
 	border-width: 0
 
 [id^="ext-form-error"]
-	background-color: $accent
-	color: $text
+	background-color: var(--accent)
+	color: var(--text)
 	//If you use compass, instead of the line below you could use + border-radius($radius, $vertical-radius)
 	border-radius: 0
 	border-width: 0
 
 [id^="toolbar"]
-	background: $background
+	background: var(--background)
 
 [id^="legend"]
-	background: $background_accent
+	background: var(--background-accent)
 	border-color: red
 
 a[id^="menuitem-"][id$="-itemEl"] div[class*="fa-refresh"]:before, span[id^="proxmoxButton-"][id$="-btnEl"] span[class*="fa-undo"]:before
-	color: $yellow
+	color: var(--yellow)
 
 a[id^="menuitem-"][id$="-itemEl"] div[class*="fa-trash-o"]:before
-	color: $red
+	color: var(--red)
 
 // Userinfo button specifics
 #userinfo.x-btn
 	//background-color: transparent !important
 	//border: 1px solid #d23d3f !important
 div[id="menu-1029-targetEl"] > div[class*="x-menu-item"]
-	background: $background
+	background: var(--background)
 div[id="menu-1029-targetEl"] > div[class*="x-menu-item"] > a[class*="x-menu-item-focus"]
-	background: $background_accent
+	background: var(--background-accent)
 div[id="menu-1029-targetEl"] > div[class*="x-menu-item"] > div[class*="x-menu-item"] > a[aria-disabled="true"]
 	opacity: 0.5
-	background: $background_accent
+	background: var(--background-accent)
 
 // Panels on "My Settings"
 div[id^="form-"][id$="-innerCt"][style="height: 160px; width: 356px;"], div[id^="fieldset-"][id$="-innerCt"]
-	background: $background_accent
+	background: var(--background-accent)
 
 div[id="pkgversions"]
-	background-color: $background !important
+	background-color: var(--background) !important

sass/x/_autocontainer.sass

@@ -1,2 +1,2 @@
 .x-autocontainer-innerCt
-	background: $background
+	background: var(--background)

sass/x/_body.sass

@@ -1,7 +1,7 @@
 .x-body
-	color: $text
+	color: var(--text)
 	font-size: 13px
 	line-height: 17px
 	font-weight: 300
 	font-family: 'helvetica', 'arial', 'verdana', sans-serif
-	background: $text
+	background: var(--text)