initial global vars added, BG color changed

public_html_merged/style.css

@@ -1,9 +1,39 @@
+:root {
+    color-scheme: light dark;
+    --body-bgcolor: #ffffff;
+    --modal-bgcolor: #ffffff;
+    --body-text: #222222;
+    --head-text: #444444;
+    --link-default: #0000C8;
+    --link-hover: #d77925;
+    --infoblock-text: #002F5D;
+    --error-text: red;
+    --error-border: red;
+    --error-background: #FFFFA3;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --body-bgcolor: #000000;
+        --modal-bgcolor: #333333;
+        --body-text: #eeeeee;
+        --head-text: #cccccc;
+        --link-default: #d77925;
+        --link-hover: #de914b;
+        --infoblock-text: #ffffff;
+        --error-text: red;
+        --error-border: red;
+        --error-background: #FFFFA3;
+    }
+}
+
 html,
 body {
     -ms-overflow-style: -ms-autohiding-scrollbar;
     margin: 0;
     padding: 0;
-    background-color: #ffffff;
+    background-color: var(--body-bgcolor);
+    color: var(--body-text);
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 10pt;
     overflow: hidden;
@@ -19,7 +49,7 @@ body {
     position: absolute;
     bottom: 0;
     margin: 0;
-    background: #ffffff;
+    background: #var(--body-bgcolor);
     width: 100%;
     height: 400px;
 }
@@ -182,7 +212,7 @@ body {
     font-size: 75%;
     text-decoration: underline;
     cursor: pointer;
-    background: #fff;
+    background-color: var(--body-bgcolor);
     padding: 3px;
     border-radius: 2px;
 }
@@ -603,7 +633,7 @@ input.error {
     top: 60px;
     min-width: 168px;
     padding-right: 5px;
-    background: #ffffff;
+    background-color: var(--body-bgcolor);
     box-shadow: 4px 4px 10px #444444;
     cursor: pointer;
     z-index: 9999;
@@ -730,7 +760,7 @@ input.error {
     top: 60px;
     width: 398px;
     min-height: 180px;
-    background: #ffffff;
+    background-color: var(--body-bgcolor);
     box-shadow: 4px 4px 10px #444444;
     padding: 20px;
     z-index: 9999;
@@ -961,7 +991,7 @@ input.error {
 }
 
 .panel {
-    background-color: white;
+    background-color: var(--body-bgcolor);
     position: relative;
     padding: 3px 3px 10px 3px;
     display: none;
@@ -1026,7 +1056,7 @@ input.error {
     -moz-border-radius: 4px;
     background-clip: padding-box;
     border: 1px solid #e5e9f9;
-    background: #fff;
+    background-color: var(--body-bgcolor);
     color: #060d46;
     width: auto;
 }