From e3f89e88456fc397084e69e30d9b9d9980de4c16 Mon Sep 17 00:00:00 2001
From: coderaiser <coderaiser@cloudcmd.io>
Date: Fri, 29 Mar 2024 10:08:41 +0200
Subject: [PATCH] feature: dark mode: add

---
 css/config.css       |  3 ++-
 css/style.css        | 14 +++++++-------
 css/themes/dark.css  | 45 +++++++++++++++++++++++++++++++++++++++++---
 css/themes/light.css |  7 +++++--
 css/user-menu.css    |  2 +-
 5 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/css/config.css b/css/config.css
index ba6a1e3c..4804374a 100644
--- a/css/config.css
+++ b/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%);
diff --git a/css/style.css b/css/style.css
index ad45e44e..d5d2ffff 100644
--- a/css/style.css
+++ b/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 {
diff --git a/css/themes/dark.css b/css/themes/dark.css
index fc4461bf..5008cc20 100644
--- a/css/themes/dark.css
+++ b/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;
 }
diff --git a/css/themes/light.css b/css/themes/light.css
index aaf3ebd9..e95eb441 100644
--- a/css/themes/light.css
+++ b/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;
 }
diff --git a/css/user-menu.css b/css/user-menu.css
index 3f78f63c..792747f4 100644
--- a/css/user-menu.css
+++ b/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 {