diff --git a/src/app/app.less b/src/app/app.less
index d7429b8dc..e2691eacd 100644
--- a/src/app/app.less
+++ b/src/app/app.less
@@ -1,4 +1,4 @@
-@import "./common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 @font-face {
     font-family: "Martian Mono";
@@ -19,7 +19,7 @@ body {
     font-weight: 300;
     line-height: 1.5;
     background: @base-background-transparent;
-    color: @base-color;
+    color: var(--base-color);
 }
 
 body.is-dev {
@@ -33,7 +33,7 @@ textarea {
     font-weight: 300;
     line-height: 1.5;
     background: @base-background;
-    color: @base-color;
+    color: var(--base-color);
 }
 
 // typography
@@ -103,7 +103,7 @@ body code {
 }
 
 svg.icon {
-    fill: @base-color;
+    fill: var(--base-color);
     width: 100%;
     height: 100%;
     display: inline-block;
diff --git a/src/app/app.tsx b/src/app/app.tsx
index 381c18e3c..0ff90df90 100644
--- a/src/app/app.tsx
+++ b/src/app/app.tsx
@@ -20,6 +20,9 @@ import { MainSideBar } from "./sidebar/sidebar";
 import { DisconnectedModal, ClientStopModal } from "./common/modals";
 import { ModalsProvider } from "./common/modals/provider";
 import { ErrorBoundary } from "./common/error/errorboundary";
+
+import "@/common/themes/fonts.less";
+import "@/common/themes/themes.less";
 import "./app.less";
 
 dayjs.extend(localizedFormat);
diff --git a/src/app/bookmarks/bookmarks.less b/src/app/bookmarks/bookmarks.less
index f781a5a3a..1636d293c 100644
--- a/src/app/bookmarks/bookmarks.less
+++ b/src/app/bookmarks/bookmarks.less
@@ -14,7 +14,7 @@
         svg {
             width: 1.5em;
             height: 1.5em;
-            fill: @base-color;
+            fill: var(--base-color);
         }
     }
 
@@ -31,7 +31,7 @@
     .icon {
         width: 1em;
         height: 1em;
-        fill: @base-color;
+        fill: var(--base-color);
     }
 
     .bookmarks-list {
diff --git a/src/app/common/elements/tooltip.less b/src/app/common/elements/tooltip.less
index f37f925c6..7451bacda 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(--base-color);
         padding-top: 0.2em;
     }
 }
diff --git a/src/app/common/themes/fonts.less b/src/app/common/themes/fonts.less
new file mode 100644
index 000000000..953302b3f
--- /dev/null
+++ b/src/app/common/themes/fonts.less
@@ -0,0 +1,9 @@
+:root {
+    --fixed-font: "Martian Mono", sans-serif;
+    --terminal-font: "JetBrains Mono", sans-serif;
+
+    --text-s1-font: "Martian Mono", sans-serif;
+
+    --markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
+        "Apple Color Emoji", "Segoe UI Emoji";
+}
diff --git a/src/app/common/themes/themes.less b/src/app/common/themes/themes.less
index 709c4cd6a..545d52892 100644
--- a/src/app/common/themes/themes.less
+++ b/src/app/common/themes/themes.less
@@ -77,3 +77,137 @@
 @markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji";
 @markdown-highlight: rgb(35, 35, 35);
+
+:root {
+    --base-color: #eceeec;
+
+    // semantic vars based on  --base-color
+    --line-avatar-color: #eceeec;
+    --line-text-color: #f2f4f2;
+    --line-svg-fill: var(--line-text-color);
+    --line-svg-hover-fill: #eceeec;
+    --line-selected-border-color: #f0f1f0;
+    --line-separator-color: #f6f7f6;
+
+    --base-background: rgba(21, 23, 21, 1);
+
+    // semantic vars based on  --base-background
+    --line-background: rgba(21, 23, 21, 1);
+
+    --base-background-transparent: rgba(21, 23, 21, 0.7);
+    --base-background-dev: rgba(21, 23, 48, 0.7);
+    --base-border: rgba(241, 246, 243, 0.08);
+    --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);
+    --wave-green: rgb(88, 193, 66);
+
+    // semantic vars based on  --wave-green
+    --line-status-success-fill: rgb(88, 193, 66);
+
+    --wave-green-faded: rgba(88, 193, 66, 0.4);
+
+    --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);
+    --success-green: rgb(38, 97, 26);
+    --error-red: #cc0000;
+
+    // semantic vars based on  --error-red
+    --line-base-error-color: #cc0000;
+
+    // semantic vars based on  --error-red
+    --line-status-error-fill: #cc0000;
+
+    --warning-yellow: #ffa500;
+
+    // semantic vars based on  --warning-yellow
+    --line-status-warning-fill: #ffa500;
+
+    --textarea-background: #2a2a2a;
+
+    --text-primary: #fff;
+    --text-secondary: #c3c8c2;
+    --text-caption: #8b918a;
+
+    --status-connected: #46a758;
+    --status-connecting: #f5d90a;
+    --status-error: #e54d2e;
+    --status-disconnected: #c3c8c2;
+
+    --term-black: #000000;
+    --term-red: #cc0000;
+
+    // semantic vars based on  --term-red
+    --line-load-error-text-color: #cc0000;
+
+    --term-green: #4e9a06;
+
+    // semantic vars based on  --term-green
+    --line-active-border-color: #8ebb39;
+
+    --term-yellow: #c4a000;
+
+    // semantic vars based on --term-yellow
+    --line-base-yellow-color: #fce94f;
+
+    // semantic vars based on  --term-yellow
+    --line-sidebar-message-text-color: #c4a000;
+
+    --term-blue: #3465a4;
+    --term-cyan: #06989a;
+    --term-white: #d3d7cf;
+
+    // semantic vars based on  --term-white
+    --line-base-white-color: #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;
+
+    // semantic vars based on  --soft-blue
+    --line-base-soft-blue-color: #729fcf;
+    --line-meta-user-color: #89afd7;
+
+    --active-menu-color: rgb(0, 71, 171);
+
+    --fixed-font: "Martian Mono", sans-serif;
+    --terminal-font: "JetBrains Mono", sans-serif;
+
+    --text-s1-font: "Martian Mono", sans-serif;
+
+    --markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
+        "Apple Color Emoji", "Segoe UI Emoji";
+    --markdown-highlight: rgb(35, 35, 35);
+}
diff --git a/src/app/history/history.less b/src/app/history/history.less
index 161e23404..dd53554dd 100644
--- a/src/app/history/history.less
+++ b/src/app/history/history.less
@@ -6,7 +6,7 @@
     .icon {
         width: 1.3em !important;
         height: 1.3em !important;
-        fill: @base-color;
+        fill: var(--base-color);
     }
 
     .history-checkbox {
@@ -51,7 +51,7 @@
         svg {
             width: 1.5em;
             height: 1.5em;
-            fill: @base-color;
+            fill: var(--base-color);
         }
     }
 
@@ -70,7 +70,7 @@
             font-size: 1em;
             padding: 0.5em 1em;
             background-color: @background-session-components;
-            color: @base-color;
+            color: var(--base-color);
         }
     }
 
@@ -99,7 +99,7 @@
                 .label {
                     display: inline;
                     vertical-align: middle;
-                    color: @base-color;
+                    color: var(--base-color);
                 }
                 .icon {
                     vertical-align: middle;
@@ -163,7 +163,7 @@
 
             .reset-button {
                 margin-left: 1em;
-                color: @base-color;
+                color: var(--base-color);
                 line-height: 1.75em;
             }
         }
diff --git a/src/app/line/lines.less b/src/app/line/lines.less
index 6291d49e7..9848ca8b7 100644
--- a/src/app/line/lines.less
+++ b/src/app/line/lines.less
@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .line.line-text {
     flex-direction: row;
     padding-top: 5px;
@@ -13,7 +11,7 @@
 }
 
 .line .load-error-text {
-    color: @term-red;
+    color: var(--line-load-error-text-color);
     padding-top: 5px;
 }
 
@@ -36,7 +34,7 @@
     }
 
     .sidebar-message {
-        color: @term-yellow;
+        color: var(--line-sidebar-message-text-color);
     }
 
     .line-header {
@@ -84,7 +82,7 @@
     }
 
     .meta.meta-line1 {
-        color: rgba(@base-color, 0.6) !important;
+        color: var(--line-text-color) !important;
         font-size: 11px;
     }
 
@@ -132,7 +130,7 @@
         position: relative;
 
         .cmd-rtnstate-label {
-            font-family: @terminal-font;
+            font-family: var(--terminal-font);
             position: relative;
             font-size: 10px;
             z-index: 2;
@@ -140,13 +138,13 @@
             padding: 2px 5px 0px 5px;
             display: inline-block;
             font-size: 10px;
-            color: @term-white;
+            color: var(--line-base-white-color);
             background-color: #151715;
         }
 
         .cmd-rtnstate-diff {
-            font-family: @terminal-font;
-            color: @term-white;
+            font-family: var(--terminal-font);
+            color: var(--line-base-white-color);
             white-space: pre;
             margin-left: 10px;
             padding-left: 10px;
@@ -181,16 +179,16 @@
     overflow: hidden;
     flex-shrink: 0;
     position: relative;
-    background: @base-background;
+    background: var(--line-background);
     border: 1px solid transparent;
 
     &.selected {
-        border: 1px solid rgba(@base-color, 0.8) !important;
+        border: 1px solid var(--line-selected-border-color) !important;
         box-shadow: 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
     }
 
     &.active {
-        border: 1px solid rgba(@wave-green, 0.8) !important;
+        border: 1px solid var(--line-active-border-color) !important;
         box-shadow: 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
     }
 
@@ -202,7 +200,7 @@
     &.line-simple {
         font-size: 11px;
         line-height: 1.2;
-        color: rgba(@base-color, 0.6);
+        color: var(--line-text-color);
 
         .simple-line-header {
             display: flex;
@@ -232,19 +230,19 @@
             height: 1em;
             margin: 0 0.5em;
             vertical-align: text-top;
-            fill: @base-color;
+            fill: var(--line-avatar-color);
         }
 
         .success {
-            fill: @wave-green;
+            fill: var(--line-status-success-fill);
         }
 
         .fail {
-            fill: @error-red;
+            fill: var(--line-status-error-fill);
         }
 
         .warning {
-            fill: @warning-yellow;
+            fill: var(--line-status-warning-fill);
         }
     }
 
@@ -275,7 +273,8 @@
         align-items: center;
         justify-content: center;
         font-weight: bold;
-        color: @term-white;
+        // color: @term-white;
+        color: var(--line-avatar-color);
 
         border-radius: 5px;
         position: relative;
@@ -307,30 +306,30 @@
 
         &.status-error {
             .status-icon {
-                color: @error-red;
+                color: var(--line-base-error-color);
             }
         }
 
         &.status-hangup {
             .status-icon {
-                color: @term-yellow;
+                color: var(--line-base-yellow-color);
             }
         }
 
         &.status-running {
-            background-color: @soft-blue;
+            background-color: var(--line-base-soft-blue-color);
         }
 
         &.status-waiting {
-            background-color: @term-yellow;
+            background-color: var(--line-base-yellow-color);
         }
 
         &.status-detached {
-            background-color: @soft-blue;
+            background-color: var(--line-base-soft-blue-color);
             .status-icon {
                 top: 3px;
                 right: 3px;
-                color: @term-white;
+                color: var(--line-base-soft-blue-color);
             }
         }
     }
@@ -353,7 +352,7 @@
         }
 
         .user {
-            color: lighten(@soft-blue, 10%);
+            color: var(--line-meta-user-color);
             font-weight: bold;
             margin-top: 1px;
             margin-right: 10px;
@@ -372,7 +371,7 @@
             svg {
                 width: 1em;
                 margin-right: 0.5em;
-                fill: rgba(@base-color, 0.6);
+                fill: var(--line-text-color);
             }
         }
 
@@ -386,9 +385,9 @@
             border-radius: 50%;
             line-height: 1em;
             svg {
-                fill: rgba(@base-color, 0.6);
+                fill: var(--line-text-color);
                 &:hover {
-                    fill: @base-color;
+                    fill: var(--line-svg-hover-fill);
                 }
             }
         }
@@ -417,7 +416,7 @@
         .cmdtext-overflow {
             flex-shrink: 0;
             padding-right: 2px;
-            color: @term-white;
+            color: var(--line-base-white-color);
             cursor: pointer;
 
             margin-top: 4px;
@@ -435,7 +434,7 @@
         .cmdtext-expanded {
             white-space: pre;
 
-            color: @term-white;
+            color: var(--line-base-white-color);
             padding-bottom: 5px;
         }
     }
@@ -453,7 +452,7 @@
 }
 
 .line.line-invalid {
-    color: @term-white;
+    color: var(--line-base-white-color);
     margin-left: 5px;
 }
 
@@ -477,7 +476,7 @@
     &:focus,
     &:focus-within {
         &::-webkit-scrollbar-thumb {
-            background-color: @scrollbar-thumb !important;
+            background-color: var(--scrollbar-thumb-background) !important;
         }
     }
 
@@ -493,7 +492,7 @@
         display: flex;
         align-items: center;
         margin-top: 1em;
-        color: rgba(@base-color, 0.5);
+        color: var(--line-separator-color);
     }
 
     .line-sep::before,
@@ -501,7 +500,7 @@
         content: "";
         height: 1px;
         flex-grow: 1;
-        background-color: rgba(@base-color, 0.5);
+        background-color: var(--line-separator-color);
     }
 
     .line-sep::before {
diff --git a/src/app/pluginsview/pluginsview.less b/src/app/pluginsview/pluginsview.less
index ba46d1862..bcdbba305 100644
--- a/src/app/pluginsview/pluginsview.less
+++ b/src/app/pluginsview/pluginsview.less
@@ -23,7 +23,7 @@
             svg {
                 width: 1.5em;
                 height: 1.5em;
-                fill: @base-color;
+                fill: var(--base-color);
             }
         }
     }
diff --git a/src/app/sidebar/sidebar.less b/src/app/sidebar/sidebar.less
index d548bc447..bdd65d2ba 100644
--- a/src/app/sidebar/sidebar.less
+++ b/src/app/sidebar/sidebar.less
@@ -221,7 +221,7 @@
     }
 
     .menu-label {
-        color: @base-color;
+        color: var(--base-color);
     }
 
     .menu-list {
diff --git a/src/app/workspace/cmdinput/cmdinput.less b/src/app/workspace/cmdinput/cmdinput.less
index 0dc5b0397..69c9ef39e 100644
--- a/src/app/workspace/cmdinput/cmdinput.less
+++ b/src/app/workspace/cmdinput/cmdinput.less
@@ -91,7 +91,7 @@
             height: 1em;
             margin: 0 0.5em;
             vertical-align: text-top;
-            fill: @base-color;
+            fill: var(--base-color);
         }
 
         .warning {