feature: css: vars: add

css/main.css

@@ -1,6 +1,9 @@
-@import url(./vars.css);
+/*@import url(./themes/dark.css);*/
+@import url(./themes/light.css);
+
 @import url(./urls.css);
 @import url(./reset.css);
+
 @import url(./style.css);
 @import url(./icons.css);
 @import url(./help.css);

css/style.css

@@ -6,7 +6,7 @@ body {
     width: 100%;
     height: 95%;
     overflow: hidden;
-    background-color: white;
+    background-color: var(--background-color);
 }
 
 body,
@@ -93,7 +93,7 @@ code {
     bottom: 5px;
     left: 16px;
     font-size: 10px;
-    color: var(--icon-color);
+    color: var(--text-color);
     content: attr(data-progress);
 }
 
@@ -113,7 +113,7 @@ code {
 
 .cmd-button:active {
     color: white;
-    background-color: var(--icon-color);
+    background-color: var(--text-color);
     transition: ease 0.1s;
 }
 
@@ -157,6 +157,7 @@ a:active {
 
 .fm-header {
     font-weight: bold;
+    color: var(--column-color);
 }
 
 .panel-left {
@@ -203,6 +204,10 @@ a:active {
     width: 26%;
 }
 
+.name a {
+    color: var(--text-color);
+}
+
 .name a:hover {
     cursor: default;
 }
@@ -212,11 +217,13 @@ a:active {
     width: 12%;
     margin-right: 27px;
     text-align: right;
+    color: var(--column-color);
 }
 
 .date {
     float: left;
     width: 19%;
+    color: var(--column-color);
 }
 
 .owner {
@@ -228,11 +235,13 @@ a:active {
      * spaces behind lines
      */
     vertical-align: top;
+    color: var(--column-color);
 }
 
 .mode {
     float: right;
     width: 18%;
+    color: var(--column-color);
 }
 
 .reduce-text {

css/themes/dark.css

@@ -0,0 +1,6 @@
+:root {
+    --text-color: #317bf9;
+    --border-color: rgb(49 123 249 / 40%);
+    --background-color: #22272e;
+    --column-color: #c6d1df;
+}

css/themes/light.css

@@ -0,0 +1,6 @@
+:root {
+    --text-color: blue;
+    --border-color: rgb(49 123 249 / 40%);
+    --background-color: white;
+    --column-color: black;
+}

css/user-menu.css

@@ -9,7 +9,7 @@
 }
 
 .cloudcmd-user-menu > option:checked {
-    box-shadow: 20px -20px 0 2px var(--icon-color) inset;
+    box-shadow: 20px -20px 0 2px var(--text-color) inset;
 }
 
 .cloudcmd-user-menu-button {

css/vars.css

@@ -1,4 +1,4 @@
 :root {
-    --icon-color: rgb(49 123 249);
+    --text-color: rgb(49 123 249);
     --border-color: rgb(49 123 249 / 40%);
 }