feature: dark mode: add

css/config.css

@@ -18,7 +18,8 @@
     padding: 0 12px;
     font-size: 16px;
     line-height: 1.5;
-    color: #555;
+    color: var(--column-color);
+    background: var(--internal-background);
     border: 1px solid #ccc;
     -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 7.5%);
     -moz-box-shadow: inset 0 1px 1px rgb(0 0 0 / 7.5%);

css/style.css

@@ -6,7 +6,7 @@ body {
     width: 100%;
     height: 95%;
     overflow: hidden;
-    background-color: var(--background-color);
+    background-color: var(--background);
 }
 
 body,
@@ -60,7 +60,7 @@ code {
 
 .path-icon {
     position: relative;
-    color: #222;
+    color: var(--icon-color);
 }
 
 .path-icon:active {
@@ -93,7 +93,7 @@ code {
     bottom: 5px;
     left: 16px;
     font-size: 10px;
-    color: var(--text-color);
+    color: var(--link-color);
     content: attr(data-progress);
 }
 
@@ -101,8 +101,8 @@ code {
     width: 5%;
     height: 30px;
     margin: 20px 2px 0;
-    color: #222;
-    background-color: white;
+    color: var(--icon-color);
+    background-color: var(--button-background);
     transition: ease 0.1s;
 }
 
@@ -113,7 +113,7 @@ code {
 
 .cmd-button:active {
     color: white;
-    background-color: var(--text-color);
+    background-color: var(--link-color);
     transition: ease 0.1s;
 }
 
@@ -205,7 +205,7 @@ a:active {
 }
 
 .name a {
-    color: var(--text-color);
+    color: var(--link-color);
 }
 
 .name a:hover {

css/themes/dark.css

@@ -1,6 +1,45 @@
 :root {
-    --text-color: #317bf9;
+    --link-color: #317bf9;
     --border-color: rgb(49 123 249 / 40%);
-    --background-color: #22272e;
-    --column-color: #c6d1df;
+    --background: #22272e;
+    --column-color: #727e8c;
+    --icon-color: #478be6;
+    --button-background: #22272e;
+    --internal-background: #373e47;
+}
+
+.view {
+    background: var(--internal-background) !important;
+    color: var(--column-color) !important;
+}
+.view a {
+    color: var(--link-color) !important;
+}
+
+.smalltalk .page, .smalltalk header, .smalltalk .button-strip  button, .smalltalk input{
+    background: var(--internal-background) !important;
+    color: var(--link-color) !important;
+    text-shadow: none !important;
+}
+
+.cloudcmd-user-menu, .cloudcmd-user-menu-button {
+    background: var(--internal-background) !important;
+    color: var(--link-color) !important;
+}
+
+.jqconsole {
+    background: #373e47 !important;
+}
+
+.jqconsole-prompt {
+    color: var(--column-color) !important;
+}
+
+.log-msg {
+    color: var(--column-color) !important;
+}
+
+.menu {
+    color: var(--link-color) !important;
+    background: var(--internal-background) !important;
 }

css/themes/light.css

@@ -1,6 +1,9 @@
 :root {
-    --text-color: blue;
+    --link-color: blue;
+    --selected-menu-item-color: #317bf9;
     --border-color: rgb(49 123 249 / 40%);
-    --background-color: white;
+    --background: white;
     --column-color: black;
+    --icon-color: #222;
+    --button-background: white;
 }

css/user-menu.css

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