From 19daffad560cba5c31f0f28f7cdbc3285ca160f3 Mon Sep 17 00:00:00 2001
From: Red J Adaya <red.adaya@gmail.com>
Date: Mon, 26 Feb 2024 15:21:23 +0800
Subject: [PATCH] Convert the rest of the colors to CSS variables (#333)

* css variables for sidebar

* type

* line css vars

* lines css vars

* bookmarks css vars

* clientsettings css vars

* button.less css vars

* checkbox.less css vars

* cmdstrcode.less css vars

* dropdown.less css vars

* markdown css vars

* status css vars

* convert all hex colors to rgb color

* textfield css vars

* toggle css vars

* tooltip css vars

* statusindicator css vars

* about modal css vars

* disconnected modal css vars

* editremoteconn modal css vars

* linesettings modal css vars

* tos modal css vars

* viewremoteconndetail modal css vars

* prompt css vars

* connections view css vars

* add colors comments

* history view css vars

* cmdinput css vars

* cmdinput css vars

* screenview css vars

* convert less vars to css vars
---
 src/app/app.less                              | 142 +++++------
 src/app/bookmarks/bookmarks.less              |  24 +-
 src/app/clientsettings/clientsettings.less    |  30 +--
 src/app/common/elements/button.less           |  65 +----
 src/app/common/elements/checkbox.less         |   8 +-
 src/app/common/elements/cmdstrcode.less       |  25 +-
 src/app/common/elements/dropdown.less         |   6 +-
 src/app/common/elements/markdown.less         |  18 +-
 src/app/common/elements/status.less           |   8 +-
 src/app/common/elements/textfield.less        |   8 +-
 src/app/common/elements/textfield.tsx         |   2 +
 src/app/common/elements/toggle.less           |   6 +-
 src/app/common/elements/tooltip.less          |   2 +-
 src/app/common/icons/icons.less               |   8 +-
 src/app/common/modals/about.less              |  12 +-
 src/app/common/modals/disconnected.less       |  12 +-
 src/app/common/modals/editremoteconn.less     |   2 +-
 src/app/common/modals/linesettings.less       |   2 +-
 src/app/common/modals/tos.less                |   6 +-
 .../common/modals/viewremoteconndetail.less   |   4 +-
 src/app/common/prompt/prompt.less             |  28 +--
 src/app/connections/connections.less          |   4 +-
 src/app/history/history.less                  |  39 ++-
 src/app/history/history.tsx                   |  25 +-
 src/app/root.less                             | 231 +++++++++++-------
 src/app/sidebar/sidebar.less                  |   4 +-
 src/app/workspace/cmdinput/cmdinput.less      |  85 +++----
 src/app/workspace/screen/screenview.less      |  28 +--
 src/app/workspace/workspace.less              |   8 +-
 29 files changed, 398 insertions(+), 444 deletions(-)

diff --git a/src/app/app.less b/src/app/app.less
index c7e28bf5b..de53b56ce 100644
--- a/src/app/app.less
+++ b/src/app/app.less
@@ -12,12 +12,12 @@ body {
     font-weight: 300;
     line-height: 1.5;
     background-color: black;
-    color: @base-color;
+    color: var(--app-text-color);
 }
 
 body {
     &.is-dev .sidebar {
-        background-color: @base-background-dev;
+        background-color: var(--app-bg-color-dev);
     }
 }
 
@@ -27,8 +27,8 @@ textarea {
     font-size: 12px;
     font-weight: 300;
     line-height: 1.5;
-    background: @base-background;
-    color: @base-color;
+    background: var(--app-bg-color);
+    color: var(--app-text-color);
 }
 
 // typography
@@ -49,7 +49,7 @@ textarea {
     font-weight: 500;
     line-height: 20px;
     font-family: @text-s1-font;
-    color: @text-primary;
+    color: var(--app-text-color);
 }
 
 .text-standard {
@@ -84,11 +84,11 @@ textarea {
 }
 
 body a {
-    color: @wave-green;
+    color: var(--app-accent-color);
     cursor: pointer;
     text-decoration: none;
     &:hover {
-        color: @wave-green;
+        color: var(--app-accent-color);
     }
 }
 
@@ -98,7 +98,7 @@ body code {
 }
 
 svg.icon {
-    fill: @base-color;
+    fill: var(--app-text-color);
     width: 100%;
     height: 100%;
     display: inline-block;
@@ -137,19 +137,11 @@ svg.icon {
 }
 
 *::-webkit-scrollbar-track {
-    background-color: @scrollbar-background !important;
+    background-color: var(--scrollbar-thumb-color) !important;
 }
 
 *::-webkit-scrollbar-thumb {
-    background-color: @scrollbar-thumb !important;
-}
-
-.glow {
-    &:focus,
-    &:hover {
-        border: 1px solid @background-session-components !important;
-        box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5) inset, 0px 0px 2px rgba(255, 255, 255, 0.2) inset;
-    }
+    background-color: var(--scrollbar-thumb-color) !important;
 }
 
 .truncate {
@@ -165,10 +157,10 @@ svg.icon {
     border-radius: 5px;
     cursor: pointer;
     background-color: @button-background !important;
-    color: @wave-green;
+    color: var(--app-accent-color);
     .hoverEffect;
     &:hover {
-        color: @wave-green;
+        color: var(--app-accent-color);
     }
     &.disabled {
         color: fade(@disabled-color, 60%);
@@ -263,7 +255,7 @@ a.a-block {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: @term-white;
+    background-color: var(--app-text-color);
     opacity: 0;
     display: flex;
     flex-direction: row;
@@ -324,43 +316,43 @@ a.a-block {
 }
 
 .text-button {
-    color: @term-white;
+    color: var(--app-text-color);
     cursor: pointer;
     background-color: #171717;
     outline: 2px solid #171717;
 
     &:hover,
     &:focus {
-        color: @term-white;
+        color: var(--app-text-color);
         background-color: #333;
         outline: 2px solid #333;
     }
 
     &.connect-button {
-        color: @term-green;
+        color: var(--button-primary-bg-color);
         &:hover {
-            color: @term-green;
+            color: var(--button-primary-bg-color);
         }
     }
 
     &.disconnect-button {
-        color: @term-red;
+        color: var(--button-error-bg-color);
         &:hover {
-            color: @term-red;
+            color: var(--button-error-bg-color);
         }
     }
 
     &.success-button {
-        color: @term-green;
+        color: var(--button-primary-bg-color);
         &:hover {
-            color: @term-green;
+            color: var(--button-primary-bg-color);
         }
     }
 
     &.error-button {
-        color: @term-red;
+        color: var(--button-error-bg-color);
         &:hover {
-            color: @term-red;
+            color: var(--button-error-bg-color);
         }
     }
 
@@ -399,12 +391,12 @@ a.a-block {
     &.active,
     &.active.selected {
         display: block;
-        background-color: @tab-blue !important;
+        background-color: var(--tab-blue) !important;
     }
 
     &.active.selected.fg-focus {
         display: block;
-        background-color: @tab-green !important;
+        background-color: var(--tab-green) !important;
     }
 }
 
@@ -438,12 +430,12 @@ a.a-block {
 }
 
 .load-error-text {
-    color: @term-red;
+    color: var(--tab-red);
     padding-top: 5px;
 }
 
 .plugin-info-text {
-    color: @term-white;
+    color: var(--app-text-color);
     padding-top: 5px;
 }
 
@@ -492,138 +484,138 @@ a.a-block {
 .icon.color-green {
     path,
     circle {
-        fill: @tab-green;
+        fill: var(--tab-green);
     }
 
     i {
-        color: @tab-green;
+        color: var(--tab-green);
     }
 }
 
 .icon.color-red {
     path,
     circle {
-        fill: @tab-red;
+        fill: var(--tab-red);
     }
 
     i {
-        color: @tab-red;
+        color: var(--tab-green);
     }
 }
 
 .icon.color-orange {
     path,
     circle {
-        fill: @tab-orange;
+        fill: var(--tab-orange);
     }
 
     i {
-        color: @tab-orange;
+        color: var(--tab-orange);
     }
 }
 
 .icon.color-blue {
     path,
     circle {
-        fill: @tab-blue;
+        fill: var(--tab-blue);
     }
 
     i {
-        color: @tab-blue;
+        color: var(--tab-blue);
     }
 }
 
 .icon.color-yellow {
     path,
     circle {
-        fill: @tab-yellow;
+        fill: var(--tab-yellow);
     }
 
     i {
-        color: @tab-yellow;
+        color: var(--tab-yellow);
     }
 }
 
 .icon.color-pink {
     path,
     circle {
-        fill: @tab-pink;
+        fill: var(--tab-pink);
     }
 
     i {
-        color: @tab-pink;
+        color: var(--tab-pink);
     }
 }
 
 .icon.color-mint {
     path,
     circle {
-        fill: @tab-mint;
+        fill: var(--tab-mint);
     }
 
     i {
-        color: @tab-mint;
+        color: var(--tab-mint);
     }
 }
 
 .icon.color-cyan {
     path,
     circle {
-        fill: @tab-cyan;
+        fill: var(--tab-cyan);
     }
 
     i {
-        color: @tab-cyan;
+        color: var(--tab-cyan);
     }
 }
 
 .icon.color-violet {
     path,
     circle {
-        fill: @tab-violet;
+        fill: var(--tab-violet);
     }
 
     i {
-        color: @tab-violet;
+        color: var(--tab-violet);
     }
 }
 
 .icon.color-white {
     path,
     circle {
-        fill: @tab-white;
+        fill: var(--tab-white);
     }
 
     i {
-        color: @tab-white;
+        color: var(--tab-white);
     }
 }
 
 .status-icon.status-connected {
     path,
     circle {
-        fill: @status-connected;
+        fill: var(--status-connected-color);
     }
 }
 
 .status-icon.status-connecting {
     path,
     circle {
-        fill: @status-connecting;
+        fill: var(--status-connecting-color);
     }
 }
 
 .status-icon.status-disconnected {
     path,
     circle {
-        fill: @status-disconnected;
+        fill: var(--status-disconnected-color);
     }
 }
 
 .status-icon.status-error {
     path,
     circle {
-        fill: @status-error;
+        fill: var(--status-error-color);
     }
 }
 
@@ -649,7 +641,7 @@ a.a-block {
 }
 
 .view {
-    background-color: @background-session;
+    background-color: var(--session-bg-color);
     flex-grow: 1;
     display: flex;
     flex-direction: column;
@@ -687,12 +679,12 @@ a.a-block {
     }
 
     &.settings-error {
-        color: @term-red;
+        color: var(--term-red);
         margin-top: 20px;
         padding: 10px;
         border-radius: 5px;
         background-color: #200707;
-        border: 1px solid @term-red;
+        border: 1px solid var(--term-red);
         font-weight: bold;
 
         .error-dismiss {
@@ -716,7 +708,7 @@ a.a-block {
         display: flex;
         flex-direction: row;
         align-items: center;
-        color: @term-white;
+        color: var(--app-text-color);
 
         &.settings-clickable {
             cursor: pointer;
@@ -747,37 +739,37 @@ a.a-block {
         }
 
         .tab-color-icon.color-default path {
-            fill: @tab-green;
+            fill: var(--tab-green);
         }
         .tab-color-icon.color-green path {
-            fill: @tab-green;
+            fill: var(--tab-green);
         }
         .tab-color-icon.color-orange path {
-            fill: @tab-orange;
+            fill: var(--tab-orange);
         }
         .tab-color-icon.color-red path {
-            fill: @tab-red;
+            fill: var(--tab-red);
         }
         .tab-color-icon.color-yellow path {
-            fill: @tab-yellow;
+            fill: var(--tab-yellow);
         }
         .tab-color-icon.color-blue path {
-            fill: @tab-blue;
+            fill: var(--tab-blue);
         }
         .tab-color-icon.color-mint path {
-            fill: @tab-mint;
+            fill: var(--tab-mint);
         }
         .tab-color-icon.color-cyan path {
-            fill: @tab-cyan;
+            fill: var(--tab-cyan);
         }
         .tab-color-icon.color-white path {
-            fill: @tab-white;
+            fill: var(--tab-white);
         }
         .tab-color-icon.color-violet path {
-            fill: @tab-violet;
+            fill: var(--tab-violet);
         }
         .tab-color-icon.color-pink path {
-            fill: @tab-pink;
+            fill: var(--tab-pink);
         }
 
         .tab-colors,
@@ -817,7 +809,7 @@ a.a-block {
         .action-text {
             margin-left: 20px;
 
-            color: @term-red;
+            color: var(--term-red);
         }
 
         .settings-share-link {
diff --git a/src/app/bookmarks/bookmarks.less b/src/app/bookmarks/bookmarks.less
index f781a5a3a..17f6fea7c 100644
--- a/src/app/bookmarks/bookmarks.less
+++ b/src/app/bookmarks/bookmarks.less
@@ -1,7 +1,5 @@
-@import "@/common/themes/themes.less";
-
 .bookmarks-view {
-    background-color: @background-session;
+    background-color: var(--session-bg-color);
 
     .close-button {
         position: absolute;
@@ -14,7 +12,7 @@
         svg {
             width: 1.5em;
             height: 1.5em;
-            fill: @base-color;
+            fill: var(--app-text-color);
         }
     }
 
@@ -31,15 +29,15 @@
     .icon {
         width: 1em;
         height: 1em;
-        fill: @base-color;
+        fill: var(--app-text-color);
     }
 
     .bookmarks-list {
-        color: @term-white;
+        color: var(--bookmarks-text-color);
         margin: 4px 10px 5px 5px;
 
         .no-bookmarks {
-            color: @term-white;
+            color: var(--bookmarks-text-color);
             padding: 30px 10px 35px 10px;
             border-bottom: 1px solid white;
         }
@@ -75,21 +73,21 @@
         }
 
         label {
-            color: @term-white;
+            color: var(--bookmarks-text-color);
             margin-bottom: 4px;
         }
 
         textarea {
             width: 80%;
             min-width: 50%;
-            color: @term-white;
-            background-color: @term-black;
+            color: var(--bookmarks-text-color);
+            background-color: var(--bookmarks-textarea-bg-color);
         }
 
         .bookmark-id-div {
             display: none;
             position: absolute;
-            color: @disabled-color;
+            color: var(--bookmarks-disabled-text-color);
             right: 5px;
             bottom: 2px;
             font-size: 0.8em;
@@ -104,7 +102,7 @@
             flex-direction: row;
 
             visibility: hidden;
-            color: @term-white;
+            color: var(--bookmarks-text-color);
 
             .bookmark-control:first-child {
                 margin-left: 0;
@@ -116,7 +114,7 @@
                 padding: 2px;
 
                 &:hover {
-                    color: @term-bright-white;
+                    color: var(--bookmarks-control-hover-color);
                 }
             }
         }
diff --git a/src/app/clientsettings/clientsettings.less b/src/app/clientsettings/clientsettings.less
index e0950e44e..efd548b8e 100644
--- a/src/app/clientsettings/clientsettings.less
+++ b/src/app/clientsettings/clientsettings.less
@@ -1,7 +1,7 @@
 @import "@/common/themes/themes.less";
 
 .clientsettings-view {
-    background-color: @background-session;
+    background-color: var(--session-bg-color);
     flex-grow: 1;
     display: flex;
     flex-direction: column;
@@ -58,12 +58,12 @@
         }
 
         &.settings-error {
-            color: @term-red;
+            color: var(--view-error-color);
             margin-top: 20px;
             padding: 10px;
             border-radius: 5px;
             background-color: #200707;
-            border: 1px solid @term-red;
+            border: 1px solid var(--view-error-color);
             font-weight: bold;
 
             .error-dismiss {
@@ -119,37 +119,37 @@
             }
 
             .tab-color-icon.color-default path {
-                fill: @tab-green;
+                fill: var(--tab-green);
             }
             .tab-color-icon.color-green path {
-                fill: @tab-green;
+                fill: var(--tab-green);
             }
             .tab-color-icon.color-orange path {
-                fill: @tab-orange;
+                fill: var(--tab-orange);
             }
             .tab-color-icon.color-red path {
-                fill: @tab-red;
+                fill: var(--tab-red);
             }
             .tab-color-icon.color-yellow path {
-                fill: @tab-yellow;
+                fill: var(--tab-yellow);
             }
             .tab-color-icon.color-blue path {
-                fill: @tab-blue;
+                fill: var(--tab-blue);
             }
             .tab-color-icon.color-mint path {
-                fill: @tab-mint;
+                fill: var(--tab-mint);
             }
             .tab-color-icon.color-cyan path {
-                fill: @tab-cyan;
+                fill: var(--tab-cyan);
             }
             .tab-color-icon.color-white path {
-                fill: @tab-white;
+                fill: var(--tab-white);
             }
             .tab-color-icon.color-violet path {
-                fill: @tab-violet;
+                fill: var(--tab-violet);
             }
             .tab-color-icon.color-pink path {
-                fill: @tab-pink;
+                fill: var(--tab-pink);
             }
 
             .tab-colors,
@@ -189,7 +189,7 @@
             .action-text {
                 margin-left: 20px;
 
-                color: @term-red;
+                color: var(--view-error-color);
             }
 
             .settings-share-link {
diff --git a/src/app/common/elements/button.less b/src/app/common/elements/button.less
index d2303acc4..f4a537876 100644
--- a/src/app/common/elements/button.less
+++ b/src/app/common/elements/button.less
@@ -15,35 +15,26 @@
     border-radius: 6px;
     height: auto;
 
-    &:hover {
-        color: @term-white;
-    }
-
-    i {
-        fill: rgba(255, 255, 255, 0.12);
-    }
-
     &.primary {
-        color: @term-green;
         background: none;
 
         i {
-            fill: @term-green;
+            fill: var(--button-primary-bg-color);
         }
 
         &.solid {
-            color: @term-bright-white;
-            background: @term-green;
+            color: var(--button-text-color);
+            background: var(--button-primary-bg-color);
             box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
                 0px 0px 0.5px 0px rgba(255, 255, 255, 0.8) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.6) inset;
 
             i {
-                fill: @term-white;
+                fill: var(--app-text-color);
             }
         }
 
         &.outlined {
-            border: 1px solid @term-green;
+            border: 1px solid var(--button-primary-bg-color);
         }
 
         &.ghost {
@@ -51,68 +42,32 @@
         }
 
         &:hover {
-            color: @term-bright-white;
+            color: var(--button-text-color);
         }
     }
 
     &.secondary {
-        color: @term-white;
+        color: var(--app-text-color);
         background: none;
 
         &.solid {
-            background: rgba(255, 255, 255, 0.09);
+            background: var(--button-secondary-bg-color);
             box-shadow: none;
         }
 
         &.outlined {
-            border: 1px solid rgba(255, 255, 255, 0.09);
+            border: 1px solid var(--button-secondary-bg-color);
         }
 
         &.ghost {
             padding: 6px 10px;
 
             i {
-                fill: @term-green;
+                fill: var(--button-primary-bg-color);
             }
         }
     }
 
-    &.color-yellow {
-        &.solid {
-            border-color: @warning-yellow;
-            background-color: mix(@warning-yellow, @term-white, 50%);
-            box-shadow: none;
-        }
-
-        &.outlined {
-            color: @warning-yellow;
-            border-color: @warning-yellow;
-            &:hover {
-                color: @term-white;
-                border-color: @term-white;
-            }
-        }
-
-        &.ghost {
-        }
-    }
-
-    &.color-red {
-        &.solid {
-            border-color: @term-red;
-            background-color: mix(@term-red, @term-white, 50%);
-            box-shadow: none;
-        }
-
-        &.outlined {
-            color: @term-red;
-            border-color: @term-red;
-        }
-
-        &.ghost {
-        }
-    }
-
     &.disabled {
         opacity: 0.5;
     }
diff --git a/src/app/common/elements/checkbox.less b/src/app/common/elements/checkbox.less
index 82e126b7c..37d4b4b82 100644
--- a/src/app/common/elements/checkbox.less
+++ b/src/app/common/elements/checkbox.less
@@ -12,7 +12,7 @@
         position: relative;
         display: flex;
         align-items: center;
-        color: @term-bright-white;
+        color: var(--checkbox-bg-color);
         transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1);
     }
     input[type="checkbox"] + label > span {
@@ -38,7 +38,7 @@
     }
 
     input[type="checkbox"]:checked + label > span {
-        border: 10px solid @term-green;
+        border: 10px solid var(--button-primary-bg-color);
     }
     input[type="checkbox"]:checked + label > span:before {
         content: "";
@@ -47,8 +47,8 @@
         left: 3px;
         width: 7px;
         height: 12px;
-        border-right: 2px solid #fff;
-        border-bottom: 2px solid #fff;
+        border-right: 2px solid var(--checkbox-check-color);
+        border-bottom: 2px solid var(--checkbox-check-color);
         transform: rotate(45deg);
         transform-origin: 0% 100%;
         animation: checkbox-check 500ms cubic-bezier(0.4, 0, 0.23, 1);
diff --git a/src/app/common/elements/cmdstrcode.less b/src/app/common/elements/cmdstrcode.less
index 2f54d4301..c4b2e2f50 100644
--- a/src/app/common/elements/cmdstrcode.less
+++ b/src/app/common/elements/cmdstrcode.less
@@ -38,7 +38,7 @@
     }
 
     .code-div {
-        background-color: @term-black;
+        background-color: var(--cmdstrcode-bg-color);
         display: flex;
         flex-direction: row;
         min-width: 100px;
@@ -48,10 +48,10 @@
         code {
             flex-shrink: 0;
             min-width: 100px;
-            color: @term-white;
+            color: var(--cmdstrcode-text-color);
             white-space: pre;
             padding: 2px 8px 2px 8px;
-            background-color: @term-black;
+            background-color: var(--cmdstrcode-bg-color);
             font-size: 1em;
             font-family: @fixed-font;
         }
@@ -74,7 +74,7 @@
             width: 20px;
 
             &:hover {
-                color: @term-white;
+                color: var(--cmdstrcode-text-color);
             }
         }
     }
@@ -83,20 +83,3 @@
         visibility: visible !important;
     }
 }
-
-.copied-indicator {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: @term-white;
-    opacity: 0;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    animation-name: fade-in-out;
-    animation-duration: 0.3s;
-}
diff --git a/src/app/common/elements/dropdown.less b/src/app/common/elements/dropdown.less
index 8a6ad050f..b885eb23b 100644
--- a/src/app/common/elements/dropdown.less
+++ b/src/app/common/elements/dropdown.less
@@ -21,7 +21,7 @@
         top: 16px;
         font-size: 12.5px;
         transition: all 0.3s;
-        color: @term-white;
+        color: var(--dropdown-text-color);
         line-height: 10px;
 
         &.float {
@@ -94,11 +94,11 @@
     }
 
     &-error {
-        border-color: @term-red;
+        border-color: var(--dropdown-error-color);
     }
 
     &:focus {
-        border-color: @term-green;
+        border-color: var(--dropdown-focus-color);
     }
 }
 
diff --git a/src/app/common/elements/markdown.less b/src/app/common/elements/markdown.less
index dd776d46f..562b32dab 100644
--- a/src/app/common/elements/markdown.less
+++ b/src/app/common/elements/markdown.less
@@ -1,7 +1,7 @@
 @import "@/common/themes/themes.less";
 
 .markdown {
-    color: @term-white;
+    color: var(--app-text-color);
     font-family: @markdown-font;
     font-size: 14px;
     overflow-wrap: break-word;
@@ -11,8 +11,8 @@
     }
 
     code {
-        background-color: @markdown-highlight;
-        color: @term-white;
+        background-color: var(--markdown-bg-color);
+        color: var(--app-text-color);
         font-family: var(--termfontfamily);
         border-radius: 4px;
     }
@@ -24,13 +24,13 @@
     }
 
     .title {
-        color: @term-white;
+        color: var(--app-text-color);
         margin-top: 16px;
         margin-bottom: 8px;
     }
 
     strong {
-        color: @term-white;
+        color: var(--app-text-color);
     }
 
     a {
@@ -39,7 +39,7 @@
 
     table {
         tr th {
-            color: @term-white;
+            color: var(--app-text-color);
         }
     }
 
@@ -57,19 +57,19 @@
     blockquote {
         margin: 4px 10px 4px 10px;
         border-radius: 3px;
-        background-color: @markdown-highlight;
+        background-color: var(--markdown-bg-color);
         padding: 2px 4px 2px 6px;
     }
 
     pre {
-        background-color: @markdown-highlight;
+        background-color: var(--markdown-bg-color);
         margin: 4px 10px 4px 10px;
         padding: 6px 6px 6px 10px;
         border-radius: 4px;
     }
 
     pre.selected {
-        outline: 2px solid @term-green;
+        outline: 2px solid var(--markdown-outline-color);
     }
 
     .title.is-1 {
diff --git a/src/app/common/elements/status.less b/src/app/common/elements/status.less
index e7d15dd98..9dae11813 100644
--- a/src/app/common/elements/status.less
+++ b/src/app/common/elements/status.less
@@ -13,18 +13,18 @@
     }
 
     .dot.green {
-        background-color: @status-connected;
+        background-color: var(--status-connected-color);
     }
 
     .dot.red {
-        background-color: @status-error;
+        background-color: var(--status-error-color);
     }
 
     .dot.gray {
-        background-color: @status-disconnected;
+        background-color: var(--status-disconnected-color);
     }
 
     .dot.yellow {
-        background-color: @status-connecting;
+        background-color: var(--status-connecting-color);
     }
 }
diff --git a/src/app/common/elements/textfield.less b/src/app/common/elements/textfield.less
index 2354c808f..06ba54ca2 100644
--- a/src/app/common/elements/textfield.less
+++ b/src/app/common/elements/textfield.less
@@ -18,7 +18,7 @@
     }
 
     &.focused {
-        border-color: @term-green;
+        border-color: var(--textfield-focused-border-color);
     }
 
     &.disabled {
@@ -26,7 +26,7 @@
     }
 
     &.error {
-        border-color: @term-red;
+        border-color: var(--textfield-error-border-color);
     }
 
     &-inner {
@@ -42,7 +42,7 @@
             top: 16px;
             font-size: 12.5px;
             transition: all 0.3s;
-            color: @text-secondary;
+            color: var(--textfield-label-color);
             line-height: 10px;
 
             &.float {
@@ -63,7 +63,7 @@
             font-size: 16px;
             outline: none;
             background-color: transparent;
-            color: @term-bright-white;
+            color: var(--textfield-text-color);
             line-height: 20px;
 
             &.offset-left {
diff --git a/src/app/common/elements/textfield.tsx b/src/app/common/elements/textfield.tsx
index a129eb22e..b4b562d6b 100644
--- a/src/app/common/elements/textfield.tsx
+++ b/src/app/common/elements/textfield.tsx
@@ -17,6 +17,7 @@ interface TextFieldProps {
     value?: string;
     className?: string;
     onChange?: (value: string) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     placeholder?: string;
     defaultValue?: string;
     decoration?: TextFieldDecorationProps;
@@ -157,6 +158,7 @@ class TextField extends React.Component<TextFieldProps, TextFieldState> {
                         onChange={this.handleInputChange}
                         onFocus={this.handleFocus}
                         onBlur={this.handleBlur}
+                        onKeyDown={this.props.onKeyDown}
                         placeholder={placeholder}
                         maxLength={maxLength}
                         autoFocus={autoFocus}
diff --git a/src/app/common/elements/toggle.less b/src/app/common/elements/toggle.less
index 81ef1c485..36176c7f8 100644
--- a/src/app/common/elements/toggle.less
+++ b/src/app/common/elements/toggle.less
@@ -20,7 +20,7 @@
         bottom: 0;
         left: 0;
         right: 0;
-        background-color: #333;
+        background-color: var(--toggle-bg-color);
         transition: 0.5s;
         border-radius: 33px;
     }
@@ -32,13 +32,13 @@
         width: 18px;
         left: 2px;
         bottom: 2px;
-        background-color: @term-white;
+        background-color: var(--toggle-thumb-color);
         transition: 0.5s;
         border-radius: 50%;
     }
 
     input:checked + .slider {
-        background-color: @term-green;
+        background-color: var(--toggle-checked-bg-color);
     }
 
     input:checked + .slider:before {
diff --git a/src/app/common/elements/tooltip.less b/src/app/common/elements/tooltip.less
index f37f925c6..7107a1a56 100644
--- a/src/app/common/elements/tooltip.less
+++ b/src/app/common/elements/tooltip.less
@@ -17,7 +17,7 @@
     i {
         display: inline;
         font-size: 13px;
-        fill: @base-color;
+        fill: var(--checkbox-text-color);
         padding-top: 0.2em;
     }
 }
diff --git a/src/app/common/icons/icons.less b/src/app/common/icons/icons.less
index 64b081c8f..2101f55a6 100644
--- a/src/app/common/icons/icons.less
+++ b/src/app/common/icons/icons.less
@@ -75,18 +75,18 @@ The following accounts for a debounce in the status indicator. We will only disp
         visibility: hidden;
     }
     .spin #spinner {
-        stroke: @term-white;
+        stroke: var(--status-indicator-color);
     }
     &.error #indicator {
         visibility: visible;
-        fill: @term-red;
+        fill: var(--status-indicator-error);
     }
     &.success #indicator {
         visibility: visible;
-        fill: @term-green;
+        fill: var(--status-indicator-success);
     }
     &.output #indicator {
         visibility: visible;
-        fill: @term-white;
+        fill: var(--status-indicator-color);
     }
 }
diff --git a/src/app/common/modals/about.less b/src/app/common/modals/about.less
index e6ec8869b..fca8028b7 100644
--- a/src/app/common/modals/about.less
+++ b/src/app/common/modals/about.less
@@ -38,12 +38,12 @@
                     line-height: 20px;
 
                     div:first-child {
-                        color: @term-bright-white;
+                        color: var(--app-text-primary-color);
                         font-size: 14.5px;
                     }
 
                     div:last-child {
-                        color: @term-white;
+                        color: var(--app-text-color);
                         text-align: left;
                     }
                 }
@@ -61,7 +61,7 @@
                     }
 
                     div:first-child + div {
-                        color: @term-white;
+                        color: var(--app-text-color);
                     }
                 }
 
@@ -72,7 +72,7 @@
                         margin-bottom: 5px;
 
                         i {
-                            color: @term-green;
+                            color: var(--status-updated-color);
                         }
                     }
                 }
@@ -80,7 +80,7 @@
                 .status.outdated {
                     div {
                         i {
-                            color: @term-yellow;
+                            color: var(--status-outdated-color);
                         }
                     }
 
@@ -107,7 +107,7 @@
 
             .about-section:last-child {
                 margin-bottom: 24px;
-                color: @term-white;
+                color: var(--app-text-color);
             }
         }
     }
diff --git a/src/app/common/modals/disconnected.less b/src/app/common/modals/disconnected.less
index 7ff50c612..9222ac490 100644
--- a/src/app/common/modals/disconnected.less
+++ b/src/app/common/modals/disconnected.less
@@ -8,7 +8,7 @@
             .modal-content {
                 footer {
                     .footer-text-link {
-                        color: @term-white;
+                        color: var(--app-text-color);
                         cursor: pointer;
                     }
                 }
@@ -31,17 +31,11 @@
                     }
 
                     pre {
-                        color: @term-white;
-                        background-color: @term-black;
+                        color: var(--app-text-color);
+                        background-color: var(--pre-bg-color);
                     }
                 }
             }
         }
-
-        .wave-modal-footer {
-            button:first-child {
-                color: @term-green;
-            }
-        }
     }
 }
diff --git a/src/app/common/modals/editremoteconn.less b/src/app/common/modals/editremoteconn.less
index ff5284250..aec723cfe 100644
--- a/src/app/common/modals/editremoteconn.less
+++ b/src/app/common/modals/editremoteconn.less
@@ -34,7 +34,7 @@
                 gap: 12px;
 
                 .name {
-                    color: @term-bright-white;
+                    color: var(--app-text-primary-color);
                     font-size: 15px;
                     font-weight: 500;
                     line-height: 20px;
diff --git a/src/app/common/modals/linesettings.less b/src/app/common/modals/linesettings.less
index 23cb8d497..70f23439c 100644
--- a/src/app/common/modals/linesettings.less
+++ b/src/app/common/modals/linesettings.less
@@ -16,7 +16,7 @@
             width: 100%;
 
             .settings-input .hotkey {
-                color: @text-secondary;
+                color: var(--hotkey-text-color);
             }
         }
     }
diff --git a/src/app/common/modals/tos.less b/src/app/common/modals/tos.less
index 6327a7a74..11280b405 100644
--- a/src/app/common/modals/tos.less
+++ b/src/app/common/modals/tos.less
@@ -25,7 +25,7 @@
                 }
 
                 .modal-subtitle {
-                    color: @term-white;
+                    color: var(--app-text-color);
                     text-align: center;
 
                     font-style: normal;
@@ -56,13 +56,13 @@
                         flex: 1 0 0;
 
                         .item-title {
-                            color: @term-bright-white;
+                            color: var(--app-text-primary-color);
                             font-style: normal;
                             line-height: 20px;
                         }
 
                         .item-text {
-                            color: @term-white;
+                            color: var(--app-text-color);
                             font-style: normal;
                             line-height: 20px;
                         }
diff --git a/src/app/common/modals/viewremoteconndetail.less b/src/app/common/modals/viewremoteconndetail.less
index f59838f6f..c730f8abf 100644
--- a/src/app/common/modals/viewremoteconndetail.less
+++ b/src/app/common/modals/viewremoteconndetail.less
@@ -34,7 +34,7 @@
                 }
 
                 .rconndetail-name {
-                    color: @term-bright-white;
+                    color: var(--app-text-primary-color);
                     font-size: 15px;
                     font-weight: 500;
                     line-height: 20px;
@@ -73,7 +73,7 @@
                         display: flex;
                         flex-direction: row;
                         align-items: center;
-                        color: @term-white;
+                        color: var(--app-text-color);
                     }
                 }
 
diff --git a/src/app/common/prompt/prompt.less b/src/app/common/prompt/prompt.less
index 0a59057fd..543b687ad 100644
--- a/src/app/common/prompt/prompt.less
+++ b/src/app/common/prompt/prompt.less
@@ -11,7 +11,7 @@
         vertical-align: middle;
         width: 1.2em;
         height: 1.2em;
-        fill: @wave-green;
+        fill: var(--app-accent-color);
     }
 
     i {
@@ -19,57 +19,57 @@
     }
 
     .term-prompt-branch {
-        color: @term-white;
+        color: var(--prompt-white);
     }
 
     .term-prompt-python {
-        color: @term-bright-magenta;
+        color: var(--prompt-bright-magenta);
     }
 
     .term-prompt-remote {
     }
 
     .term-prompt-remote {
-        color: @term-bright-green;
+        color: var(--prompt-bright-green);
 
         &.color-green {
-            color: @term-bright-green;
+            color: var(--prompt-bright-green);
         }
 
         &.color-red {
-            color: @term-bright-red;
+            color: var(--prompt-bright-red);
         }
 
         &.color-blue {
-            color: @term-bright-blue;
+            color: var(--prompt-bright-blue);
         }
 
         &.color-yellow {
-            color: @term-bright-yellow;
+            color: var(--prompt-bright-yellow);
         }
 
         &.color-magenta {
-            color: @term-bright-magenta;
+            color: var(--prompt-bright-magenta);
         }
 
         &.color-cyan {
-            color: @term-bright-cyan;
+            color: var(--prompt-bright-cyan);
         }
 
         &.color-white {
-            color: @term-bright-white;
+            color: var(--prompt-bright-white);
         }
 
         &.color-orange {
-            color: @tab-orange;
+            color: var(--prompt-orange);
         }
     }
 
     .term-prompt-cwd {
-        color: @term-bright-green;
+        color: var(--prompt-bright-green);
     }
 
     .term-prompt-end {
-        color: @term-bright-green;
+        color: var(--prompt-bright-green);
     }
 }
diff --git a/src/app/connections/connections.less b/src/app/connections/connections.less
index 48cf9378e..f4b5f3251 100644
--- a/src/app/connections/connections.less
+++ b/src/app/connections/connections.less
@@ -39,13 +39,13 @@
             th {
                 height: 32px;
                 padding: 5px 15px 5px 10px;
-                color: @text-secondary;
+                color: var(--view-text-color);
             }
         }
 
         tr.connections-item {
             border-bottom: 1px solid rgba(241, 246, 243, 0.15);
-            color: @text-secondary;
+            color: var(--view-text-color);
             cursor: pointer;
 
             &:hover {
diff --git a/src/app/history/history.less b/src/app/history/history.less
index 161e23404..ac387a4d8 100644
--- a/src/app/history/history.less
+++ b/src/app/history/history.less
@@ -1,12 +1,12 @@
 @import "@/common/themes/themes.less";
 
 .history-view {
-    background-color: @background-session;
+    background-color: var(--session-bg-color);
 
     .icon {
         width: 1.3em !important;
         height: 1.3em !important;
-        fill: @base-color;
+        fill: var(--app-text-color);
     }
 
     .history-checkbox {
@@ -51,7 +51,7 @@
         svg {
             width: 1.5em;
             height: 1.5em;
-            fill: @base-color;
+            fill: var(--app-text-color);
         }
     }
 
@@ -63,15 +63,6 @@
             font-weight: bold;
             font-size: 1.5em;
         }
-
-        input {
-            border: none;
-            border-radius: 4px;
-            font-size: 1em;
-            padding: 0.5em 1em;
-            background-color: @background-session-components;
-            color: @base-color;
-        }
     }
 
     .history-search {
@@ -99,7 +90,7 @@
                 .label {
                     display: inline;
                     vertical-align: middle;
-                    color: @base-color;
+                    color: var(--app-text-color);
                 }
                 .icon {
                     vertical-align: middle;
@@ -110,7 +101,7 @@
             .session-dropdown,
             .remote-dropdown {
                 .dropdown-item {
-                    color: @term-white;
+                    color: var(--app-text-color);
                     cursor: pointer;
                     &:hover {
                         background-color: #666;
@@ -130,7 +121,7 @@
             .search-checkbox {
                 margin-left: 15px;
                 padding: 5px 10px 5px 10px;
-                background: @base-border;
+                background: var(--button-secondary-bg-color);
                 border-radius: 4px;
                 display: flex;
                 flex-direction: row;
@@ -163,7 +154,7 @@
 
             .reset-button {
                 margin-left: 1em;
-                color: @base-color;
+                color: var(--app-text-color);
                 line-height: 1.75em;
             }
         }
@@ -191,7 +182,7 @@
         .trash-icon {
             width: 12px;
             height: 12px;
-            fill: @text-secondary;
+            fill: var(--app-text-color);
         }
 
         .control-checkbox {
@@ -216,11 +207,11 @@
             }
 
             &:hover {
-                color: @term-white;
+                color: var(--app-text-color);
             }
 
             &.delete-button.is-active {
-                color: @term-bright-red !important;
+                color: var(--view-error-color) !important;
             }
         }
 
@@ -273,7 +264,7 @@
                 .line-container {
                     padding: 0px 10px 10px 10px;
                     overflow-x: auto;
-                    background-color: @term-black;
+                    background-color: var(--prompt-black);
                 }
 
                 .line-context {
@@ -285,10 +276,10 @@
 
                     .vic-btn {
                         cursor: pointer;
-                        color: @term-white;
+                        color: var(--app-text-color);
 
                         &:hover {
-                            color: @term-white;
+                            color: var(--app-text-color);
                         }
                     }
                 }
@@ -312,7 +303,7 @@
             display: flex;
             border-bottom: 1px solid rgba(250, 250, 250, 0.1);
             align-items: center;
-            color: @text-secondary;
+            color: var(--app-text-color);
 
             &.is-selected {
                 background-color: #222;
@@ -373,7 +364,7 @@
             }
 
             td.cmdstr {
-                color: @term-white;
+                color: var(--app-text-color);
                 flex: 1 0 0;
                 border-radius: 3px;
                 white-space: pre;
diff --git a/src/app/history/history.tsx b/src/app/history/history.tsx
index f16d0927a..228ea62f0 100644
--- a/src/app/history/history.tsx
+++ b/src/app/history/history.tsx
@@ -13,8 +13,8 @@ import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import { Line } from "@/app/line/linecomps";
-import { CmdStrCode } from "@/common/elements";
 import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "@/util/keyutil";
+import { TextField } from "@/elements";
 
 import { ReactComponent as XmarkIcon } from "@/assets/icons/line/xmark.svg";
 import { ReactComponent as AngleDownIcon } from "@/assets/icons/history/angle-down.svg";
@@ -194,9 +194,9 @@ class HistoryView extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    changeSearchText(e: any) {
+    changeSearchText(val: string) {
         mobx.action(() => {
-            GlobalModel.historyViewModel.searchText.set(e.target.value);
+            GlobalModel.historyViewModel.searchText.set(val);
         })();
     }
 
@@ -433,19 +433,12 @@ class HistoryView extends React.Component<{}, {}> {
                     <div className="history-title">History</div>
                     <div className="history-search">
                         <div className="main-search field">
-                            <p className="control has-icons-left">
-                                <input
-                                    className="input"
-                                    type="text"
-                                    placeholder="Exact String Search"
-                                    value={hvm.searchText.get()}
-                                    onChange={this.changeSearchText}
-                                    onKeyDown={this.searchKeyDown}
-                                />
-                                <span className="is-small is-left">
-                                    <SearchIcon className="icon" />
-                                </span>
-                            </p>
+                            <TextField
+                                placeholder="Exact String Search"
+                                onChange={this.changeSearchText}
+                                onKeyDown={this.searchKeyDown}
+                                decoration={{ startDecoration: <SearchIcon className="icon" /> }}
+                            />
                         </div>
                         <div className="advanced-search">
                             <div
diff --git a/src/app/root.less b/src/app/root.less
index b2c51197f..be6d009a3 100644
--- a/src/app/root.less
+++ b/src/app/root.less
@@ -10,103 +10,123 @@
     --termlineheight: 15px;
     --termpad: 7px; // padding value (scaled to termfontsize)
 
-    // primary
-    --primary-text-color: #eceeec;
-    --primary-icon-color: var(--primary-text-color);
-    --primary-border-color: #333;
-    --primary-background-color: rgba(21, 23, 21, 1);
-    --primary-background: rgba(21, 23, 21, 1);
-    --primary-accent-color: rgb(88, 193, 66);
-    --wave-green: rgb(88, 193, 66);
-    --wave-green-faded: rgba(88, 193, 66, 0.4);
-    --success-green: rgb(38, 97, 26);
-    --error-red: #cc0000;
-    --warning-yellow: #ffa500;
-
-    --text-primary: #fff;
-    --text-secondary: #c3c8c2;
-    --text-caption: #8b918a;
-
-    --base-background-transparent: rgba(21, 23, 21, 0.7);
-    --base-background-dev: rgba(21, 23, 48, 0.7);
-    --background-session: rgba(13, 13, 13, 0.85);
-    --background-session-components: rgba(48, 49, 48, 0.6);
-    --background-session-components-solid: rgb(33, 34, 33);
-
-    --cmd-input-border-color: rgba(88, 193, 66, 0.8);
-
-    --disabled-background: rgba(76, 81, 75, 1);
-    --disabled-color: #adadad;
-    --disabled-color-faded: rgba(173, 173, 173, 0.6);
-    --scrollbar-background: rgba(21, 23, 21, 1);
-    --scrollbar-thumb-background: rgb(134, 134, 134);
-    --button-background: rgb(38, 38, 38);
-    --button-disabled-background: rgb(30, 29, 29);
-
-    --textarea-background: #2a2a2a;
-
-    --status-connected: #46a758;
-    --status-connecting: #f5d90a;
-    --status-error: #e54d2e;
-    --status-disconnected: #c3c8c2;
-
-    --term-text-error: #cc0000;
-    --term-error-color: rgb(204, 0, 0);
-    --term-text-yellow: #c4a000;
-    --term-black: #000000;
-    --term-text-red: #cc0000;
-    --term-green: #4e9a06;
-    --term-blue: #3465a4;
-    --term-cyan: #06989a;
-    --term-text-white: #d3d7cf;
-    --term-bright-red: #ef2929;
-    --term-bright-green: #58c142;
-    --term-bright-yellow: #fce94f;
-    --term-bright-blue: #32afff;
-    --term-bright-magenta: #ad7fa8;
-    --term-bright-cyan: #34e2e2;
-    --term-bright-white: #ffffff;
-
-    --button-bg-yellow: #e9be68;
-    --button-bg-red: #d06c68;
-
-    --history-error-red: #d06c68;
-    --history-selected-error-red: #f79494;
-
-    --tab-red: #e54d2e;
-    --tab-orange: #ef713b;
-    --tab-yellow: #e0b956;
-    --tab-green: #58c142;
-    --tab-mint: #4bffa9;
-    --tab-cyan: #4bdfff;
-    --tab-blue: #3971ff;
-    --tab-violet: #ba76ff;
-    --tab-pink: #e05677;
-    --tab-white: #ffffff;
-
-    --soft-blue: #729fcf;
-    --active-menu-color: rgb(0, 71, 171);
-
+    // global colors
     --app-accent-color: rgb(88, 193, 66);
     --app-error-color: rgb(204, 0, 0);
     --app-warning-color: rgb(255, 165, 0);
-    --app-scrollbar-thumb-color: rgb(134, 134, 134);
-    --app-text-color: rgb(236, 238, 236);
-    --app-border-color: #333;
-    --app-border: rgba(241, 246, 243, 0.08);
+    --app-text-color: rgb(211, 215, 207);
+    --app-text-primary-color: rgb(255, 255, 255);
+    --app-text-secondary-color: rgb(195, 200, 194);
+    --app-border-color: rgb(51, 51, 51);
+    --app-bg-color: rgba(21, 23, 21, 1);
+    --app-bg-color-dev: rgba(21, 23, 48, 1);
 
-    --sidebar-dev-bg-color: #151730;
-    --sidebar-separator-color: rgba(241, 246, 243, 0.08);
-    --sidebar-workspace-active-color: rgba(241, 246, 243, 0.08);
-    --sidebar-separator-color: rgba(241, 246, 243, 0.08);
-    --sidebar-settings-color: #ffffff;
+    // global generic colors
+    --app-black: rgb(0, 0, 0);
 
-    --line-sidebar-message-text: #c4a000;
+    // scrollbar colors
+    --scrollbar-background-color: rgba(21, 23, 21, 1);
+    --scrollbar-thumb-color: rgb(134, 134, 134);
+
+    // code color
+    --pre-bg-color: rgb(0, 0, 0);
+
+    // tab colors
+    --tab-red: rgb(229, 77, 46);
+    --tab-orange: rgb(239, 113, 59);
+    --tab-yellow: rgb(224, 185, 86);
+    --tab-green: rgb(88, 193, 66);
+    --tab-mint: rgb(75, 255, 169);
+    --tab-cyan: rgb(75, 223, 255);
+    --tab-blue: rgb(57, 113, 255);
+    --tab-violet: rgb(186, 118, 255);
+    --tab-pink: rgb(224, 86, 119);
+    --tab-white: rgb(255, 255, 255);
+
+    // prompt colors
+    --prompt-black: rgb(0, 0, 0);
+    --prompt-white: rgb(211, 215, 207);
+    --prompt-orange: rgb(239, 113, 59);
+    --prompt-blue: rgb(52, 101, 164);
+    --prompt-bright-black: rgb(85, 87, 83);
+    --prompt-bright-red: rgb(239, 41, 41);
+    --prompt-bright-green: rgb(88, 193, 66);
+    --prompt-bright-yellow: rgb(252, 233, 79);
+    --prompt-bright-blue: rgb(50, 175, 255);
+    --prompt-bright-magenta: rgb(173, 127, 168);
+    --prompt-bright-cyan: rgb(52, 226, 226);
+    --prompt-bright-white: rgb(255, 255, 255);
+
+    // button colors
+    --button-text-color: rgb(255, 255, 255);
+    --button-primary-bg-color: rgb(78, 154, 6);
+    --button-secondary-bg-color: rgba(255, 255, 255, 0.09);
+    --button-warning-bg-color: rgb(204, 0, 0);
+
+    // input colors
+    --checkbox-text-color: rgb(255, 255, 255);
+    --checkbox-bg-color: rgb(78, 154, 6);
+    --checkbox-check-color: rgb(255, 255, 255);
+
+    // dropdown colors
+    --dropdown-text-color: rgb(211, 215, 207);
+    --dropdown-error-color: rgb(229, 77, 46);
+    --dropdown-focus-color: rgb(78, 154, 6);
+
+    // textfield colors
+    --textfield-focused-border-color: rgb(78, 154, 6);
+    --textfield-error-border-color: rgb(229, 77, 46);
+    --textfield-label-color: rgb(195, 200, 194);
+    --textfield-text-color: rgb(255, 255, 255);
+
+    // toggle colors
+    --toggle-bg-color: rgb(51, 51, 51);
+    --toggle-thumb-color: rgb(211, 215, 207);
+    --toggle-checked-bg-color: rgb(78, 154, 6);
+
+    // cmdstrcode colors
+    --cmdstrcode-bg-color: rgb(0, 0, 0);
+    --cmdstrcode-text-color: rgb(211, 215, 207);
+
+    // markdown colors
+    --markdown-bg-color: rgb(35, 35, 35);
+    --markdown-outline-color: rgb(78, 154, 6);
+
+    // status(remote) colors
+    // todo: all status colors must be unified
+    --status-connected-color: rgb(70, 167, 88);
+    --status-connecting-color: rgb(245, 217, 10);
+    --status-error-color: rgb(229, 77, 46);
+    --status-disconnected-color: rgb(195, 200, 194);
+
+    // status indicator colors
+    // todo: all status colors must be unified
+    --status-indicator-color: rgb(211, 215, 207);
+    --status-indicator-error: rgb(204, 0, 0);
+    --status-indicator-success: rgb(78, 154, 6);
+
+    // status(version) colors
+    // todo: all status colors must be unified
+    --status-outdated-color: rgb(196, 160, 0);
+    --status-updated-color: rgb(78, 154, 6);
+
+    // term status colors
+    // todo: all status colors must be unified
+    --term-error-color: rgb(204, 0, 0);
+    --term-warning-color: rgb(196, 160, 0);
+
+    // hotkey colors
+    --hotkey-text-color: rgb(195, 200, 194);
+
+    // sidebar colors
+    --sidebar-dev-bg-color: rgb(21, 23, 48);
+    --sidebar-settings-color: rgb(255, 255, 255);
+
+    // line colors
     --line-sidebar-message-color: rgb(196, 160, 0);
-
     --line-background: rgba(21, 23, 21, 1);
     --line-avatar-color: #eceeec;
-    --line-text-color: #f2f4f2;
+    --line-text-color: rgb(211, 215, 207);
     --line-svg-fill-color: rgb(150, 152, 150);
     --line-svg-hover-fill-color: #eceeec;
     --line-selected-border-color: rgb(193, 195, 193);
@@ -121,7 +141,7 @@
     --line-selected-error-border-color: rgba(204, 0, 0, 0.8);
     --line-selected-error-bg-color: rgb(19, 4, 3);
     --line-error-bg-color: rgba(200, 0, 0, 0.1);
-    --line-error-border-left-color: --line-selected-error-border-color;
+    --line-error-border-left-color: rgba(204, 0, 0, 0.8);
     --line-simple-text-color: rgba(236, 238, 236, 0.6);
     --line-meta-text-color: rgb(139, 145, 138);
     --line-meta-user-color: rgba(140, 184, 232);
@@ -130,4 +150,35 @@
     --line-status-success-fill: rgb(88, 193, 66);
     --line-status-error-fill: #cc0000;
     --line-status-warning-fill: #ffa500;
+
+    // view colors
+    // todo: bookmarks is a view, colors must be unified with --view* colors
+    --bookmarks-text-color: rgb(211, 215, 207);
+    --bookmarks-textarea-bg-color: rgb(0, 0, 0);
+    --bookmarks-disabled-text-color: rgb(173, 173, 173);
+    --bookmarks-control-hover-color: rgb(255, 255, 255);
+
+    // view colors
+    --view-error-color: rgb(204, 0, 0);
+    --view-text-color: rgb(195, 200, 194);
+
+    // session colors
+    --session-bg-color: rgba(13, 13, 13, 0.85);
+
+    // cmdinput colors
+    --cmdinput-textarea-bg-color: rgb(27, 12, 12);
+    --cmdinput-text-error-color: rgb(239, 41, 41);
+    --cmdinput-history-title-color: rgb(114, 159, 207);
+    --cmdinput-remote-title-color: rgb(6, 152, 154);
+    --cmdinput-history-item-error-color: rgb(220, 119, 118);
+    --cmdinput-history-item-selected-error-color: rgb(247, 148, 148);
+    --cmdinput-remote-field-control-color: rgb(0, 0, 0);
+    --cmdinput-warning-color: rgb(255, 165, 0);
+    --cmdinput-button-bg-color: rgb(88, 193, 66);
+    --cmdinput-comment-button-bg-color: rgb(57, 113, 255);
+    --cmdinput-disabled-icon-color: rgb(76, 81, 75, 1);
+    --cmdinput-history-bg-color: rgb(21, 23, 21, 1);
+
+    // screen view color
+    --screen-view-text-caption-color: rgb(139, 145, 138);
 }
diff --git a/src/app/sidebar/sidebar.less b/src/app/sidebar/sidebar.less
index f3d184f40..b15666ea8 100644
--- a/src/app/sidebar/sidebar.less
+++ b/src/app/sidebar/sidebar.less
@@ -11,8 +11,8 @@
     backdrop-filter: blur(4px);
     z-index: 20;
     border-radius: 10px;
-    border-left: 1px solid var(--primary-border-color);
-    border-bottom: 1px solid var(--primary-border-color);
+    border-left: 1px solid var(--app-border-color);
+    border-bottom: 1px solid var(--app-border-color);
 
     .title-bar-drag {
         -webkit-app-region: drag;
diff --git a/src/app/workspace/cmdinput/cmdinput.less b/src/app/workspace/cmdinput/cmdinput.less
index e30be2e5b..3fc164d52 100644
--- a/src/app/workspace/cmdinput/cmdinput.less
+++ b/src/app/workspace/cmdinput/cmdinput.less
@@ -9,7 +9,7 @@
     width: 100%;
     padding: var(--termfontsize);
     z-index: 100;
-    border-top: 1px solid @thin-border-color;
+    border-top: 1px solid var(--app-border-color);
 
     &.active {
     }
@@ -40,7 +40,7 @@
     .remote-status-warning {
         display: flex;
         flex-direction: row;
-        color: @term-yellow;
+        color: var(--cmdinput-warning-color);
         align-items: center;
 
         .button {
@@ -52,7 +52,7 @@
         position: absolute;
         top: 5px;
         right: 5px;
-        color: @term-white;
+        color: var(--app-text-color);
 
         padding: 5px;
         cursor: pointer;
@@ -82,11 +82,11 @@
             height: 1em;
             margin: 0 0.5em;
             vertical-align: text-top;
-            fill: @base-color;
+            fill: var(--app-text-color);
         }
 
         .warning {
-            fill: @warning-yellow;
+            fill: var(--cmdinput-warning-color);
         }
     }
 
@@ -120,17 +120,17 @@
                 bottom: calc(-13px + var(--termpad));
                 right: 0px;
                 font-size: 10px;
-                color: @text-secondary;
+                color: var(--app-text-secondary-color);
                 line-height: 1;
                 padding: 0px 8px 3px 8px;
-                background-color: @textarea-background;
+                background-color: var(--cmdinput-textarea-bg);
                 border-radius: 0 0 5px 5px;
             }
         }
 
         textarea {
-            color: @term-bright-white;
-            background-color: @textarea-background;
+            color: var(--app-text-primary-color);
+            background-color: var(--cmdinput-textarea-bg);
             padding: var(--termpad);
             resize: none;
             overflow: auto;
@@ -158,17 +158,17 @@
 
         .cmd-quick-context .button {
             background-color: #000 !important;
-            color: @term-white;
+            color: var(--app-text-color);
         }
 
         &.inputmode-global .cmd-quick-context .button {
-            color: @term-black;
-            background-color: @tab-green !important;
+            color: var(--app-black);
+            background-color: var(--cmdinput-button-bg-color) !important;
         }
 
         &.inputmode-comment .cmd-quick-context .button {
-            color: @term-black;
-            background-color: @tab-blue !important;
+            color: var(--app-black);
+            background-color: var(--cmdinput-comment-button-bg-color) !important;
         }
 
         .cmd-exec {
@@ -181,11 +181,11 @@
                 height: 2.5em;
                 cursor: pointer;
                 border-radius: 50%;
-                fill: @wave-green;
+                fill: var(--app-accent-color);
                 padding: 0.25em;
             }
             .icon.disabled {
-                fill: @disabled-background;
+                fill: var(--cmdinput-disabled-icon-color);
                 cursor: default;
             }
             .cmd-btn {
@@ -223,8 +223,8 @@
         }
 
         .chat-textarea {
-            color: @term-bright-white;
-            background-color: @textarea-background;
+            color: var(--app-text-primary-color);
+            background-color: var(--cmdinput-textarea-bg);
             padding: 0.5em;
             resize: none;
             overflow: auto;
@@ -250,7 +250,7 @@
         }
 
         .chat-msg-assistant {
-            color: @term-white;
+            color: var(--app-text-color);
         }
 
         .chat-msg-user {
@@ -262,7 +262,7 @@
         }
 
         .chat-msg-error {
-            color: @term-bright-red;
+            color: var(--cmdinput-text-error);
             font-family: @markdown-font;
             font-size: 14px;
         }
@@ -273,7 +273,7 @@
     }
 
     .cmd-history {
-        color: @term-white;
+        color: var(--app-text-color);
         margin-bottom: 5px;
         overflow: auto;
         flex-shrink: 1;
@@ -283,8 +283,8 @@
             z-index: 102;
             top: 5px;
             left: 20px;
-            background-color: @background-session-components-solid;
-            color: @soft-blue;
+            background-color: var(--cmdinput-history-bg-color);
+            color: var(--cmdinput-history-title-color);
             padding-bottom: 4px;
             display: flex;
             flex-direction: row;
@@ -311,7 +311,7 @@
 
         .history-items {
             margin-top: 24px;
-            color: @term-white;
+            color: var(--app-text-color);
 
             padding-bottom: 6px;
 
@@ -320,7 +320,7 @@
             }
 
             .history-item.history-haderror {
-                color: mix(@term-red, @term-white, 50%);
+                color: var(--cmdinput-history-item-error-color);
             }
 
             .history-line:first-child {
@@ -338,12 +338,12 @@
 
             .history-item.is-selected {
                 font-weight: bold;
-                color: @term-bright-white;
+                color: var(--app-text-primary-color);
                 background-color: #444;
             }
 
             .history-item.is-selected.history-haderror {
-                color: mix(@term-bright-red, @term-bright-white, 50%);
+                color: var(--cmdinput-history-item-selected-error-color);
             }
         }
     }
@@ -354,21 +354,16 @@
         margin-bottom: var(--termpad);
 
         .info-msg {
-            color: @soft-blue;
+            color: var(--cmdinput-history-title-color);
             padding-bottom: 2px;
 
             a {
-                color: @term-blue;
+                color: var(--prompt-blue);
             }
         }
 
-        .info-title {
-            color: @soft-blue;
-            padding-bottom: 2px;
-        }
-
         .info-lines {
-            color: @term-white;
+            color: var(--app-text-color);
             white-space: pre;
             padding-bottom: 6px;
         }
@@ -384,7 +379,7 @@
 
             .info-comp {
                 min-width: 200px;
-                color: @term-white;
+                color: var(--app-text-color);
                 margin-right: 10px;
 
                 &.has-space {
@@ -393,19 +388,19 @@
             }
 
             .metacmd-comp {
-                color: @term-bright-green;
+                color: var(--prompt-bright-green);
             }
         }
 
         .info-error {
-            color: @term-red;
+            color: var(--cmdinput-text-error-color);
             padding-bottom: 2px;
         }
 
         .info-remote-showall {
             table.remotes-table {
                 th {
-                    color: @term-white;
+                    color: var(--app-text-color);
                     font-weight: bold;
                 }
 
@@ -429,7 +424,7 @@
 
             .info-remote-title {
                 font-weight: bold;
-                color: @term-cyan;
+                color: var(--cmdinput-remote-title-color);
             }
 
             .info-error,
@@ -464,7 +459,7 @@
                     white-space: pre;
                     width: 140px;
                     font-weight: bold;
-                    color: @term-bright-white;
+                    color: var(--app-text-primary-color);
                 }
 
                 .undo-icon {
@@ -478,8 +473,8 @@
                         input[type="text"],
                         input[type="number"],
                         input[type="password"] {
-                            background-color: @term-black;
-                            color: @term-white;
+                            background-color: var(--app-black);
+                            color: var(--app-text-color);
                             width: 200px;
                         }
                     }
@@ -494,8 +489,8 @@
                     &.select-input {
                         select {
                             width: 200px;
-                            background-color: @term-black;
-                            color: @term-white;
+                            background-color: var(--app-black);
+                            color: var(--app-text-color);
                         }
                     }
                 }
diff --git a/src/app/workspace/screen/screenview.less b/src/app/workspace/screen/screenview.less
index cc89d7843..bee44f259 100644
--- a/src/app/workspace/screen/screenview.less
+++ b/src/app/workspace/screen/screenview.less
@@ -4,7 +4,7 @@
     .screen-view {
         flex-grow: 1;
         position: relative;
-        border-top: 1px solid @thin-border-color;
+        border-top: 1px solid var(--app-border-color);
     }
 
     .screen-sidebar,
@@ -21,7 +21,7 @@
         height: 100%;
         overflow: hidden;
         overflow-y: auto;
-        border-left: 1px solid @thin-border-color;
+        border-left: 1px solid var(--app-border-color);
 
         .sidebar-header {
             /* sidebar-header height linked to MagicLayout.ScreenSidebarHeaderHeight */
@@ -29,12 +29,12 @@
             flex-direction: row;
             padding: 3px 0;
             margin: 0;
-            border-bottom: 1px solid @thin-border-color;
+            border-bottom: 1px solid var(--app-border-color);
             font-size: var(--termfontsize);
             font-family: var(--termfontfamily);
             font-weight: normal;
             line-height: var(--termlineheight);
-            color: @text-caption;
+            color: var(--screen-view-text-caption-color);
 
             &:hover {
                 color: white;
@@ -99,13 +99,13 @@
             top: 0;
             right: 0;
             background-color: rgba(78, 154, 6, 0.65);
-            color: @term-black;
+            color: var(--app-black);
             padding: 2px 8px 2px 4px;
             border-bottom-left-radius: 5px;
             z-index: 10;
 
             &.is-active {
-                color: @term-white;
+                color: var(--app-text-color);
             }
 
             .render-mode {
@@ -113,10 +113,10 @@
 
                 position: relative;
                 cursor: pointer;
-                color: @term-white;
+                color: var(--app-text-color);
 
                 &:hover {
-                    color: @term-white;
+                    color: var(--app-text-color);
                 }
             }
         }
@@ -142,7 +142,7 @@
         }
 
         .share-tag {
-            color: @term-white;
+            color: var(--app-text-color);
             position: absolute;
             top: 0;
             left: 40%;
@@ -192,7 +192,7 @@
             padding: 1.5em 1em;
             margin-top: 0;
             line-height: 2.5em;
-            border-top: 1px solid @base-border;
+            border-top: 1px solid var(--app-border);
             &:first-child {
                 border-top: none;
             }
@@ -240,7 +240,7 @@
     }
 
     .cr-help-text {
-        color: @text-caption;
+        color: var(--screen-view-text-caption-color);
         margin-left: 5px;
     }
 
@@ -328,17 +328,17 @@
                     height: 16px;
 
                     path {
-                        fill: @text-primary;
+                        fill: var(--app-text-primary-color);
                     }
                 }
             }
 
             .text-standard {
-                color: @text-secondary;
+                color: var(--app-text-secondary-color);
             }
 
             .text-caption {
-                color: @text-caption;
+                color: var(--screen-view-text-caption-color);
             }
 
             .ellipsis {
diff --git a/src/app/workspace/workspace.less b/src/app/workspace/workspace.less
index 8d5aa4d0e..3fcb5f359 100644
--- a/src/app/workspace/workspace.less
+++ b/src/app/workspace/workspace.less
@@ -10,9 +10,9 @@
     }
     border-radius: 10px;
     border-radius: 0 0 6px 6px;
-    border-bottom: 1px solid @thin-border-color;
-    border-right: 1px solid @thin-border-color;
-    border-left: 1px solid @thin-border-color;
+    border-bottom: 1px solid var(--app-border-color);
+    border-right: 1px solid var(--app-border-color);
+    border-left: 1px solid var(--app-border-color);
     background-color: black;
 
     .center-message {
@@ -21,6 +21,6 @@
         justify-content: center;
         height: 100%;
         width: 100%;
-        color: @text-secondary;
+        color: var(--app-text-secondary-color);
     }
 }