diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ace.scss b/packages/node_modules/@node-red/editor-client/src/sass/ace.scss
index 4e913942e..5aad96b4d 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ace.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ace.scss
@@ -2,48 +2,48 @@
 
     .ace_read-only {
         .ace_scroller {
-            background: $text-editor-background-disabled;
-            color: $text-editor-color-disabled;
+            background: var(--red-ui-text-editor-background-disabled);
+            color: var(--red-ui-text-editor-color-disabled);
         }
         .ace_cursor {
            color: transparent !important;
         }
     }
     .ace_gutter {
-        background: $text-editor-gutter-background;
+        background: var(--red-ui-text-editor-gutter-background);
         border-top-left-radius: 4px;
         border-bottom-left-radius: 4px;
     }
     .ace_scroller {
-        background: $text-editor-background;
+        background: var(--red-ui-text-editor-background);
         border-top-right-radius: 4px;
         border-bottom-right-radius: 4px;
-        color: $text-editor-color;
+        color: var(--red-ui-text-editor-color);
     }
     .ace_marker-layer .ace_active-line {
-        background: $text-editor-active-line-background;
+        background: var(--red-ui-text-editor-active-line-background);
     }
     .ace_marker-layer .ace_selection {
-        background: $text-editor-selection-background;
+        background: var(--red-ui-text-editor-selection-background);
         border-radius: 1px;
     }
     .ace_gutter-cell  {
-        color: $text-editor-gutter-color;
+        color: var(--red-ui-text-editor-gutter-color);
     }
     .ace_gutter-active-line {
-        background: $text-editor-gutter-active-line-background;
+        background: var(--red-ui-text-editor-gutter-active-line-background);
     }
     .ace_tooltip {
-        font-family: $primary-font;
+        font-family: var(--red-ui-primary-font);
         line-height: 1.4em;
         max-width: 400px;
         white-space: normal;
         background-image: none;
-        background: $popover-background;
-        color: $popover-color;
+        background: var(--red-ui-popover-background);
+        color: var(--red-ui-popover-color);
         border-radius: 4px;
         @include component-shadow;
-        border-color: $popover-background;
+        border-color: var(--red-ui-popover-background);
     }
     .ace_content {
         line-height: 1;
@@ -55,14 +55,14 @@
 
     #red-ui-event-log-editor {
         .ace_scroller {
-            background: $event-log-background;
-            color: $event-log-color;
+            background: var(--red-ui-event-log-background);
+            color: var(--red-ui-event-log-color);
         }
         .ace_marker-layer .ace_active-line {
-            background: $event-log-active-line-background;
+            background: var(--red-ui-event-log-active-line-background);
         }
         .ace_marker-layer .ace_selection {
-            background: $event-log-selection-background;
+            background: var(--red-ui-event-log-selection-background);
         }
     }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/base.scss b/packages/node_modules/@node-red/editor-client/src/sass/base.scss
index a08e752d4..92a98913f 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/base.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/base.scss
@@ -20,12 +20,12 @@ body {
 }
 
 .red-ui-editor {
-    font-size: $primary-font-size;
-    font-family: $primary-font;
+    font-size: var(--red-ui-primary-font-size);
+    font-family: var(--red-ui-primary-font);
     padding: 0;
     margin: 0;
-    background: $primary-background;
-    color: $primary-text-color;
+    background: var(--red-ui-primary-background);
+    color: var(--red-ui-primary-text-color);
     line-height: 20px;
 }
 
@@ -63,15 +63,15 @@ body {
 .red-ui-icon-picker {
     a {
         text-decoration: none;
-        color: $primary-text-color;
+        color: var(--red-ui-primary-text-color);
     }
     a:hover,
     a:focus {
         text-decoration: none;
-        color: $primary-text-color;
+        color: var(--red-ui-primary-text-color);
     }
     a:focus {
-        outline: 1px solid $form-input-focus-color;
+        outline: 1px solid var(--red-ui-form-input-focus-color);
     }
 
     p {
@@ -130,7 +130,7 @@ body {
     hr {
         margin: 20px 0;
         border: 0;
-        border-top: 1px solid $tertiary-border-color;
+        border-top: 1px solid var(--red-ui-tertiary-border-color);
     }
 
 
@@ -150,22 +150,22 @@ body {
         mask-position: 50% 50%;
         -webkit-mask-repeat: no-repeat;
         mask-repeat: no-repeat;
-        background-color: $spinner-color;
+        background-color: var(--red-ui-spinner-color);
         }
 
     .red-ui-font-code {
-        font-family: $monospace-font;
-        font-size: $primary-font-size;
-        color: $text-color-code;
+        font-family: var(--red-ui-monospace-font);
+        font-size: var(--red-ui-primary-font-size);
+        color: var(--red-ui-text-color-code);
         white-space: nowrap;
     }
 
     code {
-        font-family: $monospace-font;
-        font-size: $primary-font-size;
+        font-family: var(--red-ui-monospace-font);
+        font-size: var(--red-ui-primary-font-size);
         padding: 0px;
         margin: 1px;
-        color: $text-color-code;
+        color: var(--red-ui-text-color-code);
         white-space: nowrap;
     }
 
@@ -177,8 +177,8 @@ body {
         word-break: break-all;
         word-wrap: break-word;
         white-space: pre-wrap;
-        background-color:$tertiary-background;
-        border: 1px solid $tertiary-border-color;
+        background-color:var(--red-ui-tertiary-background);
+        border: 1px solid var(--red-ui-tertiary-border-color);
         border-radius: 2px;
     }
 
@@ -217,8 +217,8 @@ body {
     blockquote {
         padding: 0 0 0 15px;
         margin: 0 0 20px;
-        border-left: 4px solid $secondary-border-color;
-        color: $secondary-text-color;
+        border-left: 4px solid var(--red-ui-secondary-border-color);
+        color: var(--red-ui-secondary-text-color);
 
         p {
             font-size: 14px;
@@ -244,7 +244,7 @@ body {
     right: 1px;
     text-align: center;
     padding: 40px;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     &:before {
       content: '';
       display: inline-block;
@@ -258,14 +258,14 @@ body {
         width: 80px;
     }
     &.red-ui-component-spinner-sidebar {
-        background: $secondary-background;
+        background: var(--red-ui-secondary-background);
         padding:0;
         img {
             width: 40px;
         }
     }
     &.projects-version-control-spinner-sidebar {
-        background: $secondary-background;
+        background: var(--red-ui-secondary-background);
         padding:0;
         img {
             width: 20px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
index d8b4fb175..66b3bd48e 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
@@ -112,9 +112,13 @@ $tab-text-color-disabled-inactive: $secondary-text-color-disabled-inactive;
 $tab-badge-color: $tertiary-text-color;
 $tab-background: $secondary-background;
 $tab-background-active: $secondary-background;
+$tab-background-active-alpha: rgba($secondary-background, 0.001);
 $tab-background-selected: $secondary-background-selected;
+$tab-background-selected-alpha: rgba($secondary-background-selected, 0.001);
 $tab-background-inactive: $secondary-background-inactive;
+$tab-background-inactive-alpha: rgba($secondary-background-inactive, 0.001);
 $tab-background-hover: $secondary-background-hover;
+$tab-background-hover-alpha: rgba($secondary-background-hover, 0.001);
 
 $palette-header-background: $primary-background;
 $palette-header-color: $header-text-color;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/debug.scss b/packages/node_modules/@node-red/editor-client/src/sass/debug.scss
index 0c810c03f..58099877f 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/debug.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/debug.scss
@@ -17,7 +17,7 @@
 .red-ui-debug-window {
     padding:0;
     margin:0;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     line-height: 20px;
     .red-ui-debug-msg-payload {
         font-size: 14px;
@@ -38,15 +38,15 @@
     left: 0px;
     right: 0px;
     z-index: 20;
-    background: $tertiary-background;
+    background: var(--red-ui-tertiary-background);
     padding: 10px;
-    border-bottom: 1px solid $secondary-border-color;
-    box-shadow: 0 2px 6px $shadow;
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
+    box-shadow: 0 2px 6px var(--red-ui-shadow);
 }
 #red-ui-sidebar-debug-filter-node-list-row {
     .red-ui-treeList-label.disabled {
         font-style: italic;
-        color: $secondary-text-color-disabled;
+        color: var(--red-ui-secondary-text-color-disabled);
     }
 
     .red-ui-treeList-label {
@@ -57,22 +57,22 @@
             background: inherit;
         }
         &.focus, &.focus .red-ui-treeList-sublabel-text {
-            background: $list-item-background-hover !important;
+            background: var(--red-ui-list-item-background-hover) !important;
         }
     }
 }
 .red-ui-debug-msg {
     position: relative;
-    border-bottom: 1px solid $debug-message-border;
-    border-left: 8px solid $debug-message-border;
-    border-right: 8px solid $debug-message-border;
+    border-bottom: 1px solid var(--red-ui-debug-message-border);
+    border-left: 8px solid var(--red-ui-debug-message-border);
+    border-right: 8px solid var(--red-ui-debug-message-border);
     padding: 2px;
     &>.red-ui-debug-msg-meta .red-ui-debug-msg-tools {
         display: none;
     }
 
     &.red-ui-debug-msg-hover {
-        border-right-color: $debug-message-border-hover;
+        border-right-color: var(--red-ui-debug-message-border-hover);
         &>.red-ui-debug-msg-meta .red-ui-debug-msg-tools {
             display: inline-block;
         }
@@ -86,7 +86,7 @@
         display: inline-block;
     }
     &:hover {
-        background: $debug-message-background-hover;
+        background: var(--red-ui-debug-message-background-hover);
         &>.red-ui-debug-msg-tools {
             .red-ui-debug-msg-tools-copy {
                 display: inline-block;
@@ -120,9 +120,9 @@
 }
 
 .red-ui-debug-msg-meta {
-    background: $debug-message-background;
+    background: var(--red-ui-debug-message-background);
     font-size: 11px;
-    color: $secondary-text-color-inactive;
+    color: var(--red-ui-secondary-text-color-inactive);
     overflow-wrap: anywhere;
 }
 .red-ui-debug-msg-date {
@@ -131,11 +131,11 @@
 }
 .red-ui-debug-msg-topic {
     display: block;
-    color: $debug-message-text-color-meta;
+    color: var(--red-ui-debug-message-text-color-meta);
 }
 .red-ui-debug-msg-name {
     padding: 1px 0px;
-    color: $secondary-text-color-inactive;
+    color: var(--red-ui-secondary-text-color-inactive);
     white-space: nowrap;
 }
 .red-ui-debug-msg-tools {
@@ -152,39 +152,39 @@
 .red-ui-debug-msg-payload {
     display: block;
     padding: 2px;
-    background: $debug-message-background;
-    font-family: $monospace-font;
+    background: var(--red-ui-debug-message-background);
+    font-family: var(--red-ui-monospace-font);
     font-size: 13px !important;
 }
 .red-ui-debug-msg-level-log {
-    border-left-color: $debug-message-border;
-    border-right-color: $debug-message-border;
+    border-left-color: var(--red-ui-debug-message-border);
+    border-right-color: var(--red-ui-debug-message-border);
 }
 .red-ui-debug-msg-level-30 {
-    border-left-color: $debug-message-border-warning;
-    border-right-color: $debug-message-border-warning;
+    border-left-color: var(--red-ui-debug-message-border-warning);
+    border-right-color: var(--red-ui-debug-message-border-warning);
 }
 .red-ui-debug-msg-level-20 {
-    border-left-color: $debug-message-border-error;
-    border-right-color: $debug-message-border-error;
+    border-left-color: var(--red-ui-debug-message-border-error);
+    border-right-color: var(--red-ui-debug-message-border-error);
 }
 .red-ui-debug-msg-object-entry {
     position: relative;
     padding-left: 15px;
 }
 .red-ui-debug-msg-element {
-    color: $debug-message-text-color;
+    color: var(--red-ui-debug-message-text-color);
     line-height: 1.3em;
     overflow-wrap: break-word;
 }
 .red-ui-debug-msg-object-key {
-    color: $debug-message-text-color-object-key;
+    color: var(--red-ui-debug-message-text-color-object-key);
 }
 .red-ui-debug-msg-object-value {
 
 }
 .red-ui-debug-msg-object-handle {
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     font-size: 1em;
     width: 1em;
     text-align: center;
@@ -219,17 +219,17 @@
     display:none;
 }
 .red-ui-debug-msg-object-entry pre {
-    font-family: $monospace-font;
+    font-family: var(--red-ui-monospace-font);
     font-size: 13px;
     line-height: 1.2em;
     margin: 0 0 0 -1em;
 }
 
-.red-ui-debug-msg-type-other { color: $debug-message-text-color-msg-type-other; }
-.red-ui-debug-msg-type-string { color: $debug-message-text-color-msg-type-string; }
-.red-ui-debug-msg-type-null { color: $debug-message-text-color-msg-type-null; font-style: italic;}
-.red-ui-debug-msg-type-meta { color: $debug-message-text-color-msg-type-meta; font-style: italic;}
-.red-ui-debug-msg-type-number { color: $debug-message-text-color-msg-type-number; };
+.red-ui-debug-msg-type-other { color: var(--red-ui-debug-message-text-color-msg-type-other); }
+.red-ui-debug-msg-type-string { color: var(--red-ui-debug-message-text-color-msg-type-string); }
+.red-ui-debug-msg-type-null { color: var(--red-ui-debug-message-text-color-msg-type-null); font-style: italic;}
+.red-ui-debug-msg-type-meta { color: var(--red-ui-debug-message-text-color-msg-type-meta); font-style: italic;}
+.red-ui-debug-msg-type-number { color: var(--red-ui-debug-message-text-color-msg-type-number); }
 .red-ui-debug-msg-type-number-toggle { cursor: pointer;}
 
 .red-ui-debug-msg-type-string {
@@ -241,14 +241,14 @@
     padding: 4px 2px 2px;
     position: relative;
     &.red-ui-debug-msg-row-pinned {
-        background: $secondary-background-selected;
+        background: var(--red-ui-secondary-background-selected);
     }
 }
 .red-ui-debug-msg-expandable {
     cursor: pointer;
 }
 .red-ui-debug-msg-expandable:hover .red-ui-debug-msg-object-handle {
-    color:$secondary-text-color-hover;
+    color:var(--red-ui-secondary-text-color-hover);
 }
 
 .red-ui-debug-msg-buffer-opts {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/diff.scss b/packages/node_modules/@node-red/editor-client/src/sass/diff.scss
index 38fd36252..a7b3d4dc8 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/diff.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/diff.scss
@@ -23,11 +23,11 @@
     .red-ui-editableList-container {
         border-radius:1px;
         padding:0;
-        background: $tertiary-background;
+        background: var(--red-ui-tertiary-background);
     }
     .red-ui-diff-list {
         li {
-            background: $tertiary-background;
+            background: var(--red-ui-tertiary-background);
             padding: 0px;
             border: none;
             min-height: 0;
@@ -62,29 +62,29 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         width: 50%;
-        background: $tertiary-background;
+        background: var(--red-ui-tertiary-background);
         text-align: center;
-        border-top: 1px solid $secondary-border-color;
-        border-color:$secondary-border-color;
-        border-left: 1px solid $secondary-border-color;
+        border-top: 1px solid var(--red-ui-secondary-border-color);
+        border-color:var(--red-ui-secondary-border-color);
+        border-left: 1px solid var(--red-ui-secondary-border-color);
     }
     div:last-child {
-        border-right: 1px solid $secondary-border-color;
+        border-right: 1px solid var(--red-ui-secondary-border-color);
     }
 }
 
 .red-ui-diff-dialog-toolbar {
     box-sizing: border-box;
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     text-align: right;
     padding: 8px 10px;
-    background: $primary-background;
-    border-bottom: 1px solid $secondary-border-color;
+    background: var(--red-ui-primary-background);
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
     white-space: nowrap;
 }
 .red-ui-diff-list-flow {
-    background: $secondary-background;
-    border: 1px solid $secondary-border-color;
+    background: var(--red-ui-secondary-background);
+    border: 1px solid var(--red-ui-secondary-border-color);
     border-radius: 1px;
     overflow: hidden;
 
@@ -114,10 +114,10 @@
     font-size: 0.9em;
 
     &:first-child {
-        border-top: 1px solid $tertiary-border-color;
+        border-top: 1px solid var(--red-ui-tertiary-border-color);
     }
     &:not(:last-child) {
-        border-bottom: 1px solid $tertiary-border-color;
+        border-bottom: 1px solid var(--red-ui-tertiary-border-color);
     }
 
     &.collapsed {
@@ -150,8 +150,8 @@
         width: 100%;
     }
     td, th {
-        border-top: 1px solid $secondary-border-color;
-        border-left: 1px solid $secondary-border-color;
+        border-top: 1px solid var(--red-ui-secondary-border-color);
+        border-left: 1px solid var(--red-ui-secondary-border-color);
         &:first-child {
             border-left: none;
         }
@@ -166,7 +166,7 @@
             overflow:hidden;
         }
         &:hover {
-            background: $secondary-background-selected;
+            background: var(--red-ui-secondary-background-selected);
         }
 
     }
@@ -212,7 +212,7 @@
     cursor: pointer;
     padding: 0;
     &:hover {
-        background: $secondary-background-selected;
+        background: var(--red-ui-secondary-background-selected);
     }
 }
 .red-ui-diff-list-flow-title-meta {
@@ -223,7 +223,7 @@
 .red-ui-diff-list-node-header {
     cursor: pointer;
     &:hover {
-        background: $secondary-background-selected;
+        background: var(--red-ui-secondary-background-selected);
     }
 }
 .red-ui-diff-list-node-icon {
@@ -232,9 +232,9 @@
     margin: 5px;
     width: 18px;
     height: 15px;
-    background: $form-input-background;
+    background: var(--red-ui-form-input-background);
     border-radius: 2px;
-    border: 1px solid $node-border;
+    border: 1px solid var(--red-ui-node-border);
     background-position: 5% 50%;
     background-repeat: no-repeat;
     background-size: contain;
@@ -267,7 +267,7 @@
 .red-ui-diff-status-deleted {
     cursor: default !important;
     .red-ui-diff-status {
-        color: $diff-state-deleted;
+        color: var(--red-ui-diff-state-deleted);
     }
     .red-ui-diff-list-node-node {
         opacity: 0.5;
@@ -280,28 +280,28 @@
 .red-ui-diff-status-added {
     cursor: default !important;
     .red-ui-diff-status {
-        color: $diff-state-added;
+        color: var(--red-ui-diff-state-added);
     }
 }
 .red-ui-diff-status-moved {
     .red-ui-diff-status {
-        color: $diff-state-moved;
+        color: var(--red-ui-diff-state-moved);
     }
 }
 
 .red-ui-diff-status-changed {
     .red-ui-diff-status {
-        color: $diff-state-changed;
+        color: var(--red-ui-diff-state-changed);
     }
 }
 .red-ui-diff-status-unchanged {
     .red-ui-diff-status {
-        color: $diff-state-unchanged;
+        color: var(--red-ui-diff-state-unchanged);
     }
 }
 .red-ui-diff-status-conflict {
     .red-ui-diff-status {
-        color: $diff-state-conflict;
+        color: var(--red-ui-diff-state-conflict);
     }
 }
 .red-ui-diff-list-node-title {
@@ -312,7 +312,7 @@
 }
 .red-ui-diff-list-node-properties {
     margin: 0;
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
 }
 .red-ui-diff-status {
     display: inline-block;
@@ -329,7 +329,7 @@
 }
 
 .red-ui-diff-list-node-description {
-    color: $form-text-color;
+    color: var(--red-ui-form-text-color);
     margin-right: 5px;
     padding-top: 5px;
     display: inline-block;
@@ -340,11 +340,11 @@
     }
 }
 
-.red-ui-diff-state-added { color: $diff-state-added; }
-.red-ui-diff-state-deleted { color: $diff-state-deleted; }
-.red-ui-diff-state-changed { color: $diff-state-changed; }
-.red-ui-diff-state-unchanged { color: $diff-state-unchanged; }
-.red-ui-diff-state-conflicted { color: $diff-state-conflicted; }
+.red-ui-diff-state-added { color: var(--red-ui-diff-state-added); }
+.red-ui-diff-state-deleted { color: var(--red-ui-diff-state-deleted); }
+.red-ui-diff-state-changed { color: var(--red-ui-diff-state-changed); }
+.red-ui-diff-state-unchanged { color: var(--red-ui-diff-state-unchanged); }
+.red-ui-diff-state-conflicted { color: var(--red-ui-diff-state-conflicted); }
 
 
 .red-ui-diff-list-node-cell {
@@ -353,19 +353,19 @@
     box-sizing: border-box;
     width: calc( (100% - 20px) / 2);
     height: 32px;
-    border-left: 1px solid $secondary-border-color;
+    border-left: 1px solid var(--red-ui-secondary-border-color);
     padding-top: 2px;
     white-space: nowrap;
     overflow: hidden;
     position: relative;
 }
 .red-ui-diff-empty {
-    background: $secondary-background-disabled;
+    background: var(--red-ui-secondary-background-disabled);
     background: repeating-linear-gradient(
         20deg,
-        $secondary-background, $secondary-background 5px,
-        $secondary-background-disabled 5px,
-        $secondary-background-disabled 10px
+        var(--red-ui-secondary-background), var(--red-ui-secondary-background) 5px,
+        var(--red-ui-secondary-background-disabled) 5px,
+        var(--red-ui-secondary-background-disabled) 10px
         );
 }
 .red-ui-diff-list-node-cell:first-child {
@@ -425,10 +425,10 @@
         background: none;
     }
     &.red-ui-diff-status-changed {
-        background: $diff-state-changed-background;
+        background: var(--red-ui-diff-state-changed-background);
     }
     &.red-ui-diff-status-conflict {
-        background: $diff-state-conflict-background;
+        background: var(--red-ui-diff-state-conflict-background);
     }
 }
 
@@ -439,42 +439,42 @@ label.red-ui-diff-selectbox {
     bottom:0;
     width: 35px;
     text-align: center;
-    border-left: 1px solid $secondary-border-color;
+    border-left: 1px solid var(--red-ui-secondary-border-color);
     margin:0;
     input[type="radio"] {
         margin-top: 8px;
     }
 
     &:hover {
-        background: $secondary-background-hover;
+        background: var(--red-ui-secondary-background-hover);
     }
 }
 
 .red-ui-diff-list-node-conflict.red-ui-diff-select-remote {
     .red-ui-diff-list-node-remote {
-        background: $diff-state-added-background;
+        background: var(--red-ui-diff-state-added-background);
         label {
-            border-left-color: $diff-state-added-border;
+            border-left-color: var(--red-ui-diff-state-added-border);
         }
     }
     .red-ui-diff-list-node-local {
-        background: $diff-state-deleted-background;
+        background: var(--red-ui-diff-state-deleted-background);
         label {
-            border-left-color: $diff-state-deleted-border;
+            border-left-color: var(--red-ui-diff-state-deleted-border);
         }
     }
 }
 .red-ui-diff-list-node-conflict.red-ui-diff-select-local {
     .red-ui-diff-list-node-local {
-        background: $diff-state-added-background;
+        background: var(--red-ui-diff-state-added-background);
         label {
-            border-left-color: $diff-state-added-border;
+            border-left-color: var(--red-ui-diff-state-added-border);
         }
     }
     .red-ui-diff-list-node-remote {
-        background: $diff-state-deleted-background;
+        background: var(--red-ui-diff-state-deleted-background);
         label {
-            border-left-color: $diff-state-deleted-border;
+            border-left-color: var(--red-ui-diff-state-deleted-border);
         }
     }
 }
@@ -500,10 +500,10 @@ ul.red-ui-deploy-dialog-confirm-list {
         width: 30px;
         margin-right: 10px;
         &.fa-check {
-            color: $text-color-success;
+            color: var(--red-ui-text-color-success);
         }
         &.fa-exclamation {
-            color: $secondary-text-color;
+            color: var(--red-ui-secondary-text-color);
         }
     }
     div {
@@ -529,7 +529,7 @@ ul.red-ui-deploy-dialog-confirm-list {
 
     table.red-ui-diff-text-content {
         margin: 10px;
-        border: 1px solid $secondary-border-color;
+        border: 1px solid var(--red-ui-secondary-border-color);
         border-radius: 3px;
         table-layout: fixed;
         width: calc(100% - 20px);
@@ -538,88 +538,88 @@ ul.red-ui-deploy-dialog-confirm-list {
             word-wrap: break-word;
         }
         td.lineno {
-            font-family: $monospace-font;
+            font-family: var(--red-ui-monospace-font);
             text-align: right;
-            color: $tertiary-text-color;
-            background: $tertiary-background;
+            color: var(--red-ui-tertiary-text-color);
+            background: var(--red-ui-tertiary-background);
             padding: 1px 5px;
             &.added {
-                background: $diff-state-added-header-background;
+                background: var(--red-ui-diff-state-added-header-background);
             }
             &.removed {
-                background: $diff-state-deleted-header-background;
+                background: var(--red-ui-diff-state-deleted-header-background);
             }
         }
         td.lineno:nth-child(3) {
-            border-left: 1px solid $secondary-border-color;
+            border-left: 1px solid var(--red-ui-secondary-border-color);
         }
         td.linetext {
-            font-family: $monospace-font;
+            font-family: var(--red-ui-monospace-font);
             white-space: pre-wrap;
             padding: 1px 5px;
-            border-left: 1px solid $tertiary-border-color;
+            border-left: 1px solid var(--red-ui-tertiary-border-color);
             span.prefix {
                 width: 30px;
                 display: inline-block;
                 text-align: center;
-                color: $diff-state-prefix-color;
+                color: var(--red-ui-diff-state-prefix-color);
             }
 
             &.added {
-                border-left-color: $diff-state-added-header-border;
+                border-left-color: var(--red-ui-diff-state-added-header-border);
             }
             &.removed {
-                border-left-color: $diff-state-deleted-header-border;
+                border-left-color: var(--red-ui-diff-state-deleted-header-border);
             }
         }
         td.blank {
-            background: $tertiary-background;
+            background: var(--red-ui-tertiary-background);
         }
         td.added {
-            background: $diff-state-added-background;
-            color: $diff-state-color;
+            background: var(--red-ui-diff-state-added-background);
+            color: var(--red-ui-diff-state-color);
         }
         td.removed {
-            background: $diff-state-deleted-background;
-            color: $diff-state-color;
+            background: var(--red-ui-diff-state-deleted-background);
+            color: var(--red-ui-diff-state-color);
         }
         tr.mergeHeader td {
-            color: $diff-merge-header-color;
-            background: $diff-merge-header-background;
+            color: var(--red-ui-diff-merge-header-color);
+            background: var(--red-ui-diff-merge-header-background);
             height: 26px;
             vertical-align: middle;
         }
         tr.mergeHeader-separator td {
-            color: $diff-merge-header-color;
-            background: $diff-merge-header-border-color;
+            color: var(--red-ui-diff-merge-header-color);
+            background: var(--red-ui-diff-merge-header-border-color);
             height: 0px;
         }
         tr.mergeHeader-ours td {
-            border-top: 2px solid $diff-merge-header-border-color;
+            border-top: 2px solid var(--red-ui-diff-merge-header-border-color);
         }
         tr.mergeHeader-theirs td {
-            border-bottom: 2px solid $diff-merge-header-border-color;
+            border-bottom: 2px solid var(--red-ui-diff-merge-header-border-color);
         }
         td.unchanged {
-            background: $diff-state-unchanged-background;
-            color: $diff-state-unchanged;
+            background: var(--red-ui-diff-state-unchanged-background);
+            color: var(--red-ui-diff-state-unchanged);
         }
         tr.unchanged {
-            background: $diff-state-unchanged-background;
+            background: var(--red-ui-diff-state-unchanged-background);
         }
         tr.start-block {
-            border-top: 1px solid $secondary-border-color;
+            border-top: 1px solid var(--red-ui-secondary-border-color);
         }
         tr.end-block {
-            border-bottom: 1px solid $secondary-border-color;
+            border-bottom: 1px solid var(--red-ui-secondary-border-color);
         }
         tr.red-ui-diff-text-file-header td {
             .filename {
-                font-family: $monospace-font;
+                font-family: var(--red-ui-monospace-font);
             }
-            background: $primary-background;
+            background: var(--red-ui-primary-background);
             padding: 5px 10px 5px 0;
-            color: $primary-text-color;
+            color: var(--red-ui-primary-text-color);
             cursor: pointer;
             i.red-ui-diff-list-chevron {
                 width: 30px;
@@ -631,17 +631,17 @@ ul.red-ui-deploy-dialog-confirm-list {
             }
         }
         tr.red-ui-diff-text-commit-header td {
-            background: $primary-background;
+            background: var(--red-ui-primary-background);
             padding: 5px 10px;
-            color: $primary-text-color;
+            color: var(--red-ui-primary-text-color);
             h3 {
                 font-size: 1.4em;
                 margin: 0;
             }
             .commit-summary {
-                border-top: 1px solid $secondary-border-color;
+                border-top: 1px solid var(--red-ui-secondary-border-color);
                 padding-top: 5px;
-                color: $secondary-text-color;
+                color: var(--red-ui-secondary-text-color);
             }
             .commit-body {
                 margin-bottom:15px;
@@ -651,20 +651,20 @@ ul.red-ui-deploy-dialog-confirm-list {
         }
 
         tr.red-ui-diff-text-header > td:not(.red-ui-diff-flow-diff) {
-            font-family: $monospace-font;
+            font-family: var(--red-ui-monospace-font);
             padding: 5px 10px;
             text-align: left;
-            color: $diff-text-header-color;
-            background: $diff-text-header-background;
+            color: var(--red-ui-diff-text-header-color);
+            background: var(--red-ui-diff-text-header-background);
             height: 30px;
             vertical-align: middle;
-            border-top: 1px solid $secondary-border-color;
-            border-bottom: 1px solid $secondary-border-color;
+            border-top: 1px solid var(--red-ui-secondary-border-color);
+            border-bottom: 1px solid var(--red-ui-secondary-border-color);
         }
         tr.red-ui-diff-text-expand td {
             cursor: pointer;
             &:hover {
-                background: $diff-text-header-background;
+                background: var(--red-ui-diff-text-header-background);
             }
         }
     }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss b/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss
index 1476cf890..78646e0e7 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss
@@ -18,7 +18,7 @@
     position: absolute;
     top: 0; bottom: 0;
     left: 0; right: 0;
-    background: $dnd-background;
+    background: var(--red-ui-dnd-background);
     display:table;
     width: 100%;
     height: 100%;
@@ -30,7 +30,7 @@
         vertical-align: middle;
         text-align: center;
         font-size: 40px;
-        color: $dnd-color;
+        color: var(--red-ui-dnd-color);
         i {
             pointer-events: none;
             font-size: 80px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
index 4cfc1884e..4323e9342 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
@@ -15,8 +15,8 @@
  **/
 
 .red-ui-menu-dropdown {
-    font-family: $primary-font;
-    font-size: $primary-font-size;
+    font-family: var(--red-ui-primary-font);
+    font-size: var(--red-ui-primary-font-size);
     position: absolute;
     top: 100%;
     width: 230px;
@@ -28,9 +28,9 @@
     margin-left: 0px !important;
     padding: 5px 0;
     list-style: none;
-    background: $menuBackground;
-    border: 1px solid $secondary-border-color;
-    box-shadow: 0 5px 10px $shadow;
+    background: var(--red-ui-menuBackground);
+    border: 1px solid var(--red-ui-secondary-border-color);
+    box-shadow: 0 5px 10px var(--red-ui-shadow);
 
     &.pull-right {
         right: 0;
@@ -41,7 +41,7 @@
         height: 1px;
         margin: 9px 1px;
         overflow: hidden;
-        background-color: $menuDivider;
+        background-color: var(--red-ui-menuDivider);
     }
     & > li > a,
     & > li > a:focus {
@@ -50,7 +50,7 @@
         clear: both;
         font-weight: normal;
         line-height: 20px;
-        color: $menuColor;
+        color: var(--red-ui-menuColor);
         white-space: normal !important;
         outline: none;
     }
@@ -73,19 +73,19 @@
     & > .active > a,
     & > .active > a:hover,
     & > .active > a:focus {
-        color: $menuActiveColor;
+        color: var(--red-ui-menuActiveColor);
         text-decoration: none;
-        background-color: $menuActiveBackground;
+        background-color: var(--red-ui-menuActiveBackground);
         outline: 0;
     }
 
     & > .disabled > a,
     & > .disabled > a:hover,
     & > .disabled > a:focus {
-        color: $menuDisabledColor;
+        color: var(--red-ui-menuDisabledColor);
         .red-ui-popover-key {
-            color: $menuDisabledColor;
-            border-color: $menuDisabledColor;
+            color: var(--red-ui-menuDisabledColor);
+            border-color: var(--red-ui-menuDisabledColor);
         }
     }
 
@@ -133,8 +133,8 @@
             padding: 0;
             font-size: 13px;
             // float: right;
-            color: $menuColor;
-            border-color: $menuColor;
+            color: var(--red-ui-menuColor);
+            border-color: var(--red-ui-menuColor);
         }
     }
 
@@ -151,9 +151,9 @@
 .red-ui-menu-dropdown > li > a:focus,
 .red-ui-menu-dropdown-submenu:hover > a,
 .red-ui-menu-dropdown-submenu:focus > a {
-    color: $menuHoverColor;
+    color: var(--red-ui-menuHoverColor);
     text-decoration: none;
-    background-color: $menuHoverBackground;
+    background-color: var(--red-ui-menuHoverBackground);
 }
 
 .red-ui-menu-dropdown-submenu {
@@ -176,7 +176,7 @@
       margin-top: 5px;
       margin-right: -10px;
       border-color: transparent;
-      border-left-color: $menuCaret;
+      border-left-color: var(--red-ui-menuCaret);
       border-style: solid;
       border-width: 5px 0 5px 5px;
       content: " ";
@@ -202,7 +202,7 @@
     margin-left: -30px;
     /* Caret Arrow */
     border-color: transparent;
-    border-right-color: $menuCaret;
+    border-right-color: var(--red-ui-menuCaret);
     border-style: solid;
     border-width: 5px 5px 5px 0;
     content: " ";
@@ -227,13 +227,13 @@
     }
 }
 .red-ui-menu-dropdown-submenu.disabled > a:before {
-    border-right-color: $menuCaret;
+    border-right-color: var(--red-ui-menuCaret);
 }
 
 
 // Menu NG
 ul.red-ui-menu:not(.red-ui-menu-dropdown) {
-    font-family: $primary-font;
+    font-family: var(--red-ui-primary-font);
     font-size: 12px;
     list-style-type: none;
     padding: 0;
@@ -244,14 +244,14 @@ ul.red-ui-menu:not(.red-ui-menu-dropdown) {
         clear: both;
         font-weight: normal;
         line-height: 20px;
-        color: $menuColor;
+        color: var(--red-ui-menuColor);
         white-space: nowrap;
         text-decoration: none;
 
         &:hover,&:focus {
-            color: $menuHoverColor;
+            color: var(--red-ui-menuHoverColor);
             text-decoration: none;
-            background-color: $menuHoverBackground;
+            background-color: var(--red-ui-menuHoverBackground);
             border: none;
             outline: none;
         }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
index 75133df8a..1730b9e35 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
@@ -32,9 +32,9 @@
     width: auto;
     right: -1000px;
     bottom: 0;
-    background: $secondary-background;
-    border-left: 1px solid $secondary-border-color;
-    border-bottom: 1px solid $primary-border-color;
+    background: var(--red-ui-secondary-background);
+    border-left: 1px solid var(--red-ui-secondary-border-color);
+    border-bottom: 1px solid var(--red-ui-primary-border-color);
     box-sizing: content-box;
 }
 .red-ui-tray.open {
@@ -67,8 +67,8 @@
     position: relative;
     box-sizing: border-box;
     font-weight: bold;
-    border-bottom: 1px solid $secondary-border-color;
-    background: $palette-header-background;
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
+    background: var(--red-ui-palette-header-background);
     &:after {
         content: "";
         display: table;
@@ -88,8 +88,8 @@
         height: 26px;
         line-height: 26px;
         &.toggle:not(.selected) {
-            color: $workspace-button-color-selected !important;
-            background: $workspace-button-background-active;
+            color: var(--red-ui-workspace-button-color-selected) !important;
+            background: var(--red-ui-workspace-button-background-active);
         }
     }
 
@@ -116,8 +116,8 @@
 }
 
 .red-ui-tray-titlebar {
-    color: $header-text-color;
-    border-bottom: 1px solid $secondary-border-color;
+    color: var(--red-ui-header-text-color);
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
     padding: 8px;
 }
 .red-ui-editor ul.red-ui-tray-breadcrumbs {
@@ -131,7 +131,7 @@
         margin:0;
 
         &:not(:last-child) {
-            color: $workspace-button-color;
+            color: var(--red-ui-workspace-button-color);
             font-weight: normal;
 
             &:after {
@@ -149,10 +149,10 @@
     bottom: 0px;
     width: 7px;
     left: -9px;
-    background-color: $primary-background;
+    background-color: var(--red-ui-primary-background);
     cursor: col-resize;
-    border-left: 1px solid $primary-border-color;
-    box-shadow: -1px 0 6px $shadow;
+    border-left: 1px solid var(--red-ui-primary-border-color);
+    box-shadow: -1px 0 6px var(--red-ui-shadow);
 
     &:before {
         content: '';
@@ -167,11 +167,11 @@
         mask-position: 50% 50%;
         -webkit-mask-repeat: no-repeat;
         mask-repeat: no-repeat;
-        background-color: $grip-color;
+        background-color: var(--red-ui-grip-color);
     }
     
     &.red-ui-tray-resize-maximised {
-        background: $primary-background;
+        background: var(--red-ui-primary-background);
         cursor: default;
     }
 }
@@ -182,10 +182,10 @@ button.red-ui-tray-resize-button {
     height: 37px;
     line-height: 35px;
     border: none;
-    border-bottom: 1px solid $secondary-border-color;
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
     margin: 0;
-    background: $primary-background;
-    color: $workspace-button-color;
+    background: var(--red-ui-primary-background);
+    color: var(--red-ui-workspace-button-color);
 }
 
 .red-ui-editor .red-ui-tray {
@@ -203,16 +203,16 @@ button.red-ui-tray-resize-button {
     }
 
     .input-error {
-        border-color: $form-input-border-error-color !important;
+        border-color: var(--red-ui-form-input-border-error-color) !important;
     }
 
     .input-updated {
-        border-color: $node-selected-color !important;
+        border-color: var(--red-ui-node-selected-color) !important;
     }
 
     .form-row {
         clear: both;
-        color: $form-text-color;
+        color: var(--red-ui-form-text-color);
         margin-bottom:12px;
     }
     .form-row label {
@@ -223,10 +223,10 @@ button.red-ui-tray-resize-button {
         width:70%;
     }
     .form-tips {
-        background: $form-tips-background;
+        background: var(--red-ui-form-tips-background);
         padding: 8px;
         border-radius: 2px;
-        border: 1px solid $secondary-border-color;
+        border: 1px solid var(--red-ui-secondary-border-color);
         max-width: 450px;
     }
     .form-tips code {
@@ -238,7 +238,7 @@ button.red-ui-tray-resize-button {
     }
 
     .form-warning {
-        border-color: $text-color-error;
+        border-color: var(--red-ui-text-color-error);
     }
 }
 
@@ -255,11 +255,11 @@ button.red-ui-tray-resize-button {
     }
 }
 .red-ui-editor-text-container {
-    border:1px solid $tertiary-border-color;
+    border:1px solid var(--red-ui-tertiary-border-color);
     border-radius:5px;
     overflow: hidden;
-    font-size: $primary-font-size !important;
-    font-family: $monospace-font !important;
+    font-size: var(--red-ui-primary-font-size !important);
+    font-family: var(--red-ui-monospace-font !important);
     height: 100%;
 
     &.red-ui-editor-text-container-toolbar {
@@ -302,7 +302,7 @@ button.red-ui-button-small
 #red-ui-editor-config-scope-warning {
     display: inline-block;
     margin-right: 5px;
-    color: $text-color-warning;
+    color: var(--red-ui-text-color-warning);
     vertical-align: middle;
 }
 #red-ui-editor-config-scope {
@@ -358,18 +358,18 @@ button.red-ui-button-small
         padding: 20px 20px 10px;
         &:last-child {
             padding-top: 60px;
-            background: $primary-background;
+            background: var(--red-ui-primary-background);
 
         }
     }
 }
 .red-ui-editor-type-markdown-panel-preview {
     padding: 10px;
-    border:1px solid $secondary-border-color;
+    border:1px solid var(--red-ui-secondary-border-color);
     border-radius:5px;
     height: calc(100% - 21px);
     overflow-y: scroll;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
 }
 
 #red-ui-clipboard-hidden {
@@ -402,7 +402,7 @@ button.red-ui-button-small
     span {
         padding-left: 50px;
         width: 100px;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
     }
 }
 
@@ -427,14 +427,14 @@ button.red-ui-button.red-ui-editor-node-appearance-button {
 
 .red-ui-group-layout-picker {
     padding: 5px;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
 }
 .red-ui-group-layout-picker-cell-text {
     position: absolute;
     width: 14px;
     height: 2px;
-    border-top: 2px solid $secondary-text-color;
-    border-bottom: 2px solid $secondary-text-color;
+    border-top: 2px solid var(--red-ui-secondary-text-color);
+    border-bottom: 2px solid var(--red-ui-secondary-text-color);
     margin: 2px;
 
     &.red-ui-group-layout-text-pos-nw { top: 0; left: 0; }
@@ -451,7 +451,7 @@ button.red-ui-button.red-ui-editor-node-appearance-button {
         background-color: #FFF;
         background-size: 100% 100%;
         background-position: 0 0, 50% 50%;
-        background-image: linear-gradient(45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%,  transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%,  transparent 55%, transparent);
+        background-image: linear-gradient(45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%,  transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%,  transparent 55%, transparent);
         border: none;
     }
 }
@@ -475,17 +475,17 @@ button.red-ui-group-layout-picker-none {
         width: 100%;
         margin-bottom: 0;
         border: none;
-        border-bottom: 1px solid $form-input-border-color;
+        border-bottom: 1px solid var(--red-ui-form-input-border-color);
     }
     small {
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         margin-left: 5px;
         margin-right: 4px;
         display: inline-block;
         min-width: 35px;
         text-align: right;
     }
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
 }
 .red-ui-editor-node-appearance-button {
     .red-ui-search-result-node {
@@ -496,7 +496,7 @@ button.red-ui-group-layout-picker-none {
     padding: 0;
     border-style: solid;
     border-width: 1px;
-    border-color: $secondary-border-color;
+    border-color: var(--red-ui-secondary-border-color);
 }
 .red-ui-color-picker-swatch {
     position: absolute;
@@ -509,7 +509,7 @@ button.red-ui-group-layout-picker-none {
     background-color: #FFF;
     background-size: 100% 100%;
     background-position: 0 0, 50% 50%;
-    background-image: linear-gradient(45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%,  transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%,  transparent 55%, transparent)
+    background-image: linear-gradient(45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%,  transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%,  transparent 55%, transparent)
 }
 .red-ui-search-result-node .red-ui-color-picker-cell-none {
     border-radius: 4px;
@@ -536,7 +536,7 @@ button.red-ui-group-layout-picker-none {
     top:0;right:0;left:0;bottom:0;
     background-image:linear-gradient(90deg, transparent 0%, #f00 100%);
     background-size: 100% 100%;
-    border: 1px solid $primary-border-color;
+    border: 1px solid var(--red-ui-primary-border-color);
 }
 
 div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
@@ -547,9 +547,9 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
     width: 10px;
     height: 22px;
     padding: 0;
-    border: 1px solid $primary-border-color;
+    border: 1px solid var(--red-ui-primary-border-color);
     border-radius: 1px;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     box-sizing: border-box;
 }
 .red-ui-icon-picker {
@@ -567,10 +567,10 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
     position: relative;
     &.red-ui-icon-list-dark {
         .red-ui-palette-icon-fa {
-            color: $secondary-text-color;
+            color: var(--red-ui-secondary-text-color);
         }
         .red-ui-palette-icon-container {
-            background: $secondary-background;
+            background: var(--red-ui-secondary-background);
             border-radius: 4px;
         }
     }
@@ -583,10 +583,10 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
     border-radius: 4px;
 
     &:hover {
-        background: $list-item-background-hover;
+        background: var(--red-ui-list-item-background-hover);
     }
     &.selected {
-        background: $list-item-background-selected;
+        background: var(--red-ui-list-item-background-selected);
         .red-ui-search-result-node {
             // border-color: white;
         }
@@ -597,22 +597,22 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
     }
 }
 .red-ui-icon-list-module {
-    background: $palette-header-background;
+    background: var(--red-ui-palette-header-background);
     font-size: 0.9em;
     padding: 3px;
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     clear: both;
     i {
         margin-right: 5px;
     }
 }
 .red-ui-icon-meta {
-    border-top: 1px solid $secondary-border-color;
-    background: $tertiary-background;
+    border-top: 1px solid var(--red-ui-secondary-border-color);
+    background: var(--red-ui-tertiary-background);
     height: 24px;
     span {
         padding: 4px;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         font-size: 0.9em;
         line-height: 24px;
     }
@@ -630,7 +630,7 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
 .red-ui-editor-type-json-editor {
     height: calc(100% - 10px);
     .red-ui-treeList-container {
-        background: $secondary-background;
+        background: var(--red-ui-secondary-background);
     }
     .red-ui-treeList-label {
         padding-top: 0;
@@ -647,7 +647,7 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
             vertical-align: middle;
         }
         &:hover, &:hover .red-ui-treeList-sublabel-text {
-            background: $secondary-background-disabled;
+            background: var(--red-ui-secondary-background-disabled);
             .red-ui-editor-type-json-editor-item-gutter {
                 > span, > button {
                     display: inline-block;
@@ -656,11 +656,11 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
         }
         &.selected {
             .red-ui-editor-type-json-editor-item-gutter {
-                background: $secondary-background-hover;
+                background: var(--red-ui-secondary-background-hover);
             }
             &:hover {
                 .red-ui-editor-type-json-editor-item-gutter {
-                    background: $secondary-background-selected;
+                    background: var(--red-ui-secondary-background-selected);
                 }
             }
         }
@@ -698,7 +698,7 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
     border: 2px solid rgba(0,0,0,0);
     border-radius: 3px;
     &:not(.red-ui-editor-type-json-editor-label-array-key):hover {
-        border-color: $list-item-background-hover;
+        border-color: var(--red-ui-list-item-background-hover);
         border-style: dashed;
     }
     &.readonly {
@@ -712,8 +712,8 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
 
     height: 100%;
     line-height: 35px;
-    color: $tertiary-text-color;
-    background: $secondary-background-disabled;
+    color: var(--red-ui-tertiary-text-color);
+    background: var(--red-ui-secondary-background-disabled);
     > span {
         display: inline-block;
         height: 35px;
@@ -755,7 +755,7 @@ button.red-ui-toggleButton.toggle {
     }
     >div:first-child {
         font-size: 0.9em;
-        color: $tertiary-text-color;
+        color: var(--red-ui-tertiary-text-color);
         margin: 3px 0 -4px;
         >div {
             padding-left: 3px;
@@ -767,15 +767,15 @@ button.red-ui-toggleButton.toggle {
             line-height: 30px;
             display: inline-block;
             box-sizing: border-box;
-            // border-left: 2px dashed $secondary-border-color;
-            // border-bottom: 2px dashed $secondary-border-color;
-            // border: 1px dashed $secondary-border-color;
+            // border-left: 2px dashed var(--red-ui-secondary-border-color);
+            // border-bottom: 2px dashed var(--red-ui-secondary-border-color);
+            // border: 1px dashed var(--red-ui-secondary-border-color);
             border-right: none;
             &:not(:first-child) {
                 padding: 3px;
             }
             // &:last-child {
-            //     border-right: 1px dashed $secondary-border-color;
+            //     border-right: 1px dashed var(--red-ui-secondary-border-color);
             // }
             .placeholder-input {
                 position: relative;
@@ -800,8 +800,8 @@ button.red-ui-toggleButton.toggle {
                         height: 100%;
                         width: 20px;
                         text-align:center;
-                        border-right: 1px solid $secondary-border-color;
-                        background: $tertiary-background;
+                        border-right: 1px solid var(--red-ui-secondary-border-color);
+                        background: var(--red-ui-tertiary-background);
                     }
                 }
                 input[type="checkbox"] {
@@ -817,13 +817,13 @@ button.red-ui-toggleButton.toggle {
             .red-ui-editableList-item-handle {
                 position:relative;
                 top: 0px;
-                color: $tertiary-text-color;
+                color: var(--red-ui-tertiary-text-color);
             }
         }
         >div:nth-child(2) {
             margin: 4px;
             height: 32px;
-            border: 1px dashed $secondary-border-color;
+            border: 1px dashed var(--red-ui-secondary-border-color);
             text-align: center;
             a {
                 display: block;
@@ -831,7 +831,7 @@ button.red-ui-toggleButton.toggle {
                 height: 100%;
                 line-height: 32px;
                 &:hover {
-                    background: $secondary-background-hover;
+                    background: var(--red-ui-secondary-background-hover);
                 }
                 i {
                     height: 100%;
@@ -851,7 +851,7 @@ button.red-ui-toggleButton.toggle {
 span.red-ui-editor-subflow-env-lang-icon {
     position: absolute;
     display: inline-block;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     opacity: 0.8;
     width: 20px;
     line-height: 32px;
@@ -864,12 +864,12 @@ span.red-ui-editor-subflow-env-lang-icon {
 }
 
 .red-ui-editor-subflow-env-input-type {
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     height: 100%;
     box-sizing: border-box;
 }
 .red-ui-editor-subflow-env-input-type-placeholder {
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
     padding-left: 4px;
 }
 
@@ -886,7 +886,7 @@ span.red-ui-editor-subflow-env-lang-icon {
 //             border-top: none;
 //         }
 //         &.ui-sortable-helper {
-//             border: 2px dashed $secondary-border-color;
+//             border: 2px dashed var(--red-ui-secondary-border-color);
 //             .red-ui-editableList-item-content {
 //                 >div {
 //                     border: none;
@@ -901,15 +901,15 @@ span.red-ui-editor-subflow-env-lang-icon {
 //         >div>div {
 //             display: inline-block;
 //             box-sizing: border-box;
-//             border-left: 1px dashed $secondary-border-color;
-//             border-bottom: 1px dashed $secondary-border-color;
+//             border-left: 1px dashed var(--red-ui-secondary-border-color);
+//             border-bottom: 1px dashed var(--red-ui-secondary-border-color);
 //         }
 //         >div:first-child {
 //             font-size: 0.9em;
 //             display: grid;
 //             grid-template-columns: 25px auto 20px;
 //             >div {
-//                 border-top: 1px dashed $secondary-border-color;
+//                 border-top: 1px dashed var(--red-ui-secondary-border-color);
 //                 padding: 1px;
 //             }
 //             >div:nth-child(3) {
@@ -929,9 +929,9 @@ span.red-ui-editor-subflow-env-lang-icon {
 //                 // line-height: 30px;
 //                 // box-sizing: border-box;
 //                 //
-//                 // border-left: 2px dashed $secondary-border-color;
+//                 // border-left: 2px dashed var(--red-ui-secondary-border-color);
 //                 border-top: none;
-//                 // border-bottom: 2px dashed $secondary-border-color;
+//                 // border-bottom: 2px dashed var(--red-ui-secondary-border-color);
 //                 &:not(:first-child) {
 //                     padding: 6px 3px;
 //                 }
@@ -963,7 +963,7 @@ span.red-ui-editor-subflow-env-lang-icon {
 //                     height: 100%;
 //                     line-height: 45px;
 //                     &:hover {
-//                         background: $secondary-background-hover;
+//                         background: var(--red-ui-secondary-background-hover);
 //                     }
 //                 }
 //             }
@@ -993,11 +993,11 @@ span.red-ui-editor-subflow-env-lang-icon {
 // }
 .red-ui-editor-subflow-ui-edit-panel {
     padding-bottom: 3px;
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
     .red-ui-editableList-border {
         border: none;
         border-radius: 0;
-        border-bottom: 1px solid $secondary-border-color;
+        border-bottom: 1px solid var(--red-ui-secondary-border-color);
     }
     .red-ui-editableList-container {
     }
@@ -1005,10 +1005,10 @@ span.red-ui-editor-subflow-env-lang-icon {
         margin-left: 2px;
     }
     .red-ui-editableList-header {
-        background: $primary-background;
+        background: var(--red-ui-primary-background);
         display: grid;
         grid-template-columns: 50% 50%;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         div:first-child {
             padding-left: 23px;
         }
@@ -1019,7 +1019,7 @@ span.red-ui-editor-subflow-env-lang-icon {
     .red-ui-editableList-container {
         padding: 0 1px;
         li {
-            background: $secondary-background;
+            background: var(--red-ui-secondary-background);
             // border-bottom: none;
             padding: 0;
             .red-ui-editableList-item-content {
@@ -1034,14 +1034,14 @@ span.red-ui-editor-subflow-env-lang-icon {
                 margin-bottom: 0;
                 border:none;
                 width: 100%;
-                border-right: 1px solid $secondary-border-color;
+                border-right: 1px solid var(--red-ui-secondary-border-color);
 
                 border-radius: 0;
                 &:focus {
-                    box-shadow: 0 0 0 1px inset $form-input-focus-color;
+                    box-shadow: 0 0 0 1px inset var(--red-ui-form-input-focus-color);
                 }
                 &:first-child {
-                    border-left: 1px solid $secondary-border-color;
+                    border-left: 1px solid var(--red-ui-secondary-border-color);
                 }
             }
             button.red-ui-typedInput-type-select, button.red-ui-typedInput-option-expand, button.red-ui-typedInput-option-trigger {
@@ -1131,7 +1131,7 @@ span.red-ui-editor-subflow-env-lang-icon {
         border-top-left-radius: 4px;
         border-top-right-radius: 4px;
 
-        background: $tertiary-background;
+        background: var(--red-ui-tertiary-background);
         padding: 0;
         >div {
             display: grid;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
index 2e6de1932..2d4877896 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
@@ -16,14 +16,14 @@
 
 .nr-ui-view-lasso {
     stroke-width: 1px;
-    stroke: $view-lasso-stroke;
-    fill: $view-lasso-fill;
+    stroke: var(--red-ui-view-lasso-stroke);
+    fill: var(--red-ui-view-lasso-fill);
     stroke-dasharray: 10 5;
 }
 
 .nr-ui-view-slice {
     stroke-width: 1px;
-    stroke: $view-lasso-stroke;
+    stroke: var(--red-ui-view-lasso-stroke);
     fill: none;
     stroke-dasharray: 10 5;
 }
@@ -33,11 +33,11 @@
     font-style: italic;
 }
 .red-ui-flow-node-label-white {
-    fill: $view-background !important;
+    fill: var(--red-ui-view-background) !important;
 }
 .red-ui-flow-node-label {
     stroke-width: 0;
-    fill: $node-label-color;
+    fill: var(--red-ui-node-label-color);
     font-size: 14px;
     pointer-events: none;
     -webkit-touch-callout: none;
@@ -54,7 +54,7 @@
 
 .red-ui-flow-port-label {
     stroke-width: 0;
-    fill: $node-port-label-color;
+    fill: var(--red-ui-node-port-label-color);
     font-size: 16px;
     dominant-baseline: middle;
     text-anchor: middle;
@@ -65,7 +65,7 @@
 
 
 .red-ui-flow-node {
-    stroke: $node-border;
+    stroke: var(--red-ui-node-border);
     cursor: move;
     stroke-width: 1;
 }
@@ -80,7 +80,7 @@
         opacity: 0.9;
         .red-ui-flow-node {
             stroke-width: 2;
-            stroke: $node-selected-color !important;
+            stroke: var(--red-ui-node-selected-color) !important;
             stroke-dasharray: 10, 4;
         }
     }
@@ -95,53 +95,53 @@
     }
     &.red-ui-flow-group-active-hovered:not(.red-ui-flow-group-hovered) {
         .red-ui-flow-group-outline-select {
-            stroke: $link-link-color;
+            stroke: var(--red-ui-link-link-color);
         }
     }
 }
 
 .red-ui-flow-group-outline {
     fill: none;
-    stroke: $node-selected-color;
+    stroke: var(--red-ui-node-selected-color);
     stroke-opacity: 0;
     stroke-width: 12;
     pointer-events: stroke;
 }
 .red-ui-flow-group-outline-select {
     fill: none;
-    stroke: $node-selected-color;
+    stroke: var(--red-ui-node-selected-color);
     pointer-events: stroke;
     stroke-opacity: 0;
     stroke-width: 3;
 
     &.red-ui-flow-group-outline-select-background {
-        stroke: $view-background;
+        stroke: var(--red-ui-view-background);
         stroke-width: 6;
     }
 }
 .red-ui-flow-group-body {
     pointer-events: none;
-    fill: $group-default-fill;
-    fill-opacity: $group-default-fill-opacity;
+    fill: var(--red-ui-group-default-fill);
+    fill-opacity: var(--red-ui-group-default-fill-opacity);
     stroke-width: 2;
-    stroke: $group-default-stroke;
-    stroke-opacity: $group-default-stroke-opacity;
+    stroke: var(--red-ui-group-default-stroke);
+    stroke-opacity: var(--red-ui-group-default-stroke-opacity);
 }
 .red-ui-flow-group-label {
     @include disable-selection;
-    fill: $group-default-label-color;
+    fill: var(--red-ui-group-default-label-color);
 }
 
 
 
 .red-ui-flow-node-unknown {
     stroke-dasharray:10,4;
-    stroke: $node-border-unknown;
+    stroke: var(--red-ui-node-border-unknown);
 }
 .red-ui-flow-node-placeholder {
     stroke-dasharray:10,4;
-    stroke: $node-border-placeholder;
-    fill: $node-background-placeholder;
+    stroke: var(--red-ui-node-border-placeholder);
+    fill: var(--red-ui-node-background-placeholder);
     opacity: 0.5;
     stroke-width: 2;
 }
@@ -152,19 +152,19 @@
     .fa-lg {
         @include disable-selection;
         stroke: none;
-        fill: $node-icon-color;
+        fill: var(--red-ui-node-icon-color);
         text-anchor: middle;
         font-family: FontAwesome;
     }
 }
 .red-ui-flow-node-icon-shade {
     stroke: none;
-    fill: $node-icon-background-color-fill;
-    fill-opacity: $node-icon-background-color-opacity;
+    fill: var(--red-ui-node-icon-background-color-fill);
+    fill-opacity: var(--red-ui-node-icon-background-color-opacity);
 }
 .red-ui-flow-node-icon-shade-border {
-    stroke-opacity: $node-icon-border-color-opacity;
-    stroke: $node-icon-border-color;
+    stroke-opacity: var(--red-ui-node-icon-border-color-opacity);
+    stroke: var(--red-ui-node-icon-border-color);
     stroke-width: 1;
 }
 
@@ -181,27 +181,27 @@
     cursor: pointer;
 }
 .red-ui-flow-node-button-background {
-    fill: $node-background-placeholder;
+    fill: var(--red-ui-node-background-placeholder);
 }
 
 .red-ui-flow-port {
-    stroke: $node-border;
+    stroke: var(--red-ui-node-border);
     stroke-width: 1;
-    fill: $node-port-background;
+    fill: var(--red-ui-node-port-background);
     cursor: crosshair;
 }
 
 .red-ui-flow-node-error {
-    fill: $node-status-error-background;
-    stroke: $node-status-error-border;
+    fill: var(--red-ui-node-status-error-background);
+    stroke: var(--red-ui-node-status-error-border);
     stroke-width:1px;
     cursor: default;
     stroke-linejoin: round;
     stroke-linecap: round;
 }
 .red-ui-flow-node-changed {
-    fill: $node-status-changed-background;
-    stroke: $node-status-changed-border;
+    fill: var(--red-ui-node-status-changed-background);
+    stroke: var(--red-ui-node-status-changed-border);
     cursor: default;
     stroke-width:1px;
     stroke-linejoin: round;
@@ -214,13 +214,13 @@ g.red-ui-flow-node-selected {
     }
     .red-ui-flow-node,.red-ui-flow-subflow-port {
         stroke-width: 2;
-        stroke: $node-selected-color !important;
+        stroke: var(--red-ui-node-selected-color) !important;
     }
 }
 .red-ui-flow-node-highlighted {
-    border-color: $node-selected-color !important;
+    border-color: var(--red-ui-node-selected-color) !important;
     border-style: dashed !important;
-    stroke: $node-selected-color;
+    stroke: var(--red-ui-node-selected-color);
     stroke-width: 3;
     stroke-dasharray: 8, 4;
 }
@@ -236,7 +236,7 @@ g.red-ui-flow-node-selected {
     .red-ui-flow-link-line {
         stroke-dasharray: 10,8 !important;
         stroke-width: 2 !important;
-        stroke: $link-disabled-color;
+        stroke: var(--red-ui-link-disabled-color);
     }
     .red-ui-flow-port {
         fill-opacity: 1;
@@ -254,7 +254,7 @@ g.red-ui-flow-node-selected {
     &.red-ui-flow-link-line {
         stroke-dasharray: 10,8 !important;
         stroke-width: 2 !important;
-        stroke: $link-disabled-color;
+        stroke: var(--red-ui-link-disabled-color);
     }
     .red-ui-flow-port {
         fill-opacity: 1;
@@ -263,49 +263,49 @@ g.red-ui-flow-node-selected {
 }
 @each $current-color in red green yellow blue grey gray {
     .red-ui-flow-node-status-dot-#{""+$current-color} {
-        fill: map-get($node-status-colors,$current-color);
-        stroke: map-get($node-status-colors,$current-color);
+        fill: var(--red-ui-node-status-colors-#{"" + $current-color});
+        stroke: var(--red-ui-node-status-colors-#{"" + $current-color});
     }
     .red-ui-flow-node-status-ring-#{""+$current-color} {
-        fill: $view-background;
-        stroke: map-get($node-status-colors,$current-color);
+        fill: var(--red-ui-view-background);
+        stroke: var(--red-ui-node-status-colors-#{"" + $current-color});
     }
 }
 
 .red-ui-flow-node-status-label {
     @include disable-selection;
     stroke-width: 0;
-    fill: $secondary-text-color;
+    fill: var(--red-ui-secondary-text-color);
     font-size:9pt;
     text-anchor:start;
 }
 
 .red-ui-flow-port-hovered {
-    stroke: $port-selected-color;
-    fill:  $port-selected-color;
+    stroke: var(--red-ui-port-selected-color);
+    fill:  var(--red-ui-port-selected-color);
 }
 
 .red-ui-flow-subflow-port {
-    fill: $node-background-placeholder;
-    stroke: $node-border;
+    fill: var(--red-ui-node-background-placeholder);
+    stroke: var(--red-ui-node-border);
 }
 
 .red-ui-flow-drag-line {
-    stroke: $node-selected-color !important;
+    stroke: var(--red-ui-node-selected-color) !important;
     stroke-width: 3;
     fill: none;
     pointer-events: none;
 }
 
 .red-ui-flow-link-line {
-    stroke: $link-color;
+    stroke: var(--red-ui-link-color);
     stroke-width: 3;
     fill: none;
     pointer-events: none;
 }
 .red-ui-flow-link-link {
     stroke-width: 2;
-    stroke: $link-link-color;
+    stroke: var(--red-ui-link-link-color);
     fill: none;
     stroke-dasharray: 25,4;
 }
@@ -314,19 +314,19 @@ g.red-ui-flow-node-selected {
 }
 
 .red-ui-flow-link-port {
-    fill: $node-link-port-background;
-    stroke: $link-link-color;
+    fill: var(--red-ui-node-link-port-background);
+    stroke: var(--red-ui-link-link-color);
     stroke-width: 1;
 }
 .red-ui-flow-link-group-active .red-ui-flow-link-port {
-    stroke: $link-link-active-color;
+    stroke: var(--red-ui-link-link-active-color);
 }
 .red-ui-flow-link-group:hover {
     cursor: pointer;
 }
 
 .red-ui-flow-link-outline {
-    stroke: $view-background;
+    stroke: var(--red-ui-view-background);
     stroke-opacity: 0.4;
     stroke-width: 5;
     cursor: crosshair;
@@ -334,7 +334,7 @@ g.red-ui-flow-node-selected {
     pointer-events: none;
 }
 .red-ui-flow-link-background {
-    stroke: $view-background;
+    stroke: var(--red-ui-view-background);
     opacity: 0;
     stroke-width: 20;
     cursor: crosshair;
@@ -345,10 +345,10 @@ g.red-ui-flow-node-selected {
 }
 
 g.red-ui-flow-link-selected path.red-ui-flow-link-line {
-    stroke: $node-selected-color;
+    stroke: var(--red-ui-node-selected-color);
 }
 g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
-    stroke: $link-unknown-color;
+    stroke: var(--red-ui-link-unknown-color);
     stroke-width: 2;
     stroke-dasharray: 10, 4;
 }
@@ -364,15 +364,15 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
     pointer-events: none;
 
     path:first-child {
-        fill: $popover-background;
-        stroke: $popover-background;
+        fill: var(--red-ui-popover-background);
+        stroke: var(--red-ui-popover-background);
         stroke-width: 1;
     }
 }
 .red-ui-flow-port-tooltip-label {
     stroke-width: 0;
-    fill: $popover-color;
-    font-family: $primary-font;
+    fill: var(--red-ui-popover-color);
+    font-family: var(--red-ui-primary-font);
     font-size: 12px;
     pointer-events: none;
     -webkit-touch-callout: none;
@@ -401,18 +401,18 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
     }
 }
 .red-ui-flow-junction-port {
-    stroke: $node-border;
+    stroke: var(--red-ui-node-border);
     stroke-width: 1;
-    fill: $node-port-background;
+    fill: var(--red-ui-node-port-background);
     cursor: crosshair;
     transition: transform 0.1s;
     opacity: 0;
     pointer-events: none;
 }
 .red-ui-flow-junction-background {
-    stroke: $node-border;
+    stroke: var(--red-ui-node-border);
     stroke-width: 1;
-    fill: $node-port-background;
+    fill: var(--red-ui-node-port-background);
     cursor: crosshair;
     transform: scale(1);
     transition: transform 0.1s;
@@ -421,10 +421,10 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
     }
 }
 .red-ui-flow-junction-hovered {
-    stroke: $port-selected-color;
-    fill:  $port-selected-color;
+    stroke: var(--red-ui-port-selected-color);
+    fill:  var(--red-ui-port-selected-color);
 }
 .red-ui-flow-junction.selected .red-ui-flow-junction-background {
-    stroke: $port-selected-color;
-    // fill:  $port-selected-color;
+    stroke: var(--red-ui-port-selected-color);
+    // fill:  var(--red-ui-port-selected-color);
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/forms.scss b/packages/node_modules/@node-red/editor-client/src/sass/forms.scss
index 022579b27..a281b9265 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/forms.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/forms.scss
@@ -99,13 +99,13 @@
         margin-bottom: 20px;
         font-size: 21px;
         line-height: 40px;
-        color: $tertiary-text-color;
+        color: var(--red-ui-tertiary-text-color);
         border: 0;
-        border-bottom: 1px solid $secondary-border-color;
+        border-bottom: 1px solid var(--red-ui-secondary-border-color);
     }
 
     legend small {
-        color: $tertiary-text-color;
+        color: var(--red-ui-tertiary-text-color);
     }
 
 
@@ -125,7 +125,7 @@
     button,
     select,
     textarea {
-        font-family: $primary-font;
+        font-family: var(--red-ui-primary-font);
     }
 
     label {
@@ -159,7 +159,7 @@
         margin-bottom: 10px;
         font-size: 14px;
         line-height: 20px;
-        color: $form-text-color;
+        color: var(--red-ui-form-text-color);
         vertical-align: middle;
         border-radius: 4px;
     }
@@ -193,8 +193,8 @@
     div[contenteditable="true"],
     .uneditable-input,
     .placeholder-input {
-        background-color: $form-input-background;
-        border: 1px solid $form-input-border-color;
+        background-color: var(--red-ui-form-input-background);
+        border: 1px solid var(--red-ui-form-input-border-color);
     }
 
     textarea:focus,
@@ -214,7 +214,7 @@
     input[type="color"]:focus,
     div[contenteditable="true"]:focus,
     .uneditable-input:focus {
-        border-color: $form-input-focus-color;
+        border-color: var(--red-ui-form-input-focus-color);
         outline: 0;
         outline: thin dotted \9;
     }
@@ -245,8 +245,8 @@
 
     select {
         width: 220px;
-        background-color: $form-input-background;
-        border: 1px solid $form-input-border-color;
+        background-color: var(--red-ui-form-input-background);
+        border: 1px solid var(--red-ui-form-input-border-color);
     }
 
     select[multiple],
@@ -258,16 +258,16 @@
     input[type="file"]:focus,
     input[type="radio"]:focus,
     input[type="checkbox"]:focus {
-        outline: 2px auto $form-input-focus-color;
+        outline: 2px auto var(--red-ui-form-input-focus-color);
         outline-offset: -3px;
     }
 
     .uneditable-input,
     .uneditable-textarea {
-        color: $form-text-color-disabled;
+        color: var(--red-ui-form-text-color-disabled);
         cursor: not-allowed;
-        background-color: $form-input-background-disabled;
-        border-color: $form-input-border-color;
+        background-color: var(--red-ui-form-input-background-disabled);
+        border-color: var(--red-ui-form-input-border-color);
     }
 
     .uneditable-input {
@@ -282,19 +282,19 @@
 
     input:-moz-placeholder,
     textarea:-moz-placeholder {
-        color: $form-placeholder-color;
+        color: var(--red-ui-form-placeholder-color);
     }
 
     input:-ms-input-placeholder,
     div[contenteditable="true"]:-ms-input-placeholder,
     textarea:-ms-input-placeholder {
-        color: $form-placeholder-color;
+        color: var(--red-ui-form-placeholder-color);
     }
 
     input::-webkit-input-placeholder,
     div[contenteditable="true"]::-webkit-input-placeholder,
     textarea::-webkit-input-placeholder {
-        color: $form-placeholder-color;
+        color: var(--red-ui-form-placeholder-color);
     }
 
     .radio,
@@ -384,7 +384,7 @@
     }
 
     label.disabled {
-        color: $form-text-color-disabled;
+        color: var(--red-ui-form-text-color-disabled);
         cursor: default;
     }
 
@@ -395,8 +395,8 @@
     select[readonly],
     textarea[readonly] {
         cursor: not-allowed;
-        color: $form-text-color-disabled;
-        background-color: $form-input-background-disabled;
+        color: var(--red-ui-form-text-color-disabled);
+        background-color: var(--red-ui-form-input-background-disabled);
     }
 
     input[type="radio"][disabled],
@@ -410,21 +410,21 @@
     div[contenteditable="true"]:invalid,
     textarea:invalid,
     select:invalid {
-        border-color: $form-input-border-error-color;
+        border-color: var(--red-ui-form-input-border-error-color);
     }
 
     input:focus:invalid,
     div[contenteditable="true"]:focus:invalid,
     textarea:focus:invalid,
     select:focus:invalid {
-        border-color: $form-input-border-error-color;
+        border-color: var(--red-ui-form-input-border-error-color);
     }
 
     input:focus:invalid:focus,
     div[contenteditable="true"]:focus:invalid:focus,
     textarea:focus:invalid:focus,
     select:focus:invalid:focus {
-        border-color: $form-input-border-error-color;
+        border-color: var(--red-ui-form-input-border-error-color);
     }
 
     .input-append,
@@ -488,8 +488,8 @@
         font-weight: normal;
         line-height: 20px;
         text-align: center;
-        background-color: $form-button-background;
-        border: 1px solid $form-input-border-color;
+        background-color: var(--red-ui-form-button-background);
+        border: 1px solid var(--red-ui-form-input-border-color);
     }
 
     .input-append .add-on,
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/header.scss b/packages/node_modules/@node-red/editor-client/src/sass/header.scss
index 697a90729..19c15b015 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/header.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/header.scss
@@ -24,10 +24,10 @@
     left: 0;
     width: 100%;
     height: 40px;
-    background: $header-background;
+    background: var(--red-ui-header-background);
     box-sizing: border-box;
     padding: 0px 0px 0px 20px;
-    color: $header-menu-color;
+    color: var(--red-ui-header-menu-color);
     font-size: 14px;
 
     span.red-ui-header-logo {
@@ -81,17 +81,17 @@
         font-size: 20px;
         padding: 0px 12px;
         text-decoration: none;
-        color: $header-menu-color;
+        color: var(--red-ui-header-menu-color);
         margin: auto 5px;
         vertical-align: middle;
-        border-left: 2px solid $header-background;
-        border-right: 2px solid $header-background;
+        border-left: 2px solid var(--red-ui-header-background);
+        border-right: 2px solid var(--red-ui-header-background);
 
         &:hover {
-            border-color: $header-menu-item-hover;
+            border-color: var(--red-ui-header-menu-item-hover);
         }
         &:active, &.active {
-            background: $header-button-background-active;
+            background: var(--red-ui-header-button-background-active);
         }
         &:focus {
             outline: none;
@@ -116,18 +116,18 @@
     }
 
     .red-ui-deploy-button {
-        background: $deploy-button-background;
-        color: $deploy-button-color;
+        background: var(--red-ui-deploy-button-background);
+        color: var(--red-ui-deploy-button-color);
 
         &:hover {
-            background: $deploy-button-background-hover;
+            background: var(--red-ui-deploy-button-background-hover);
         }
         &:focus {
             outline: none;
         }
         &:active {
-            background: $deploy-button-background-active;
-            color: $deploy-button-color-active;
+            background: var(--red-ui-deploy-button-background-active);
+            color: var(--red-ui-deploy-button-color-active);
         }
     }
 
@@ -149,21 +149,21 @@
         padding: 4px 12px;
         &.disabled {
             cursor: default;
-            background: $deploy-button-background-disabled;
-            color: $deploy-button-color-disabled;
+            background: var(--red-ui-deploy-button-background-disabled);
+            color: var(--red-ui-deploy-button-color-disabled);
 
             .red-ui-deploy-button-content>img {
                 opacity: 0.3;
             }
             &+ #red-ui-header-button-deploy-options {
-                background: $deploy-button-background-disabled;
-                color: $deploy-button-color-active;
+                background: var(--red-ui-deploy-button-background-disabled);
+                color: var(--red-ui-deploy-button-color-active);
             }
             &+ #red-ui-header-button-deploy-options:hover {
-                background: $deploy-button-background-disabled-hover;
+                background: var(--red-ui-deploy-button-background-disabled-hover);
             }
             &+ #red-ui-header-button-deploy-options:active {
-                background: $deploy-button-background-disabled;
+                background: var(--red-ui-deploy-button-background-disabled);
             }
         }
 
@@ -174,23 +174,23 @@
 
     .red-ui-deploy-button-group.open {
         #red-ui-header-button-deploy-options {
-            background: $header-button-background-active !important;
+            background: var(--red-ui-header-button-background-active) !important;
         }
     }
 
     li.open .button {
-        background: $header-button-background-active;
-        border-color: $header-button-background-active;
+        background: var(--red-ui-header-button-background-active);
+        border-color: var(--red-ui-header-button-background-active);
     }
 
 
     ul.red-ui-menu-dropdown {
-        background: $header-menu-background;
-        border: 1px solid $header-menu-background;
+        background: var(--red-ui-header-menu-background);
+        border: 1px solid var(--red-ui-header-menu-background);
         width: 260px !important;
         margin-top: 0;
         li a {
-            color: $header-menu-color;
+            color: var(--red-ui-header-menu-color);
             padding: 3px 10px 3px 40px;
             img {
                 max-width: 100%;
@@ -199,11 +199,11 @@
                 border: 3px solid transparent;
             }
             .red-ui-popover-key {
-                color: $header-menu-color-disabled !important;
-                border-color: $header-menu-color-disabled !important;
+                color: var(--red-ui-header-menu-color-disabled) !important;
+                border-color: var(--red-ui-header-menu-color-disabled) !important;
             }
             &.active img {
-                border: 3px solid $header-menu-item-border-active;
+                border: 3px solid var(--red-ui-header-menu-item-border-active);
             }
 
             span.red-ui-menu-label-container {
@@ -217,7 +217,7 @@
                 text-indent: 0px;
             }
             span.red-ui-menu-sublabel {
-                color: $header-menu-sublabel-color;
+                color: var(--red-ui-header-menu-sublabel-color);
                 font-size: 13px;
                 display: inline-block;
                 text-indent: 0px;
@@ -228,13 +228,13 @@
         > li > a:focus,
         > li:hover > a,
         > li:focus > a {
-            background: $header-menu-item-hover !important;
+            background: var(--red-ui-header-menu-item-hover) !important;
         }
         li.red-ui-menu-divider {
-            background: $headerMenuItemDivider;
+            background: var(--red-ui-headerMenuItemDivider);
         }
         li.disabled a {
-            color:  $header-menu-color-disabled;
+            color:  var(--red-ui-header-menu-color-disabled);
         }
         > li.disabled > a:hover,
         > li.disabled > a:focus {
@@ -242,7 +242,7 @@
         }
     }
     .red-ui-menu-dropdown-submenu>a:before {
-        border-right-color: $headerMenuCaret;
+        border-right-color: var(--red-ui-headerMenuCaret);
     }
 
     /* Deploy menu customisations */
@@ -250,7 +250,7 @@
         width: 300px !important;
         li a {
             padding: 10px 30px;
-            color: $header-menu-heading-color;
+            color: var(--red-ui-header-menu-heading-color);
             span.red-ui-menu-label {
                 font-size: 16px;
                 display: inline-block;
@@ -263,7 +263,7 @@
     }
     /* User menu customisations */
     #usermenu-item-username > .red-ui-menu-label {
-        color: $header-menu-heading-color;
+        color: var(--red-ui-header-menu-heading-color);
     }
 
     #red-ui-header-button-user .user-profile {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/jquery.scss b/packages/node_modules/@node-red/editor-client/src/sass/jquery.scss
index b7278b332..27661c459 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/jquery.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/jquery.scss
@@ -16,25 +16,25 @@
 
 .ui-widget {
     font-size: 14px !important;
-    font-family: $primary-font;
+    font-family: var(--red-ui-primary-font);
 }
 .ui-widget input, .ui-widget div[contenteditable="true"], .ui-widget select, .ui-widget textarea, .ui-widget button {
     font-size: 14px !important;
-    font-family: $primary-font;
+    font-family: var(--red-ui-primary-font);
 }
 .ui-widget input, .ui-widget div[contenteditable="true"] {
     box-shadow: none;
 }
 
 .ui-widget.ui-widget-content {
-    border: 1px solid $tertiary-border-color;
+	border: 1px solid var(--red-ui-tertiary-border-color);
 }
 .ui-widget-content {
-    border: 1px solid $secondary-border-color;
+	border: 1px solid var(--red-ui-secondary-border-color);
 }
 
 .ui-widget-header {
-    color: $header-text-color;
+    color: var(--red-ui-header-text-color);
 }
 
 /* jQuery Theme overrides */
@@ -50,7 +50,7 @@
 
 .ui-dialog {
     border-radius: 1px;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     padding: 0;
     @include component-shadow;
 }
@@ -62,20 +62,20 @@
 }
 .ui-dialog .ui-dialog-titlebar {
     padding: 10px;
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
     border: none;
-    border-bottom: 1px solid $primary-border-color;
+    border-bottom: 1px solid var(--red-ui-primary-border-color);
     border-radius: 0;
 }
 .ui-dialog .ui-dialog-buttonpane.ui-widget-content {
-    background: $tertiary-background;
+    background: var(--red-ui-tertiary-background);
 
 }
 .ui-corner-all {
     border-radius: 1px;
 }
 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
 }
 .ui-dialog-no-close .ui-dialog-titlebar-close {
     display: none;
@@ -95,8 +95,8 @@
     padding: 6px 14px;
     margin-right: 8px;
     border-radius: 2px;
-    color: $workspace-button-color;
-    background: $workspace-button-background;
+    color: var(--red-ui-workspace-button-color);
+    background: var(--red-ui-workspace-button-background);
 
     &.leftButton {
         float: left;
@@ -107,18 +107,18 @@
     }
 
     &.primary {
-        border-color: $workspace-button-background-primary;
-        color: $workspace-button-color-primary !important;
-        background: $workspace-button-background-primary;
+        border-color: var(--red-ui-workspace-button-background-primary);
+        color: var(--red-ui-workspace-button-color-primary) !important;
+        background: var(--red-ui-workspace-button-background-primary);
         &:not(.disabled):hover {
-            border-color: $workspace-button-background-primary-hover;
-            background: $workspace-button-background-primary-hover;
-            color: $workspace-button-color-primary !important;
+            border-color: var(--red-ui-workspace-button-background-primary-hover);
+            background: var(--red-ui-workspace-button-background-primary-hover);
+            color: var(--red-ui-workspace-button-color-primary) !important;
         }
         &.disabled {
-            border-color: $form-input-border-color;
-            color: $workspace-button-color-disabled !important;
-            background: $workspace-button-background;
+            border-color: var(--red-ui-form-input-border-color);
+            color: var(--red-ui-workspace-button-color-disabled) !important;
+            background: var(--red-ui-workspace-button-background);
         }
     }
     &.disabled {
@@ -142,10 +142,10 @@
 .ui-spinner {
     border-radius: 4px;
     padding: 0;
-    border: 1px solid $form-input-border-color;
+    border: 1px solid var(--red-ui-form-input-border-color);
 }
 .ui-spinner input {
-    background: $form-input-background;
+    background: var(--red-ui-form-input-background);
     margin: 0 17px 0 0;
     padding: 6px;
     border: none;
@@ -169,8 +169,8 @@
 .ui-button,
 html .ui-button.ui-state-disabled:hover,
 html .ui-button.ui-state-disabled:active {
-    border: 1px solid $secondary-border-color;
-    background: $form-button-background;
+    border: 1px solid var(--red-ui-secondary-border-color);
+    background: var(--red-ui-form-button-background);
 }
 
 .ui-state-hover,
@@ -180,9 +180,9 @@ html .ui-button.ui-state-disabled:active {
 .ui-widget-content .ui-state-focus,
 .ui-widget-header .ui-state-focus,
 .ui-button:hover, .ui-button:focus {
-    border: 1px solid $secondary-border-color;
-    background: $workspace-button-background-hover;
-    color: $workspace-button-color-hover;
+    border: 1px solid var(--red-ui-secondary-border-color);
+    background: var(--red-ui-workspace-button-background-hover);
+    color: var(--red-ui-workspace-button-color-hover);
 }
 
 .ui-state-active,
@@ -191,10 +191,10 @@ html .ui-button.ui-state-disabled:active {
 a.ui-button:active,
 .ui-button:active,
 .ui-button.ui-state-active:hover {
-    border: 1px solid $secondary-border-color;
-    background: $workspace-button-background-active;
+    border: 1px solid var(--red-ui-secondary-border-color);
+    background: var(--red-ui-workspace-button-background-active);
     font-weight: normal;
-    color: $workspace-button-color-active;
+    color: var(--red-ui-workspace-button-color-active);
 }
 
 .ui-state-active .ui-icon, .ui-button:active .ui-icon {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss b/packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss
index 8c4e5a3a8..c11aa0592 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss
@@ -23,9 +23,9 @@
     }
     .keyboard-shortcut-list-header {
         padding:0 5px 0 5px;
-        border-bottom: 1px solid $primary-border-color;
+        border-bottom: 1px solid var(--red-ui-primary-border-color);
         div {
-            color: $header-text-color !important;
+            color: var(--red-ui-header-text-color) !important;
         }
         .red-ui-searchBox-container {
             width: calc(100% - 20px);
@@ -49,7 +49,7 @@
             }
         }
         li:hover {
-            background: $list-item-background-hover;
+            background: var(--red-ui-list-item-background-hover);
         }
     }
     .keyboard-shortcut-entry {
@@ -78,13 +78,13 @@
         width: calc(100% - 160px - 100px - 10px);
         overflow: hidden;
         i {
-            color: $tertiary-text-color;
+            color: var(--red-ui-tertiary-text-color);
             margin-right: 5px;
         }
     }
     .keyboard-shortcut-entry-scope {
         width:100px;
-        color: $tertiary-text-color;
+        color: var(--red-ui-tertiary-text-color);
         vertical-align: middle;
         text-align: right;
     }
@@ -94,13 +94,13 @@
         }
     }
     .keyboard-shortcut-entry-unassigned {
-        color: $tertiary-text-color;
+        color: var(--red-ui-tertiary-text-color);
         .keyboard-shortcut-entry-key {
             font-style: italic;
         }
     }
     .keyboard-shortcut-entry-expanded {
-        background: $list-item-background-selected;
+        background: var(--red-ui-list-item-background-selected);
         .keyboard-shortcut-entry-key {
             width: 150px;
         }
@@ -115,12 +115,12 @@
     }
 }
 .help-key {
-    border: 1px solid $tertiary-border-color;
+    border: 1px solid var(--red-ui-tertiary-border-color);
     padding: 4px;
     border-radius: 3px;
-    background: $tertiary-background;
-    font-family: $monospace-font;
-    box-shadow: $shade-color  1px 1px 1px;
+    background: var(--red-ui-tertiary-background);
+    font-family: var(--red-ui-monospace-font);
+    box-shadow: var(--red-ui-shade-color  1px 1px 1px);
 }
 .help-key-block {
     white-space: nowrap;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/library.scss b/packages/node_modules/@node-red/editor-client/src/sass/library.scss
index 0d284ffce..bb651e4ea 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/library.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/library.scss
@@ -18,13 +18,13 @@
     pre {
         margin: 10px 0;
         border: none;
-        color: $primary-text-color;
+        color: var(--red-ui-primary-text-color);
         span {
             padding: 5px 0;
         }
         span.error {
             padding: 5px;
-            border: 1px solid $form-input-border-error-color;
+            border: 1px solid var(--red-ui-form-input-border-error-color);
             margin: 0 1px;
         }
     }
@@ -52,16 +52,16 @@
 
 .red-ui-clipboard-dialog-tab-clipboard {
     textarea {
-        color: $secondary-text-color-active !important;
+        color: var(--red-ui-secondary-text-color-active) !important;
         resize: none;
         width: 100%;
         border-radius: 4px;
-        font-family: $monospace-font !important;
+        font-family: var(--red-ui-monospace-font !important);
         font-size: 13px !important;
         height: 100%;
         line-height: 1.3em;
         padding: 6px 10px;
-        background: $clipboard-textarea-background;
+        background: var(--red-ui-clipboard-textarea-background);
     }
 }
 
@@ -80,7 +80,7 @@
     right: 0;
     bottom: 0;
     padding: 0;
-    background: $form-input-background;
+    background: var(--red-ui-form-input-background);
     &>div {
         height: 100%;
         box-sizing: border-box;
@@ -89,7 +89,7 @@
 .red-ui-clipboard-dialog-box {
     height: 400px;
     position:relative;
-    border:1px solid $primary-border-color;
+    border:1px solid var(--red-ui-primary-border-color);
 }
 
 #red-ui-clipboard-dialog-export-tab-library-filename {
@@ -111,7 +111,7 @@
 .red-ui-clipboard-dialog-tabs-content>div.red-ui-clipboard-dialog-export-tab-library-browser {
     height: calc(100% - 60px);
     margin-bottom: 13px;
-    border-bottom: 1px solid $primary-border-color;
+    border-bottom: 1px solid var(--red-ui-primary-border-color);
     box-sizing: border-box;
 }
 #red-ui-clipboard-dialog-import-tab-library-browser {
@@ -124,7 +124,7 @@
     position: relative;
     height: 100%;
     .red-ui-treeList-container {
-        background: $secondary-background;
+        background: var(--red-ui-secondary-background);
         border: none;
         border-radius: 0;
         li {
@@ -149,14 +149,14 @@
 
 #red-ui-library-dialog-save-browser {
     height: calc(100% - 60px);
-    border: 1px solid $primary-border-color;
+    border: 1px solid var(--red-ui-primary-border-color);
     margin-bottom: 10px;
 }
 #red-ui-library-dialog-load-browser {
-    // border: 1px solid $primary-border-color;
+    // border: 1px solid var(--red-ui-primary-border-color);
 }
 #red-ui-library-dialog-load-panes {
-    border: 1px solid $primary-border-color;
+    border: 1px solid var(--red-ui-primary-border-color);
 }
 
 
@@ -180,15 +180,15 @@
     position: relative;
 
     li:not(:first-child) .red-ui-clipboard-dialog-import-conflicts-item-header {
-        // border-top: 1px solid $secondary-border-color;
+        // border-top: 1px solid var(--red-ui-secondary-border-color);
     }
 
 }
 
 .red-ui-clipboard-dialog-import-conflicts-item-header {
-    background: $tertiary-background;
+    background: var(--red-ui-tertiary-background);
     & > span:first-child {
-        color: $header-text-color;
+        color: var(--red-ui-header-text-color);
         padding-left: 4px;
         font-size: 12px;
     }
@@ -199,7 +199,7 @@
     bottom: 0;
     right: 0px;
     text-align: center;
-    color: $form-text-color;
+    color: var(--red-ui-form-text-color);
     .form-row & label  {
         padding: 2px 0;
         line-height: 23px;
@@ -210,7 +210,7 @@
         height: 100%;
         width: 80px;
         text-align: center;
-        border-left: 1px solid $secondary-border-color;
+        border-left: 1px solid var(--red-ui-secondary-border-color);
     }
     input[type="checkbox"] {
         display: inline-block;
@@ -265,7 +265,7 @@
     span:nth-child(3), span:nth-child(4) {
         flex-grow: 0;
         padding-right: 5px;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         font-size: 0.9em;
     }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss
index 9214ea37b..6262597a1 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss
@@ -31,33 +31,33 @@
 }
 
 @mixin component-border {
-   border: 1px solid $primary-border-color;
+   border: 1px solid var(--red-ui-primary-border-color);
    box-sizing: border-box;
 
 }
 
 @mixin reset-a-style {
-    color: $workspace-button-color !important;
-    background: $workspace-button-background;
+    color: var(--red-ui-workspace-button-color) !important;
+    background: var(--red-ui-workspace-button-background);
     text-decoration: none;
 
     &.disabled, &:disabled  {
         cursor: default;
-        color: $workspace-button-color-disabled !important;
+        color: var(--red-ui-workspace-button-color-disabled) !important;
     }
     &:hover, &:focus {
         text-decoration: none;
     }
-    &:not(.disabled):not(:disabled):hover, {
-        color: $workspace-button-color-hover !important;
-        background: $workspace-button-background-hover;
+    &:not(.disabled):not(:disabled):hover {
+        color: var(--red-ui-workspace-button-color-hover) !important;
+        background: var(--red-ui-workspace-button-background-hover);
     }
     &:not(.disabled):not(:disabled):focus {
-        color: $workspace-button-color-focus !important;
+        color: var(--red-ui-workspace-button-color-focus) !important;
     }
     &:not(.disabled):not(:disabled):active {
-        color: $workspace-button-color-active !important;
-        background: $workspace-button-background-active;
+        color: var(--red-ui-workspace-button-color-active) !important;
+        background: var(--red-ui-workspace-button-background-active);
         text-decoration: none;
     }
 }
@@ -68,14 +68,14 @@
 
     box-sizing: border-box;
     display: inline-block;
-    border: 1px solid $form-input-border-color;
+    border: 1px solid var(--red-ui-form-input-border-color);
     text-align: center;
     margin:0;
     cursor:pointer;
 
     &.selected:not(.disabled):not(:disabled) {
-        color: $workspace-button-color-selected !important;
-        background: $workspace-button-background-active;
+        color: var(--red-ui-workspace-button-color-selected) !important;
+        background: var(--red-ui-workspace-button-background-active);
     }
     .button-group &:not(:first-child) {
         border-left: none;
@@ -108,23 +108,23 @@
     }
 
     &:focus {
-        outline: 1px solid $workspace-button-color-focus-outline;
+        outline: 1px solid var(--red-ui-workspace-button-color-focus-outline);
         outline-offset: 1px;
     }
 
     &.primary {
-        border-color: $workspace-button-background-primary;
-        color: $workspace-button-color-primary !important;
-        background: $workspace-button-background-primary;
+        border-color: var(--red-ui-workspace-button-background-primary);
+        color: var(--red-ui-workspace-button-color-primary) !important;
+        background: var(--red-ui-workspace-button-background-primary);
         &.disabled, &.ui-state-disabled {
             background: none;
-            color: $workspace-button-color !important;
-            border-color: $form-input-border-color;
+            color: var(--red-ui-workspace-button-color) !important;
+            border-color: var(--red-ui-form-input-border-color);
         }
         &:not(.disabled):not(.ui-button-disabled):hover {
-            border-color: $workspace-button-background-primary-hover;
-            background: $workspace-button-background-primary-hover;
-            color: $workspace-button-color-primary !important;
+            border-color: var(--red-ui-workspace-button-background-primary-hover);
+            background: var(--red-ui-workspace-button-background-primary-hover);
+            color: var(--red-ui-workspace-button-color-primary) !important;
         }
     }
     &.secondary {
@@ -151,7 +151,7 @@
         margin-bottom: 1px;
         &.selected:not(.disabled):not(:disabled) {
             border-bottom-width: 2px;
-            border-bottom-color: $form-input-border-selected-color;
+            border-bottom-color: var(--red-ui-form-input-border-selected-color);
             margin-bottom: 0;
             cursor: default;
         }
@@ -166,7 +166,7 @@
     padding: 6px 14px;
     margin-right: 8px;
     &:not(.disabled):hover {
-        //color: $workspace-button-color;
+        //color: var(--red-ui-workspace-button-color);
     }
     &.disabled {
         background: none;
@@ -187,8 +187,8 @@
 }
 
 @mixin component-footer {
-    border-top: 1px solid $primary-border-color;
-    background: $primary-background;
+    border-top: 1px solid var(--red-ui-primary-border-color);
+    background: var(--red-ui-primary-background);
     text-align: right;
     position: absolute;
     bottom: 0;
@@ -231,7 +231,7 @@
 }
 
 @mixin component-shadow {
-    box-shadow: 1px 1px 4px $shadow;
+    box-shadow: 1px 1px 4px var(--red-ui-shadow);
 
 }
 
@@ -241,7 +241,7 @@
     left: 0;
     bottom: 0;
     right: 0;
-    background: $shade-color;
+    background: var(--red-ui-shade-color);
     z-index: 5;
 }
 .red-ui-shade {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss b/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss
index 52e8509b3..efae432b2 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss
@@ -27,10 +27,10 @@
     position: relative;
     padding: 8px 18px 0px;
     margin-bottom: 4px;
-    box-shadow: 0 1px 1px 1px $shadow;
-    background-color: $secondary-background;
-    color: $primary-text-color;
-    border: 1px solid $notification-border-default;
+    box-shadow: 0 1px 1px 1px var(--red-ui-shadow);
+    background-color: var(--red-ui-secondary-background);
+    color: var(--red-ui-primary-text-color);
+    border: 1px solid var(--red-ui-notification-border-default);
     border-left-width: 16px;
     overflow: hidden;
     .ui-dialog-buttonset {
@@ -50,13 +50,13 @@
 }
 
 .red-ui-notification-success {
-    border-color: $notification-border-success;
+    border-color: var(--red-ui-notification-border-success);
 }
 .red-ui-notification-warning {
-    border-color: $notification-border-warning;
+    border-color: var(--red-ui-notification-border-warning);
 }
 .red-ui-notification-error {
-    border-color: $notification-border-error;
+    border-color: var(--red-ui-notification-border-error);
 }
 
 .red-ui-notification-compact {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss
index 34fbd3e07..ca387782b 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss
@@ -27,7 +27,7 @@
     left:0;
     padding: 0;
     box-sizing:border-box;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
 
     .red-ui-editableList-container {
         border: none;
@@ -37,27 +37,27 @@
 
         li {
             // border: none;
-            // border-top: 1px solid $primary-border-color;
+            // border-top: 1px solid var(--red-ui-primary-border-color);
             padding: 0px;
             .red-ui-button {
                 min-width: 60px;
             }
 
             .disabled {
-                // background: $secondary-background-inactive;//f3f3f3;
+                // background: var(--red-ui-secondary-background-inactive;//f3f3f3);
 
                 .red-ui-palette-module-name {
                     font-style: italic;
-                    color: $tertiary-text-color;
+                    color: var(--red-ui-tertiary-text-color);
                 }
                 .red-ui-palette-module-version {
-                    color: $tertiary-text-color;
+                    color: var(--red-ui-tertiary-text-color);
                 }
                 .red-ui-palette-module-errors .fa-warning {
                     opacity: 0.5;
                 }
                 ul.red-ui-palette-module-error-list li {
-                    color: $tertiary-text-color;
+                    color: var(--red-ui-tertiary-text-color);
                 }
 
 
@@ -66,7 +66,7 @@
                 padding: 12px 16px;
             }
             &:last-child {
-                // border-bottom: 1px solid $primary-border-color;
+                // border-bottom: 1px solid var(--red-ui-primary-border-color);
             }
         }
 
@@ -79,14 +79,14 @@
         bottom:0
     }
     .red-ui-palette-editor-toolbar {
-        background: $primary-background;
+        background: var(--red-ui-primary-background);
         box-sizing: border-box;
         padding: 8px 10px;
-        border-bottom: 1px solid $primary-border-color;
+        border-bottom: 1px solid var(--red-ui-primary-border-color);
         text-align: right;
     }
     .red-ui-palette-module-shade-status {
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
     }
     .red-ui-palette-module-updated {
         margin-left: 10px;
@@ -98,7 +98,7 @@
     .red-ui-palette-module-description {
         margin-left: 20px;
         font-size: 0.9em;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
     }
     .red-ui-palette-module-link {
     }
@@ -120,7 +120,7 @@
         }
     }
     .red-ui-palette-module-set {
-        border:1px solid $secondary-border-color;
+        border:1px solid var(--red-ui-secondary-border-color);
         border-radius: 0;
         padding: 5px;
         position: relative;
@@ -138,7 +138,7 @@
     }
 
     .red-ui-palette-module-type {
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         padding-left: 5px;
         font-size: 0.9em;
         @include enable-selection;
@@ -150,8 +150,8 @@
         border-radius: 3px;
         vertical-align: middle;
         margin-right: 5px;
-        background: $primary-background;
-        border: 1px dashed $secondary-border-color;
+        background: var(--red-ui-primary-background);
+        border: 1px dashed var(--red-ui-secondary-border-color);
     }
     .red-ui-palette-module-set-button-group {
         position: absolute;
@@ -160,35 +160,35 @@
     }
 
     .red-ui-palette-module-set-disabled {
-        background: $list-item-background-disabled;
+        background: var(--red-ui-list-item-background-disabled);
         .red-ui-palette-module-type {
-            color: $secondary-text-color-disabled-active;
+            color: var(--red-ui-secondary-text-color-disabled-active);
         }
     }
     .red-ui-palette-module-more {
         padding: 0 !important;
         margin-top: 10px;
         margin-bottom: 10px;
-        background: $tab-background-inactive;
+        background: var(--red-ui-tab-background-inactive);
         a {
             display: block;
             text-align: center;
             padding: 12px 8px;
-            color: $text-color-code;
+            color: var(--red-ui-text-color-code);
 
             &:hover {
                 text-decoration: none;
-                background: $tab-background-hover;
+                background: var(--red-ui-tab-background-hover);
             }
         }
     }
 
 }
 .red-ui-palette-module-meta {
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     position: relative;
     &.disabled {
-        color: $secondary-text-color-disabled;
+        color: var(--red-ui-secondary-text-color-disabled);
     }
 
     .fa {
@@ -198,7 +198,7 @@
     }
 }
 .red-ui-palette-module-name {
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
     white-space: nowrap;
     @include enable-selection;
 }
@@ -216,7 +216,7 @@
     }
 }
 .red-ui-palette-module-meta .fa-warning {
-    color: $text-color-warning;
+    color: var(--red-ui-text-color-warning);
 }
 ul.red-ui-palette-module-error-list {
     display: inline-block;
@@ -264,9 +264,9 @@ button.red-ui-palette-editor-upload-button {
     right: 0;
     top: 44px;
     padding: 20px;
-    background: $secondary-background;
-    border-bottom: 1px $secondary-border-color solid;
-    box-shadow: 1px 1px 4px $shadow;
+    background: var(--red-ui-secondary-background);
+    border-bottom: 1px var(--red-ui-secondary-border-color solid);
+    box-shadow: 1px 1px 4px var(--red-ui-shadow);
 
     .placeholder-input {
         width: calc(100% - 180px);
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss
index 800f34079..0d123918a 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss
@@ -20,7 +20,7 @@
     top: 0px;
     bottom: 0px;
     left:0px;
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
     width: 180px;
     text-align: center;
     @include disable-selection;
@@ -55,26 +55,26 @@
 .red-ui-palette-search {
     position: relative;
     overflow: hidden;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     text-align: center;
     height: 35px;
     padding: 3px;
-    border-bottom: 1px solid $primary-border-color;
+    border-bottom: 1px solid var(--red-ui-primary-border-color);
     box-sizing:border-box;
 }
 
 .red-ui-palette-category {
-    border-bottom: 1px solid $secondary-border-color;
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
 }
 .red-ui-palette-content {
-    background: $palette-content-background;
+    background: var(--red-ui-palette-content-background);
     padding: 3px;
 }
 
 .red-ui-palette-header {
     position: relative;
-    background: $palette-header-background;
-    color: $palette-header-color;
+    background: var(--red-ui-palette-header-background);
+    color: var(--red-ui-palette-header-color);
     cursor: pointer;
     text-align: left;
     padding: 9px;
@@ -83,7 +83,7 @@
     overflow: hidden;
     user-select: none;
     &:hover {
-        background: $palette-header-background !important;
+        background: var(--red-ui-palette-header-background) !important;
     }
 }
 .red-ui-palette-header > i {
@@ -106,7 +106,7 @@
     clear: both;
 }
 .red-ui-palette-label {
-    color: $node-label-color;
+    color: var(--red-ui-node-label-color);
     font-size: 13px;
     margin: 4px 0 4px 32px;
     line-height: 20px;
@@ -121,11 +121,11 @@
 .red-ui-palette-node {
     // display: inline-block;
     cursor: move;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     margin: 10px auto;
     height: 25px;
     border-radius: 5px;
-    border: 1px solid $node-border;
+    border: 1px solid var(--red-ui-node-border);
     background-position: 5% 50%;
     background-repeat: no-repeat;
     width: 120px;
@@ -141,7 +141,7 @@
 }
 .red-ui-palette-node:hover {
     border-color: transparent;
-    box-shadow: 0 0 0 2px $node-selected-color;
+    box-shadow: 0 0 0 2px var(--red-ui-node-selected-color);
 }
 .red-ui-palette-port {
     position: absolute;
@@ -149,11 +149,11 @@
     left: -5px;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
-    background: $node-port-background;
+    background: var(--red-ui-node-port-background);
     border-radius: 3px;
     width: 10px;
     height: 10px;
-    border: 1px solid $node-border;
+    border: 1px solid var(--red-ui-node-border);
 }
 .red-ui-palette-port-output {
     left:auto;
@@ -161,7 +161,7 @@
 }
 
 .red-ui-palette-node:hover .red-ui-palette-port {
-    background-color: $node-port-background-hover;
+    background-color: var(--red-ui-node-port-background-hover);
 }
 .red-ui-palette-icon-container {
     position: absolute;
@@ -170,14 +170,14 @@
     bottom:0;
     left:0;
     width: 30px;
-    border-right: 1px solid $node-icon-background-color;
-    background-color: $node-icon-background-color;
+    border-right: 1px solid var(--red-ui-node-icon-background-color);
+    background-color: var(--red-ui-node-icon-background-color);
 }
 .red-ui-palette-icon-container-right {
     left: auto;
     right: 0;
     border-right: none;
-    border-left: 1px solid $node-icon-background-color;
+    border-left: 1px solid var(--red-ui-node-icon-background-color);
 }
 .red-ui-palette-icon {
     display: inline-block;
@@ -198,7 +198,7 @@
             background: none;
         }
         .red-ui-palette-icon-fa {
-            color: $secondary-text-color;
+            color: var(--red-ui-secondary-text-color);
             font-size: 18px;
         }
     }
@@ -249,12 +249,12 @@
     // width: 30px;
     // height: 25px;
     border-radius: 3px;
-    border: 1px solid $node-border;
+    border: 1px solid var(--red-ui-node-border);
     background-position: 5% 50%;
     background-repeat: no-repeat;
     background-size: contain;
     position: relative;
-    background-color: $node-icon-background-color;
+    background-color: var(--red-ui-node-icon-background-color);
     text-align: center;
 
     .red-ui-palette-icon {
@@ -278,7 +278,7 @@
             background: none;
         }
         .red-ui-palette-icon-fa {
-            color: $secondary-text-color;
+            color: var(--red-ui-secondary-text-color);
             font-size: 16px;
         }
     }
@@ -318,5 +318,5 @@
 .red-ui-node-label {
     white-space: nowrap;
     margin-left: 4px;
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/panels.scss b/packages/node_modules/@node-red/editor-client/src/sass/panels.scss
index e820992b4..c782b341b 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/panels.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/panels.scss
@@ -35,12 +35,12 @@
 
 .red-ui-panels-separator {
     flex: 0 0 auto;
-    border-top: 1px solid $secondary-border-color;
-    border-bottom: 1px solid $secondary-border-color;
+    border-top: 1px solid var(--red-ui-secondary-border-color);
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
     height: 7px;
     box-sizing: border-box;
     cursor: ns-resize;
-    background-color: $primary-background;
+    background-color: var(--red-ui-primary-background);
 
     &:before {
         content: '';
@@ -55,7 +55,7 @@
         mask-position: center;
         -webkit-mask-repeat: no-repeat;
         mask-repeat: no-repeat;
-        background-color: $grip-color;
+        background-color: var(--red-ui-grip-color);
     }
 }
 
@@ -80,14 +80,14 @@
         vertical-align: top;
         border-top: none;
         border-bottom: none;
-        border-left: 1px solid $secondary-border-color;
-        border-right: 1px solid $secondary-border-color;
+        border-left: 1px solid var(--red-ui-secondary-border-color);
+        border-right: 1px solid var(--red-ui-secondary-border-color);
         height: 100%;
         width: 7px;
         display: inline-block;
         cursor: ew-resize;
-        background-color: $primary-background;
-        
+        background-color: var(--red-ui-primary-background);
+
         &:before {
             content: '';
             display: block;
@@ -101,7 +101,7 @@
             mask-position: 50% 50%;
             -webkit-mask-repeat: no-repeat;
             mask-repeat: no-repeat;
-            background-color: $grip-color;
+            background-color: var(--red-ui-grip-color);
         }
     }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
index 2eb167ef4..7e504b59b 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
@@ -25,7 +25,7 @@
     color: var(--red-ui-popover-color);
     border-radius: 4px;
     z-index: 1000;
-    font-family: $primary-font;
+    font-family: var(--red-ui-primary-font);
     font-size: 14px;
     line-height: 1.4em;
     @include component-shadow;
@@ -146,7 +146,7 @@
 
 .red-ui-popover-key {
     font-size: 11px;
-    font-family: $monospace-font;
+    font-family: var(--red-ui-monospace-font);
     margin-left: 3px;
     border: 1px solid var(--red-ui-popover-color);
     border-radius:3px;
@@ -163,42 +163,42 @@
         color: var(--red-ui-popover-color) !important;
     }
     a:focus {
-        outline: 1px solid $form-input-focus-color;
+        outline: 1px solid var(--red-ui-form-input-focus-color);
     }
 }
 .red-ui-popover a.red-ui-button,
 .red-ui-popover button.red-ui-button {
     &:not(.primary) {
-        border-color: $popover-button-border-color;
+        border-color: var(--red-ui-popover-button-border-color);
         background: var(--red-ui-popover-background);
         color: var(--red-ui-popover-color) !important;
     }
     &:not(.primary):not(.disabled):not(.ui-button-disabled):hover {
-        border-color: $popover-button-border-color-hover;
+        border-color: var(--red-ui-popover-button-border-color-hover);
     }
 
 
     &.primary {
-        border-color: $popover-button-border-color;
+        border-color: var(--red-ui-popover-button-border-color);
     }
     &.primary:not(.disabled):not(.ui-button-disabled):hover {
-        border-color: $popover-button-border-color-hover;
+        border-color: var(--red-ui-popover-button-border-color-hover);
     }
 }
 .red-ui-popover code {
     border: none;
     background: none;
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
 }
 
 
 .red-ui-popover-panel {
     @include component-shadow;
-    font-family: $primary-font;
-    font-size: $primary-font-size;
+    font-family: var(--red-ui-primary-font);
+    font-size: var(--red-ui-primary-font-size);
     position: absolute;
     box-sizing: border-box;
-    border: 1px solid $primary-border-color;
-    background: $secondary-background;
+    border: 1px solid var(--red-ui-primary-border-color);
+    background: var(--red-ui-secondary-background);
     z-index: 2000;
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/projects.scss b/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
index 681e7b3f9..0019ba516 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
@@ -29,7 +29,7 @@
     overflow-y: scroll;
 }
 .red-ui-sidebar-vc-shade {
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
 }
 
 .red-ui-projects-edit-form form {
@@ -37,7 +37,7 @@
     .form-row {
         margin-bottom: 15px;
         label {
-            color: $primary-text-color;
+            color: var(--red-ui-primary-text-color);
             width: 100%;
             display: block;
             &.red-ui-projects-edit-form-inline-label {
@@ -57,7 +57,7 @@
 
 }
 .red-ui-projects-edit-form-sublabel {
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
     text-align: right;
     margin-bottom: -15px;
     font-weight: normal;
@@ -76,7 +76,7 @@
         font-size: 1.4em;
         padding: 10px;
         min-height: 40px;
-        color: $primary-text-color;
+        color: var(--red-ui-primary-text-color);
     }
     .red-ui-projects-dialog-screen-start-body {
         min-height: 300px;
@@ -132,21 +132,21 @@
     margin-left: -1px;
     padding: 15px;
     margin-top: -15px;
-    border: 1px solid $secondary-border-color;
+    border: 1px solid var(--red-ui-secondary-border-color);
     border-radius: 3px;
 }
 .red-ui-projects-dialog-credentials-box-left {
     width: 220px;
     > div {
         padding:  7px 8px 3px 8px;
-        border: 1px solid $secondary-border-color;
+        border: 1px solid var(--red-ui-secondary-border-color);
         border-radius: 4px;
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
-        border-right-color: $form-background;
+        border-right-color: var(--red-ui-form-background);
         &.disabled {
-            border-color: $form-background;
-            border-right-color:$secondary-border-color;
+            border-color: var(--red-ui-form-background);
+            border-right-color:var(--red-ui-secondary-border-color);
         }
         i {
             font-size: 1.4em;
@@ -173,7 +173,7 @@
 }
 
 .red-ui-projects-dialog-project-list-container {
-    border: 1px solid $secondary-border-color;
+    border: 1px solid var(--red-ui-secondary-border-color);
     border-radius: 2px;
     display: flex;
     flex-direction: column;
@@ -197,43 +197,43 @@
 .red-ui-projects-dialog-project-list-entry {
     padding: 12px 0;
 
-    color: $list-item-color;
-    background: $list-item-background;
-    border-left: 3px solid $list-item-background;
-    border-right: 3px solid $list-item-background;
+    color: var(--red-ui-list-item-color);
+    background: var(--red-ui-list-item-background);
+    border-left: 3px solid var(--red-ui-list-item-background);
+    border-right: 3px solid var(--red-ui-list-item-background);
 
     &.projects-list-entry-current {
         &:not(.selectable) {
-            color: $form-text-color;
-            background: $list-item-background-selected;
-            border-left-color:$list-item-border-selected;
-            border-right-color:$list-item-border-selected;
+            color: var(--red-ui-form-text-color);
+            background: var(--red-ui-list-item-background-selected);
+            border-left-color:var(--red-ui-list-item-border-selected);
+            border-right-color:var(--red-ui-list-item-border-selected);
         }
         i {
-            color: $secondary-text-color;
+            color: var(--red-ui-secondary-text-color);
         }
     }
     &.selectable {
         cursor: pointer;
         &:hover:not(.selected) {
-            color: $form-text-color;
-            background: $list-item-background-hover;
-            border-left-color:$list-item-background-hover;
-            border-right-color:$list-item-background-hover;
+            color: var(--red-ui-form-text-color);
+            background: var(--red-ui-list-item-background-hover);
+            border-left-color:var(--red-ui-list-item-background-hover);
+            border-right-color:var(--red-ui-list-item-background-hover);
         }
     }
     .red-ui-projects-dialog-project-list-entry-icon {
         i {
-            color: $tertiary-text-color;
+            color: var(--red-ui-tertiary-text-color);
             font-size: 2em;
 
         }
     }
     &.selected {
-        color: $form-text-color;
-        background: $list-item-background-selected;
-        border-left-color:$list-item-border-selected;
-        border-right-color:$list-item-border-selected;
+        color: var(--red-ui-form-text-color);
+        background: var(--red-ui-list-item-background-selected);
+        border-left-color:var(--red-ui-list-item-border-selected);
+        border-right-color:var(--red-ui-list-item-border-selected);
     }
     span {
         display: inline-block;
@@ -249,7 +249,7 @@
         float: right;
         margin-right: 20px;
         font-size: 0.9em;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         padding-top: 4px;
     }
     .red-ui-projects-dialog-project-list-entry-tools {
@@ -257,7 +257,7 @@
         top: 16px;
         right: 30px;
         display: none;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
     }
     &:hover {
         .red-ui-projects-dialog-project-list-entry-tools {
@@ -274,7 +274,7 @@
     width: 1000px;
     overflow: hidden;
     padding: 5px 20px;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     transition: left 0.4s;
     white-space: nowrap;
     > span {
@@ -289,7 +289,7 @@
     position: relative;
 }
 .red-ui-projects-dialog-screen-create-type.red-ui-button.toggle.selected:not(.disabled):not(:disabled) {
-    color: $secondary-text-color-active !important;
+    color: var(--red-ui-secondary-text-color-active) !important;
 }
 .red-ui-projects-dialog-screen-input-status {
     text-align: right;
@@ -298,7 +298,7 @@
     right: 8px;
     width: 70px;
     height: 30px;
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
 }
 
 .red-ui-sidebar-vc {
@@ -338,17 +338,17 @@
     }
     .red-ui-palette-module-unused {
         & > * {
-            color: $secondary-text-color;
+            color: var(--red-ui-secondary-text-color);
         }
     }
     .red-ui-palette-module-unknown {
-        border: 1px dashed $secondary-border-color;
-        background: $secondary-background-inactive;
+        border: 1px dashed var(--red-ui-secondary-border-color);
+        background: var(--red-ui-secondary-background-inactive);
     }
     .red-ui-palette-module-not-installed {
-        border: 1px dashed $text-color-warning;
+        border: 1px dashed var(--red-ui-text-color-warning);
         i.fa-warning {
-            color: $text-color-warning;
+            color: var(--red-ui-text-color-warning);
         }
     }
 }
@@ -365,11 +365,11 @@
 }
 .red-ui-sidebar-vc {
     .red-ui-editableList-container {
-        background: $tertiary-background;
+        background: var(--red-ui-tertiary-background);
         padding: 0;
         li {
             padding:0;
-            background: $secondary-background;
+            background: var(--red-ui-secondary-background);
         }
     }
     .red-ui-editableList-border {
@@ -384,7 +384,7 @@
     box-sizing: border-box;
     transition: height 0.2s ease-in-out;
     &:first-child {
-        // border-bottom: 1px solid $primary-border-color;
+        // border-bottom: 1px solid var(--red-ui-primary-border-color);
     }
 }
 .red-ui-sidebar-vc-merging {
@@ -399,7 +399,7 @@
     right:0;
     height:0;
     transition: height 0.2s ease-in-out;
-    background: $tertiary-background;
+    background: var(--red-ui-tertiary-background);
     box-sizing: border-box;
     overflow: hidden;
     &.red-ui-sidebar-vc-slide-box-top {
@@ -408,20 +408,20 @@
         left: auto;
         width: 100%;
         max-width: 280px;
-        border-left: 1px solid $primary-border-color;
-        border-right: 1px solid $primary-border-color;
-        border-bottom: 1px solid $primary-border-color;
-        box-shadow: 1px 1px 4px $shadow;
+        border-left: 1px solid var(--red-ui-primary-border-color);
+        border-right: 1px solid var(--red-ui-primary-border-color);
+        border-bottom: 1px solid var(--red-ui-primary-border-color);
+        box-shadow: 1px 1px 4px var(--red-ui-shadow);
 
-        color: $primary-text-color;
-        background: $tertiary-background;
+        color: var(--red-ui-primary-text-color);
+        background: var(--red-ui-tertiary-background);
         padding: 10px;
         box-sizing: border-box;
 
     }
     &.red-ui-sidebar-vc-slide-box-bottom {
         bottom: 0px;
-        border-top: 1px solid $secondary-border-color;
+        border-top: 1px solid var(--red-ui-secondary-border-color);
     }
 
     textarea {
@@ -437,15 +437,15 @@
 .red-ui-projects-branch-list {
     position: relative;
     .red-ui-searchBox-container {
-        border-top: 1px solid $secondary-border-color;
-        border-left: 1px solid $secondary-border-color;
-        border-right: 1px solid $secondary-border-color;
+        border-top: 1px solid var(--red-ui-secondary-border-color);
+        border-left: 1px solid var(--red-ui-secondary-border-color);
+        border-right: 1px solid var(--red-ui-secondary-border-color);
         border-top-left-radius: 2px;
         border-top-right-radius: 2px;
         overflow: hidden;
     }
     .red-ui-editableList {
-        border: 1px solid $secondary-border-color;
+        border: 1px solid var(--red-ui-secondary-border-color);
         border-bottom-left-radius: 2px;
         border-bottom-right-radius: 2px;
         & > .red-ui-editableList-border {
@@ -456,7 +456,7 @@
             padding: 0;
             li {
                 padding: 0;
-                background: $secondary-background;
+                background: var(--red-ui-secondary-background);
             }
         }
     }
@@ -483,23 +483,23 @@
 .red-ui-sidebar-vc-branch-list-entry {
     padding: 5px 8px;
     margin: 0 1px;
-    color: $list-item-color;
-    background: $list-item-background;
-    border-left: 2px solid $list-item-background;
-    border-right: 2px solid $list-item-background;
+    color: var(--red-ui-list-item-color);
+    background: var(--red-ui-list-item-background);
+    border-left: 2px solid var(--red-ui-list-item-background);
+    border-right: 2px solid var(--red-ui-list-item-background);
     cursor: pointer;
     &.selected {
-        border-left-color:$list-item-border-selected;
-        border-right-color:$list-item-border-selected;
+        border-left-color:var(--red-ui-list-item-border-selected);
+        border-right-color:var(--red-ui-list-item-border-selected);
     }
     i { width: 16px; text-align: center}
     &.input-error {
         cursor: default;
     }
     &:not(.input-error):hover {
-        background: $list-item-background-hover;
-        border-left-color:$list-item-border-selected;
-        border-right-color:$list-item-border-selected;
+        background: var(--red-ui-list-item-background-hover);
+        border-left-color:var(--red-ui-list-item-border-selected);
+        border-right-color:var(--red-ui-list-item-border-selected);
     }
     span {
         margin-left: 5px;
@@ -507,7 +507,7 @@
     span.current {
         float: right;
         font-size: 0.8em;
-        color: $tertiary-text-color;
+        color: var(--red-ui-tertiary-text-color);
     }
 }
 
@@ -542,7 +542,7 @@
     }
     &.red-ui-help-info-node {
         text-align: center;
-        background: $list-item-background;
+        background: var(--red-ui-list-item-background);
         white-space: normal;
         height: auto;
     }
@@ -556,63 +556,63 @@
     overflow: hidden;
     cursor: pointer;
     &:hover {
-        background: $secondary-background-hover;
+        background: var(--red-ui-secondary-background-hover);
     }
 }
 .red-ui-sidebar-vc-commit-more {
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     text-align: center;
     padding: 10px;
     font-style: italic;
 }
 .red-ui-sidebar-vc-commit-sha {
     float: right;
-    font-family: $monospace-font;
-    color: $vcCommitShaColor;
+    font-family: var(--red-ui-monospace-font);
+    color: var(--red-ui-vcCommitShaColor);
     display: inline-block;
     font-size: 0.85em;
     margin-left: 5px;
 }
 .red-ui-sidebar-vc-commit-subject {
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
 }
 .red-ui-sidebar-vc-commit-refs {
     min-height: 22px;
 }
 .red-ui-sidebar-vc-commit-ref {
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
     font-size: 0.7em;
-    border: 1px solid $tertiary-border-color;
+    border: 1px solid var(--red-ui-tertiary-border-color);
     border-radius: 10px;
     padding: 2px 5px;
     margin-right: 5px;
 }
 .red-ui-sidebar-vc-commit-date {
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     font-size: 0.85em;
 }
 .red-ui-sidebar-vc-commit-user {
     float: right;
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     font-size: 0.85em;
 }
 .red-ui-sidebar-vc-commit-head {
 }
 .red-ui-sidebar-vc-change-header {
-    color: $primary-text-color;
-    background: $tertiary-background;
+    color: var(--red-ui-primary-text-color);
+    background: var(--red-ui-tertiary-background);
     padding: 4px 10px;
     height: 30px;
     box-sizing: border-box;
-    border-top: 1px solid $secondary-border-color;
-    border-bottom: 1px solid $secondary-border-color;
+    border-top: 1px solid var(--red-ui-secondary-border-color);
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
     i {
         transition: all 0.2s ease-in-out;
     }
 }
 .red-ui-sidebar-vc-repo-toolbar {
-    color: $primary-text-color;
-    background: $tertiary-background;
+    color: var(--red-ui-primary-text-color);
+    background: var(--red-ui-tertiary-background);
     padding: 10px;
     box-sizing: border-box;
 }
@@ -637,7 +637,7 @@
 .red-ui-projects-file-listing-container > .red-ui-editableList > .red-ui-editableList-border {
     border-radius: 0;
     border: none;
-    border-top: 1px solid $secondary-border-color;
+    border-top: 1px solid var(--red-ui-secondary-border-color);
 
 }
 .red-ui-editableList-container .red-ui-projects-dialog-file-list {
@@ -654,39 +654,39 @@
 }
 .red-ui-projects-dialog-file-list-entry {
     padding: 3px 0;
-    border-left: 2px solid $list-item-background;
-    border-right: 2px solid $list-item-background;
-    background: $list-item-background;
+    border-left: 2px solid var(--red-ui-list-item-background);
+    border-right: 2px solid var(--red-ui-list-item-background);
+    background: var(--red-ui-list-item-background);
 
     &.projects-list-entry-current {
         &:not(.selectable) {
-            background: $list-item-background-selected;
+            background: var(--red-ui-list-item-background-selected);
         }
         i {
-            color: $secondary-text-color-selected;
+            color: var(--red-ui-secondary-text-color-selected);
         }
     }
     &.selectable {
         cursor: pointer;
         &:hover {
-            background: $list-item-background-hover;
-            border-left-color:$list-item-border-selected;
-            border-right-color:$list-item-border-selected;
+            background: var(--red-ui-list-item-background-hover);
+            border-left-color:var(--red-ui-list-item-border-selected);
+            border-right-color:var(--red-ui-list-item-border-selected);
         }
     }
     &.unselectable {
-        color: $secondary-text-color-disabled;
+        color: var(--red-ui-secondary-text-color-disabled);
     }
 
     i {
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         width: 16px;
         text-align: center;
     }
     &.selected {
-        background: $list-item-background-selected;
-        border-left-color:$list-item-border-selected;
-        border-right-color:$list-item-border-selected;
+        background: var(--red-ui-list-item-background-selected);
+        border-left-color:var(--red-ui-list-item-border-selected);
+        border-right-color:var(--red-ui-list-item-border-selected);
     }
     span {
         display: inline-block;
@@ -696,7 +696,7 @@
          margin: 0 10px 0 0px;
 
          .fa-angle-right {
-             color: $primary-text-color;
+             color: var(--red-ui-primary-text-color);
              transition: all 0.2s ease-in-out;
 
          }
@@ -747,7 +747,7 @@ div.red-ui-projects-dialog-ssh-public-key {
         padding: 10px 5px;
         cursor: pointer;
         &:hover {
-            background: $list-item-background-hover;
+            background: var(--red-ui-list-item-background-hover);
         }
     }
 }
@@ -756,7 +756,7 @@ div.red-ui-projects-dialog-ssh-public-key {
     position: relative;
     .red-ui-editableList-container {
         padding: 1px;
-        background: $tertiary-background;
+        background: var(--red-ui-tertiary-background);
         li:last-child {
             border-bottom: none;
         }
@@ -775,7 +775,7 @@ div.red-ui-projects-dialog-ssh-public-key {
         text-align: center;
         min-width: 30px;
         vertical-align: top;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
     }
     .entry-name {
         min-width: 250px;
@@ -784,7 +784,7 @@ div.red-ui-projects-dialog-ssh-public-key {
         font-weight: bold;
     }
     .entry-detail {
-        color: $tertiary-text-color;
+        color: var(--red-ui-tertiary-text-color);
         font-size: 0.9em;
     }
 
@@ -802,9 +802,9 @@ div.red-ui-projects-dialog-ssh-public-key {
     position: relative;
     margin-top: 10px;
     margin-bottom: 20px;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     border-radius: 4px;
-    border: 1px solid $secondary-border-color;
+    border: 1px solid var(--red-ui-secondary-border-color);
     .red-ui-projects-edit-form-sublabel {
         margin-top: -8px !important;
         margin-right: 50px;
@@ -819,7 +819,7 @@ div.red-ui-projects-dialog-ssh-public-key {
 
     .red-ui-projects-dialog-list-dialog-header {
         font-weight: bold;
-        background: $primary-background;
+        background: var(--red-ui-primary-background);
         margin-top: 0 !important;
         padding: 5px 10px;
         margin-bottom: 10px;
@@ -830,5 +830,5 @@ div.red-ui-projects-dialog-ssh-public-key {
     padding: 8px 20px 20px;
 }
 .red-ui-settings-section-description {
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/radialMenu.scss b/packages/node_modules/@node-red/editor-client/src/sass/radialMenu.scss
index deeabc4fc..3348e945a 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/radialMenu.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/radialMenu.scss
@@ -15,8 +15,8 @@
 **/
 
 .red-ui-editor-radial-menu {
-    font-size: $primary-font-size;
-    font-family: $primary-font;
+    font-size: var(--red-ui-primary-font-size);
+    font-family: var(--red-ui-primary-font);
     position: absolute;
     top: 0;
     left:0;
@@ -29,8 +29,8 @@
         border-radius: 80px;
         width: 160px;
         height: 160px;
-        background: $shadow;
-        border: 1px solid $primary-border-color;
+        background: var(--red-ui-shadow);
+        border: 1px solid var(--red-ui-primary-border-color);
     }
 }
 
@@ -39,20 +39,20 @@
     border-radius: 20px;
     width: 50px;
     height: 50px;
-    background: $secondary-background;
-    border: 2px solid $primary-border-color;
+    background: var(--red-ui-secondary-background);
+    border: 2px solid var(--red-ui-primary-border-color);
     text-align: center;
     line-height:50px;
 
     &.selected {
-        background: $workspace-button-background-hover;
+        background: var(--red-ui-workspace-button-background-hover);
     }
 }
 
 .red-ui-editor-radial-menu-opt-disabled {
-    border-color: $tertiary-border-color;
-    color: $tertiary-border-color;
+    border-color: var(--red-ui-tertiary-border-color);
+    color: var(--red-ui-tertiary-border-color);
 }
 .red-ui-editor-radial-menu-opt-active {
-    background: $secondary-background-hover;
+    background: var(--red-ui-secondary-background-hover);
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/search.scss b/packages/node_modules/@node-red/editor-client/src/sass/search.scss
index cce1e69e4..ed4eee8cb 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/search.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/search.scss
@@ -22,9 +22,9 @@
     left: 50%;
     margin-left: -250px;
     top: 0px;
-    border: 1px solid $primary-border-color;
-    box-shadow: 0 0 10px $shadow;
-    background: $secondary-background;
+    border: 1px solid var(--red-ui-primary-border-color);
+    box-shadow: 0 0 10px var(--red-ui-shadow);
+    background: var(--red-ui-secondary-background);
 
     .red-ui-searchBox-container {
         display: inline-block;
@@ -47,7 +47,7 @@
     .red-ui-search-container {
         border-top-left-radius: 5px;
         border-top-right-radius: 5px;
-        border: 1px dashed $primary-border-color;
+        border: 1px dashed var(--red-ui-primary-border-color);
         border-bottom: none;
         padding: 0;
         width: 100%;
@@ -56,8 +56,8 @@
         display: none;
         height: 150px;
         .red-ui-editableList-container {
-            border: 1px dashed $primary-border-color;
-            border-top: 1px solid $secondary-border-color;
+            border: 1px dashed var(--red-ui-primary-border-color);
+            border-top: 1px solid var(--red-ui-secondary-border-color);
         }
     }
     .red-ui-search-result {
@@ -73,7 +73,7 @@
         }
     }
     .red-ui-search-result-separator {
-        border-bottom: 3px solid $secondary-border-color;
+        border-bottom: 3px solid var(--red-ui-secondary-border-color);
     }
     .red-ui-search-result-node {
         position: relative;
@@ -89,7 +89,7 @@
         height: 7px;
         top:4px;
         left:-4px;
-        background: $node-port-background;
+        background: var(--red-ui-node-port-background);
         box-sizing: border-box;
     }
     .red-ui-search-result-node-output{
@@ -107,26 +107,26 @@
         margin-left:8px;
     }
     .red-ui-search-result-node-label {
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
     }
 }
 
 .red-ui-search-container {
     padding: 3px;
-    background: $form-input-background;
-    border-bottom: 1px solid $secondary-border-color;
+    background: var(--red-ui-form-input-background);
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
 }
 .red-ui-search-results-container {
     position:relative;
     height: 300px;
     padding: 5px;
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
     .red-ui-search-results-list {
 
     }
     .red-ui-editableList-container {
         padding: 0;
-        background: $primary-background;
+        background: var(--red-ui-primary-background);
         li {
             padding: 0;
         }
@@ -137,21 +137,21 @@
     display: flex;
     align-items: start;
     cursor: pointer;
-    color: $list-item-color;
-    background: $list-item-background;
-    border-left: 3px solid $list-item-background;
-    border-right: 3px solid $list-item-background;
+    color: var(--red-ui-list-item-color);
+    background: var(--red-ui-list-item-background);
+    border-left: 3px solid var(--red-ui-list-item-background);
+    border-right: 3px solid var(--red-ui-list-item-background);
     li.selected & {
-        background: $list-item-background-selected;
-        border-left-color: $list-item-border-selected;
-        border-right-color: $list-item-border-selected;
+        background: var(--red-ui-list-item-background-selected);
+        border-left-color: var(--red-ui-list-item-border-selected);
+        border-right-color: var(--red-ui-list-item-border-selected);
     }
     &:hover {
         text-decoration: none;
-        color: $form-text-color;
-        background: $list-item-background-hover;
-        border-left-color:$list-item-background-hover;
-        border-right-color:$list-item-background-hover;
+        color: var(--red-ui-form-text-color);
+        background: var(--red-ui-list-item-background-hover);
+        border-left-color:var(--red-ui-list-item-background-hover);
+        border-right-color:var(--red-ui-list-item-background-hover);
     }
     &:after {
         content: "";
@@ -165,7 +165,7 @@
     float:left;
     height: 25px;
     border-radius: 3px;
-    border: 1px solid $node-border;
+    border: 1px solid var(--red-ui-node-border);
     background-position: 5% 50%;
     background-repeat: no-repeat;
     background-size: contain;
@@ -182,28 +182,28 @@
     flex-grow: 1;
 }
 .red-ui-search-result-node-label {
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
 }
 .red-ui-search-result-node-type {
     font-style: italic;
     font-size: 0.9em;
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
 }
 .red-ui-search-result-node-flow {
     float:right;
     font-size: 0.8em;
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
 }
 .red-ui-search-result-node-id {
     display:none;
     font-size: 0.8em;
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
 }
 .red-ui-search-empty {
     padding: 10px;
     text-align: center;
     font-style: italic;
-    color: $form-placeholder-color;
+    color: var(--red-ui-form-placeholder-color);
 }
 .red-ui-search-history {
     button {
@@ -229,12 +229,12 @@
 }
 
 .red-ui-search-result-action {
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
 }
 .red-ui-search-result-action-key {
     position: absolute;
     top: 9px;
     right: 0;
     margin-right: 10px;
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss
index 18b186bad..21a57d29d 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss
@@ -20,7 +20,7 @@
     right: 0px;
     bottom: 0px;
     width: 315px;
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
     box-sizing: border-box;
     z-index: 10;
     @include component-border;
@@ -32,7 +32,7 @@
 
 #red-ui-sidebar-content {
     position: absolute;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     top: 35px;
     right: 0;
     bottom: 25px;
@@ -47,7 +47,7 @@
     bottom:10px;
     width: 7px;
     // z-index: 11;
-    background-color: $primary-background;
+    background-color: var(--red-ui-primary-background);
     cursor: col-resize;
 
     &:before {
@@ -63,7 +63,7 @@
         mask-position: 50% 50%;
         -webkit-mask-repeat: no-repeat;
         mask-repeat: no-repeat;
-        background-color: $grip-color;
+        background-color: var(--red-ui-grip-color);
     }
 }
 
@@ -82,11 +82,11 @@
 
 .sidebar-header, /* Deprecated -> red-ui-sidebar-header */
 .red-ui-sidebar-header {
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
     text-align: right;
     padding: 8px 10px;
-    background: $primary-background;
-    border-bottom: 1px solid $secondary-border-color;
+    background: var(--red-ui-primary-background);
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
     white-space: nowrap;
 }
 
@@ -138,9 +138,9 @@ button.red-ui-sidebar-header-button-toggle {
     top: calc(50% - 26px);
 
     padding:15px 8px;
-    border:1px solid $primary-border-color;
-    background:$primary-background;
-    color: $secondary-text-color;
+    border:1px solid var(--red-ui-primary-border-color);
+    background:var(--red-ui-primary-background);
+    color: var(--red-ui-secondary-text-color);
     text-align: center;
     cursor: pointer;
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/style-custom-theme.scss b/packages/node_modules/@node-red/editor-client/src/sass/style-custom-theme.scss
new file mode 100644
index 000000000..1202d9fb7
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/sass/style-custom-theme.scss
@@ -0,0 +1,18 @@
+/**
+* Copyright JS Foundation and other contributors, http://js.foundation
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+**/
+
+@import "colors";
+@import "variables";
\ No newline at end of file
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss
index 5c8d0ba94..c8e44e26e 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss
@@ -16,7 +16,7 @@
 
 .red-ui-sidebar-node-config {
     position: relative;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     height: 100%;
     overflow-y:auto;
     @include disable-selection;
@@ -40,11 +40,11 @@ ul.red-ui-sidebar-node-config-list {
 
         &.selected {
             border-color: transparent;
-            box-shadow: 0 0 0 2px $node-selected-color;
+            box-shadow: 0 0 0 2px var(--red-ui-node-selected-color);
         }
         &.highlighted {
             border-color: transparent;
-            outline: dashed $node-selected-color 4px;
+            outline: dashed var(--red-ui-node-selected-color 4px);
         }
     }
     .red-ui-palette-label {
@@ -58,7 +58,7 @@ ul.red-ui-sidebar-node-config-list {
     .red-ui-palette-icon-container {
         font-size: 12px;
         line-height: 30px;
-        background-color: $node-icon-background-color;
+        background-color: var(--red-ui-node-icon-background-color);
         border-top-right-radius: 4px;
         border-bottom-right-radius: 4px;
         a {
@@ -67,10 +67,10 @@ ul.red-ui-sidebar-node-config-list {
             bottom: 0;
             left: 0;
             right: 0;
-            color: $node-port-label-color;
+            color: var(--red-ui-node-port-label-color);
             &:hover {
                 text-decoration: none;
-                background: $node-port-background-hover;
+                background: var(--red-ui-node-port-background-hover);
             }
         }
     }
@@ -78,12 +78,12 @@ ul.red-ui-sidebar-node-config-list {
 .red-ui-palette-node-config {
     width: 160px;
     height: 30px;
-    background: $node-config-background;
-    color: $primary-text-color;
+    background: var(--red-ui-node-config-background);
+    color: var(--red-ui-primary-text-color);
     cursor: pointer;
 }
 ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type {
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     text-align: right;
     padding-right: 3px;
     &:not(:first-child) {
@@ -91,21 +91,21 @@ ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type {
     }
 }
 .red-ui-palette-node-config-none {
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
     text-align:right;
     padding-right: 3px;
 }
 .red-ui-palette-node-config-unused,.red-ui-palette-node-config-disabled {
-    border-color: $primary-border-color;
-    background: $secondary-background-inactive;
+    border-color: var(--red-ui-primary-border-color);
+    background: var(--red-ui-secondary-background-inactive);
     border-style: dashed;
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
 }
 .red-ui-palette-node-config-disabled {
     opacity: 0.6;
     font-style: italic;
     i {
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         margin-right: 5px;
     }
 }
@@ -116,8 +116,8 @@ ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type {
     height: 38px;
     line-height: 38px;
     padding: 0 8px;
-    background: $palette-header-background;
+    background: var(--red-ui-palette-header-background);
     font-size: 0.8em;
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     font-weight: normal;
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss
index b98d452c1..fc4c78afb 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss
@@ -63,12 +63,12 @@
 .red-ui-sidebar-context-updated {
     text-align: right;
     font-size: 11px;
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
     padding: 1px 3px;
 }
 .red-ui-sidebar-context-property-storename {
     display: block;
     font-size: 0.8em;
     font-style: italic;
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-help.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-help.scss
index fe4f9fb84..f82b97116 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tab-help.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-help.scss
@@ -2,7 +2,7 @@
     // height: calc(100% - 39px);
 }
 .red-ui-help-search {
-    border-bottom: 1px solid $secondary-border-color;
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
 }
 
 .red-ui-sidebar-help-toc {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
index 9c63f2119..57dc7d6e3 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
@@ -32,7 +32,7 @@
         display: inline-block;
         margin-left: 5px;
     }
-    border-bottom: 1px solid $secondary-border-color;
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
 }
 table.red-ui-info-table {
     font-size: 14px;
@@ -40,8 +40,8 @@ table.red-ui-info-table {
     width: 100%;
 }
 table.red-ui-info-table tr:not(.blank) {
-    border-top: 1px solid $secondary-border-color;
-    border-bottom: 1px solid $secondary-border-color;
+    border-top: 1px solid var(--red-ui-secondary-border-color);
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
 }
 .red-ui-help-property-expand  {
     font-size: 0.8em;
@@ -57,7 +57,7 @@ table.red-ui-info-table tr.blank {
     th {
         text-align: left;
         font-weight: 500;
-        color: $primary-text-color;
+        color: var(--red-ui-primary-text-color);
         padding: 6px 3px 3px;
     }
     >* {
@@ -69,9 +69,9 @@ table.red-ui-info-table tr.blank {
 
     a {
         display: block;
-        color: $primary-text-color;
+        color: var(--red-ui-primary-text-color);
         &:hover,&:focus {
-            color: $primary-text-color;
+            color: var(--red-ui-primary-text-color);
             text-decoration: none;
         }
         &:not(.expanded) {
@@ -103,36 +103,36 @@ table.red-ui-info-table tr.blank {
 }
 .red-ui-help-info-none {
     font-style: italic;
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
 }
 table.red-ui-info-table tr:not(.blank) td:first-child{
-    color: $header-text-color;
+    color: var(--red-ui-header-text-color);
     vertical-align: top;
     width: 90px;
     padding: 3px 3px 3px 6px;
-    background:$tertiary-background;
-    border-right: 1px solid $secondary-border-color;
+    background:var(--red-ui-tertiary-background);
+    border-right: 1px solid var(--red-ui-secondary-border-color);
 }
 table.red-ui-info-table tr:not(.blank) td:last-child{
     padding: 3px 3px 3px 6px;
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
     overflow-y: hidden;
 }
 div.red-ui-info-table {
     margin: 5px;
 }
 .red-ui-help {
-    font-size: $primary-font-size;
+    font-size: var(--red-ui-primary-font-size);
     line-height: 1.5em;
 
     a {
-        color: $text-color-link;
+        color: var(--red-ui-text-color-link);
         text-decoration: none;
     }
 
     a:hover,
     a:focus {
-        color: $text-color-link;
+        color: var(--red-ui-text-color-link);
         text-decoration: underline;
     }
 
@@ -143,7 +143,7 @@ div.red-ui-info-table {
         line-height: 1.3em;
         margin: 8px auto;
         &.red-ui-help-title {
-            border-bottom: 1px solid $tertiary-border-color;
+            border-bottom: 1px solid var(--red-ui-tertiary-border-color);
         }
     }
     h2 {
@@ -168,24 +168,24 @@ div.red-ui-info-table {
     & > span > p:first-child {
     }
     dl.message-properties {
-        border: 1px solid $secondary-border-color;
+        border: 1px solid var(--red-ui-secondary-border-color);
         border-radius: 2px;
 
         margin: 5px auto 10px;
         &>dt {
             padding: 0px 3px 2px 3px;
-            font-family: $monospace-font;
+            font-family: var(--red-ui-monospace-font);
             font-weight: normal;
             margin: 5px 3px 1px;
-            color: $text-color-code;
+            color: var(--red-ui-text-color-code);
             white-space: nowrap;
             &.optional {
                 font-style: italic;
 
             }
             .property-type {
-                font-family: $primary-font;
-                color: $primary-text-color;
+                font-family: var(--red-ui-primary-font);
+                color: var(--red-ui-primary-text-color);
                 font-style: italic;
                 font-size: 11px;
                 float: right;
@@ -204,7 +204,7 @@ div.red-ui-info-table {
     ol.node-ports {
         margin: 0;
         li {
-            border: 1px solid $secondary-border-color;
+            border: 1px solid var(--red-ui-secondary-border-color);
             border-radius: 2px;
             list-style-position: inside;
             padding: 3px;
@@ -224,7 +224,7 @@ div.red-ui-info-table {
             transition: transform 0.2s ease-in-out;
             margin-right: 4px;
         }
-        color: $header-text-color;
+        color: var(--red-ui-header-text-color);
         &:hover, &:focus {
             text-decoration: none;
         }
@@ -242,7 +242,7 @@ div.red-ui-info-table {
         overflow       : hidden;
     }
     table thead tr {
-        background-color: var(--red-ui-primary-background); //$primary-text-color;
+        background-color: var(--red-ui-primary-background); //var(--red-ui-primary-text-color);
         border-bottom: 1px solid var(--red-ui-secondary-border-color);
         color: var(--red-ui-header-text-color);
         text-align: left;
@@ -252,7 +252,7 @@ div.red-ui-info-table {
         padding: 6px 8px;
     }
     table tbody tr:nth-of-type(even) {
-        background-color: var(--red-ui-tertiary-background); //$primary-background;
+        background-color: var(--red-ui-tertiary-background); //var(--red-ui-primary-background);
     }
 }
 .red-ui-sidebar-info-stack {
@@ -273,10 +273,10 @@ div.red-ui-info-table {
     height: 0;
     transition: height 0.2s, padding 0.2s;
     box-sizing: border-box;
-    border-top: 1px solid $secondary-border-color;
-    background-color: $secondary-background;
+    border-top: 1px solid var(--red-ui-secondary-border-color);
+    background-color: var(--red-ui-secondary-background);
     padding: 0;
-    box-shadow: 0 5px 20px 0px $shadow;
+    box-shadow: 0 5px 20px 0px var(--red-ui-shadow);
     overflow-y: auto;
 }
 .red-ui-sidebar-info.show-tips {
@@ -305,7 +305,7 @@ div.red-ui-info-table {
     font-size: 16px;
     text-align: center;
     line-height: 1.9em;
-    color : $tertiary-text-color;
+    color : var(--red-ui-tertiary-text-color);
     @include disable-selection;
     cursor: default;
 }
@@ -314,14 +314,14 @@ div.red-ui-info-table {
     top: 4px;
     right: 6px;
     a {
-        color: $secondary-text-color;
-        border-color: $secondary-border-color !important;
+        color: var(--red-ui-secondary-text-color);
+        border-color: var(--red-ui-secondary-border-color) !important;
         margin-left: 4px;
     }
 }
 
 .node-info-property-config-node {
-    border: 1px solid $secondary-border-color;
+    border: 1px solid var(--red-ui-secondary-border-color);
     border-radius: 4px;
     padding: 2px 4px 2px;
 }
@@ -346,7 +346,7 @@ div.red-ui-info-table {
     }
 
     .red-ui-info-outline-project {
-        border-bottom: 1px solid $secondary-border-color;
+        border-bottom: 1px solid var(--red-ui-secondary-border-color);
     }
 }
 .red-ui-info-outline,
@@ -380,13 +380,13 @@ div.red-ui-info-table {
                 background: none;
             }
             .red-ui-palette-icon-fa {
-                color: $secondary-text-color;
+                color: var(--red-ui-secondary-text-color);
                 font-size: 18px;
             }
         }
         &.red-ui-info-outline-item-empty {
             font-style: italic;
-            color: $form-placeholder-color;
+            color: var(--red-ui-form-placeholder-color);
         }
     }
 
@@ -414,7 +414,7 @@ div.red-ui-info-table {
         white-space: nowrap;
     }
     .red-ui-search-result-node-label {
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
     }
 }
 
@@ -439,16 +439,16 @@ div.red-ui-info-table {
     right: 1px;
     padding: 1px 2px 0 1px;
     text-align: right;
-    background: $list-item-background;
+    background: var(--red-ui-list-item-background);
 
     .red-ui-treeList-label:hover & {
-        background: $list-item-background-hover;
+        background: var(--red-ui-list-item-background-hover);
     }
     .red-ui-treeList-label.focus & {
-        background: $list-item-background-hover;
+        background: var(--red-ui-list-item-background-hover);
     }
     .red-ui-treeList-label.selected & {
-        background: $list-item-background-selected;
+        background: var(--red-ui-list-item-background-selected);
     }
 
 
@@ -510,7 +510,7 @@ div.red-ui-info-table {
     }
     .red-ui-info-outline-item-label {
         font-style: italic;
-        color: $secondary-text-color-disabled;
+        color: var(--red-ui-secondary-text-color-disabled);
     }
     .red-ui-icons-flow {
         opacity: 0.4;
@@ -538,7 +538,7 @@ div.red-ui-info-table {
     -webkit-mask-size: contain;
     mask-repeat: no-repeat;
     -webkit-mask-repeat: no-repeat;
-    background-color: $icons-flow-color;
+    background-color: var(--red-ui-icons-flow-color);
     // filter: brightness(2.5);
 }
 
@@ -549,8 +549,8 @@ div.red-ui-info-table {
     text-align: left;
     // padding-left: 9px;
     // box-sizing: border-box;
-    // background: $palette-header-background;
-    // border-bottom: 1px solid $secondary-border-color;
+    // background: var(--red-ui-palette-header-background);
+    // border-bottom: 1px solid var(--red-ui-secondary-border-color);
 
     .red-ui-searchBox-container {
         position: absolute;
@@ -558,7 +558,7 @@ div.red-ui-info-table {
         right: 8px;
         width: calc(100% - 130px);
         max-width: 250px;
-        background: $palette-header-background;
+        background: var(--red-ui-palette-header-background);
     }
 
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
index a5d3003ae..595423888 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
@@ -16,7 +16,7 @@
 
 .red-ui-tabs {
     position: relative;
-    background: $tab-background;
+    background: var(--red-ui-tab-background);
     overflow: hidden;
     height: 35px;
     box-sizing: border-box;
@@ -39,18 +39,18 @@
         display: block;
         height: 35px;
         box-sizing:border-box;
-        border-bottom: 1px solid $primary-border-color;
+        border-bottom: 1px solid var(--red-ui-primary-border-color);
         white-space: nowrap;
         @include disable-selection;
 
         li {
             box-sizing: border-box;
             display: inline-block;
-            border-left: 1px solid  $primary-border-color;
-            border-top: 1px solid  $primary-border-color;
-            border-right: 1px solid $primary-border-color;
-            border-bottom: 1px solid $primary-border-color;
-            background: $tab-background-inactive;
+            border-left: 1px solid  var(--red-ui-primary-border-color);
+            border-top: 1px solid  var(--red-ui-primary-border-color);
+            border-right: 1px solid var(--red-ui-primary-border-color);
+            border-bottom: 1px solid var(--red-ui-primary-border-color);
+            background: var(--red-ui-tab-background-inactive);
             margin: 3px 3px 0 3px;
             height: 32px;
             line-height: 29px;
@@ -73,7 +73,7 @@
                 padding-left: 12px;
                 width: 100%;
                 height: 100%;
-                color: $tab-text-color-inactive;
+                color: var(--red-ui-tab-text-color-inactive);
             }
             a:hover {
                 text-decoration: none;
@@ -83,27 +83,27 @@
             }
 
             &:not(.active) a:hover+a.red-ui-tab-close {
-                background: $tab-background-hover;
+                background: var(--red-ui-tab-background-hover);
             }
             &.highlighted {
-                box-shadow: 0px 0px 4px 2px $node-selected-color;
-                border: dashed 1px $node-selected-color;
+                box-shadow: 0px 0px 4px 2px var(--red-ui-node-selected-color);
+                border: dashed 1px var(--red-ui-node-selected-color);
             }
             &.active {
-                background: $tab-background-active;
+                background: var(--red-ui-tab-background-active);
                 font-weight: bold;
-                border-bottom: 1px solid $tab-background-active;
+                border-bottom: 1px solid var(--red-ui-tab-background-active);
                 z-index: 2;
 
                 a {
-                    color: $tab-text-color-active;
+                    color: var(--red-ui-tab-text-color-active);
                 }
                 a.red-ui-tab-close {
-                    color: $workspace-button-color;
-                    background: $tab-background-active;
+                    color: var(--red-ui-workspace-button-color);
+                    background: var(--red-ui-tab-background-active);
                     &:hover {
-                        background: $workspace-button-background-hover !important;
-                        color: $workspace-button-color-hover;
+                        background: var(--red-ui-workspace-button-background-hover) !important;
+                        color: var(--red-ui-workspace-button-color-hover);
                     }
                 }
                 img.red-ui-tab-icon {
@@ -111,24 +111,24 @@
                 }
 
                 .red-ui-tabs-fade {
-                    background-image: linear-gradient(to right, change-color($tab-background-active, $alpha: 0.001), $tab-background-active);
+                    background-image: linear-gradient(to right, var(--red-ui-tab-background-active-alpha), var(--red-ui-tab-background-active));
                 }
 
             }
             &.selected {
                 &:not(.active) {
-                    background: $tab-background-selected;
+                    background: var(--red-ui-tab-background-selected);
                     .red-ui-tabs-fade {
-                        background-image: linear-gradient(to right, change-color($tab-background-selected, $alpha: 0.001), $tab-background-selected);
+                        background-image: linear-gradient(to right, var(--red-ui-tab-background-selected-alpha), var(--red-ui-tab-background-selected));
                     }
                     .red-ui-tabs-badge-selected {
-                        background: $tab-background-selected;
+                        background: var(--red-ui-tab-background-selected);
                     }
                 }
                 font-weight: bold;
                 .red-ui-tabs-badge-selected {
                     display: inline;
-                    background: $tab-background;
+                    background: var(--red-ui-tab-background);
                 }
                 .red-ui-tabs-badge-changed {
                     display: none;
@@ -136,10 +136,10 @@
 
             }
             &:not(.active) a:hover {
-                color: $workspace-button-color-hover;
-                background: $tab-background-hover;
+                color: var(--red-ui-workspace-button-color-hover);
+                background: var(--red-ui-tab-background-hover);
                 &+.red-ui-tabs-fade {
-                    background-image: linear-gradient(to right, change-color($tab-background-hover, $alpha: 0.001), $tab-background-hover);
+                    background-image: linear-gradient(to right, var(--red-ui-tab-background-hover-alpha), var(--red-ui-tab-background-hover));
                 }
             }
         }
@@ -182,9 +182,9 @@
     &.red-ui-tabs-vertical {
         box-sizing: border-box;
         height: 100%;
-        border-right: 1px solid $primary-border-color;
+        border-right: 1px solid var(--red-ui-primary-border-color);
         margin: 0;
-        background: $tertiary-background;
+        background: var(--red-ui-tertiary-background);
         overflow: visible;
 
         .red-ui-tabs-scroll-container {
@@ -203,13 +203,13 @@
                 display: block;
                 margin: 0;
                 border: none;
-                border-right: 1px solid $primary-border-color;
+                border-right: 1px solid var(--red-ui-primary-border-color);
                 height: auto;
                 &:not(:first-child) {
-                    border-top: 1px solid $secondary-border-color;
+                    border-top: 1px solid var(--red-ui-secondary-border-color);
                 }
                 &:last-child {
-                    border-bottom: 1px solid $secondary-border-color;
+                    border-bottom: 1px solid var(--red-ui-secondary-border-color);
                 }
 
                 a.red-ui-tab-label {
@@ -217,7 +217,7 @@
                 }
 
                 &.active {
-                    border-right: 1px solid $tab-background-active;
+                    border-right: 1px solid var(--red-ui-tab-background-active);
                 }
             }
         }
@@ -238,8 +238,8 @@
     top: 0;
     right: 0;
     height: 35px;
-    background: $tab-background;
-    border-bottom: 1px solid $primary-border-color;
+    background: var(--red-ui-tab-background);
+    border-bottom: 1px solid var(--red-ui-primary-border-color);
     z-index: 2;
 
     a {
@@ -261,8 +261,8 @@
     top: 0;
     right: 0;
     height: 35px;
-    background: $tab-background;
-    border-bottom: 1px solid $primary-border-color;
+    background: var(--red-ui-tab-background);
+    border-bottom: 1px solid var(--red-ui-primary-border-color);
     z-index: 2;
     a {
         @include workspace-button-toggle;
@@ -272,7 +272,7 @@
         margin: 4px 3px 3px;
         z-index: 2;
         &.red-ui-tab-link-button-menu {
-            border-color: $tab-background;
+            border-color: var(--red-ui-tab-background);
         }
         &:not(.single):not(.selected) {
             margin-top: 4px;
@@ -286,27 +286,27 @@
         height: 35px;
         width: 21px;
         display: block;
-        color: $workspace-button-color;
+        color: var(--red-ui-workspace-button-color);
         font-size: 22px;
         text-align: center;
         margin:0;
         border-left: none;
         border-right: none;
         border-top: none;
-        border-bottom: 1px solid $primary-border-color;
+        border-bottom: 1px solid var(--red-ui-primary-border-color);
         line-height: 34px;
     }
 }
 .red-ui-tab-scroll-left {
     left:0;
     a {
-        border-right: 1px solid $primary-border-color;
+        border-right: 1px solid var(--red-ui-primary-border-color);
     }
 }
 .red-ui-tab-scroll-right {
     right: 0px;
     a {
-        border-left: 1px solid $primary-border-color;
+        border-left: 1px solid var(--red-ui-primary-border-color);
     }
 
 }
@@ -341,7 +341,7 @@
     top: 0;
     right: 0;
     width: 15px;
-    background-image: linear-gradient(to right, change-color($tab-background-inactive, $alpha: 0.001), $tab-background-inactive);
+    background-image: linear-gradient(to right, var(--red-ui-tab-background-inactive-alpha), var(--red-ui-tab-background-inactive));
     pointer-events: none;
 }
 
@@ -365,7 +365,7 @@ i.red-ui-tab-icon {
         mask-position: center;
         -webkit-mask-repeat: no-repeat;
         mask-repeat: no-repeat;
-        background-color: $tab-icon-color;
+        background-color: var(--red-ui-tab-icon-color);
     }
 }
 .red-ui-tabs-badges {
@@ -379,7 +379,7 @@ i.red-ui-tab-icon {
     line-height: 28px;
     text-align: center;
     padding:0px;
-    color: $tab-badge-color;
+    color: var(--red-ui-tab-badge-color);
 }
 
 .red-ui-tabs-badges i {
@@ -415,7 +415,7 @@ i.red-ui-tab-icon {
 }
 .red-ui-tab-close {
     display: none;
-    background: $tab-background-inactive;
+    background: var(--red-ui-tab-background-inactive);
     opacity: 0.8;
     position: absolute;
     right: 0px;
@@ -425,10 +425,10 @@ i.red-ui-tab-icon {
     line-height: 28px;
     text-align: center;
     padding: 0px;
-    color: $workspace-button-color;
+    color: var(--red-ui-workspace-button-color);
     &:hover {
-        background: $workspace-button-background-hover !important;
-        color: $workspace-button-color-hover;
+        background: var(--red-ui-workspace-button-background-hover) !important;
+        color: var(--red-ui-workspace-button-color-hover);
         opacity: 1;
     }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tourGuide.scss b/packages/node_modules/@node-red/editor-client/src/sass/tourGuide.scss
index f8d175d44..a22c07f7f 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tourGuide.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tourGuide.scss
@@ -97,7 +97,7 @@
         color: var(--red-ui-primary-text-color) !important;
     }
     &:not(.primary):not(.disabled):not(.ui-button-disabled):hover {
-        border-color: $popover-button-border-color-hover;
+        border-color: var(--red-ui-popover-button-border-color-hover);
     }
 }
 
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/checkboxSet.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/checkboxSet.scss
index a606bba8c..47929378b 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/checkboxSet.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/checkboxSet.scss
@@ -16,7 +16,7 @@
 .red-ui-checkboxSet {
     width: 15px;
     display: inline-block;
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     cursor: pointer;
     input {
         display:none !important;
@@ -24,6 +24,6 @@
 
     &.disabled {
         pointer-events: none;
-        color: $secondary-text-color-disabled;
+        color: var(--red-ui-secondary-text-color-disabled);
     }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/editableList.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/editableList.scss
index a5873f684..00b79b54a 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/editableList.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/editableList.scss
@@ -14,10 +14,10 @@
  * limitations under the License.
  **/
 .red-ui-editableList-border {
-    border: 1px solid $form-input-border-color;
+    border: 1px solid var(--red-ui-form-input-border-color);
     border-radius: 4px;
     .red-ui-editableList-header {
-        border-bottom: 1px solid $form-input-border-color;
+        border-bottom: 1px solid var(--red-ui-form-input-border-color);
         padding: 2px 16px 2px 4px;
         font-size: 0.9em;
     }
@@ -32,22 +32,22 @@
         margin: 0;
     }
     .red-ui-editabelList-item-placeholder {
-        border: 2px dashed $secondary-border-color !important;
+        border: 2px dashed var(--red-ui-secondary-border-color) !important;
     }
     li {
         box-sizing: border-box;
         position: relative;
-        background: $secondary-background;
+        background: var(--red-ui-secondary-background);
         margin:0;
         padding:8px 0px;
-        border-bottom: 1px solid $secondary-border-color;
+        border-bottom: 1px solid var(--red-ui-secondary-border-color);
         min-height: 20px;
         .red-ui-editableList-item-handle {
             position: absolute;
             top: 50%;
             left: 2px;
             margin-top: -7px;
-            color: $tertiary-text-color;
+            color: var(--red-ui-tertiary-text-color);
             cursor: move;
         }
         .red-ui-editableList-item-remove {
@@ -57,7 +57,7 @@
             margin-top: -9px;
         }
         &.ui-sortable-helper {
-            border-top: 1px solid $secondary-border-color;
+            border-top: 1px solid var(--red-ui-secondary-border-color);
         }
         //.red-ui-editableList-item-content { outline: 1px solid red}
 
@@ -68,7 +68,7 @@
             margin-right: 28px;
         }
         &.red-ui-editableList-item-deleting {
-            background: $secondary-background-inactive;
+            background: var(--red-ui-secondary-background-inactive);
         }
     }
 
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/nodeList.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/nodeList.scss
index 01a7a4802..44745e87c 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/nodeList.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/nodeList.scss
@@ -21,9 +21,9 @@
             margin: 0;
             white-space: nowrap;
             border: none;
-            background: $secondary-background;
+            background: var(--red-ui-secondary-background);
             &:hover {
-                background: $secondary-background-hover;
+                background: var(--red-ui-secondary-background-hover);
             }
 
             i.fa-angle-right {
@@ -44,12 +44,12 @@
                 }
             }
             .red-ui-editableList-item-content.disabled {
-                color: $secondary-text-color-disabled;
+                color: var(--red-ui-secondary-text-color-disabled);
             }
             &.red-ui-editableList-section-header {
-                background: $primary-background;
+                background: var(--red-ui-primary-background);
                 .red-ui-editableList-item-content.disabled {
-                    color: $secondary-text-color-disabled;
+                    color: var(--red-ui-secondary-text-color-disabled);
                 }
             }
 
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss
index b925e5212..8788ed6a7 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss
@@ -21,7 +21,7 @@
         position: absolute;
         top: 9px;
         font-size: 10px;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
     }
     i.fa-search {
         pointer-events: none;
@@ -41,8 +41,8 @@
         margin: 0;
     }
     a.red-ui-searchBox-opts:hover {
-        color: $workspace-button-color-hover;
-        background: $workspace-button-background-hover;
+        color: var(--red-ui-workspace-button-color-hover);
+        background: var(--red-ui-workspace-button-background-hover);
     }
     input.red-ui-searchBox-input {
         border-radius: 0;
@@ -76,8 +76,8 @@
         position: absolute;
         right: 18px;
         top: 4px;
-        background: $primary-background;
-        color: $secondary-text-color;
+        background: var(--red-ui-primary-background);
+        color: var(--red-ui-secondary-text-color);
         padding: 1px 8px;
         font-size: 9px;
         border-radius: 4px;
@@ -97,12 +97,12 @@
 .red-ui-searchBox-compact {
 
     input:focus.red-ui-searchBox-input {
-        outline: 1px solid $form-input-focus-color;
+        outline: 1px solid var(--red-ui-form-input-focus-color);
     }
 
 
     input.red-ui-searchBox-input,input:focus.red-ui-searchBox-input {
-        border: 1px solid $secondary-border-color;
+        border: 1px solid var(--red-ui-secondary-border-color);
         border-radius: 3px;
         font-size: 12px;
         height: 26px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/stack.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/stack.scss
index a32bfad70..82d697b33 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/stack.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/stack.scss
@@ -15,9 +15,9 @@
  **/
 
 .red-ui-stack {
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     .red-ui-palette-category {
-        background: $secondary-background;
+        background: var(--red-ui-secondary-background);
 
         &:last-child {
             border-bottom: none;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss
index 5f1d27037..f076a533e 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss
@@ -24,9 +24,9 @@
     width: 100%;
     height: 100%;
     position: relative;
-    background: $tertiary-background;
+    background: var(--red-ui-tertiary-background);
 
-    border: 1px solid $form-input-border-color;
+    border: 1px solid var(--red-ui-form-input-border-color);
     border-radius: 4px;
 
     box-sizing: border-box;
@@ -71,7 +71,7 @@
     padding: 6px 0;
     display: flex;
     align-items: center;
-    color: $list-item-color;
+    color: var(--red-ui-list-item-color);
     text-decoration: none;
     cursor: pointer;
     vertical-align: middle;
@@ -79,26 +79,26 @@
     position: relative;
 
     &:hover, &:hover .red-ui-treeList-sublabel-text {
-        background: $list-item-background-hover;
-        color: $list-item-color;
+        background: var(--red-ui-list-item-background-hover);
+        color: var(--red-ui-list-item-color);
         text-decoration: none;
     }
     &:focus, &:focus .red-ui-treeList-sublabel-text {
-        background: $list-item-background-hover;
+        background: var(--red-ui-list-item-background-hover);
         outline: none;
-        color: $list-item-color;
+        color: var(--red-ui-list-item-color);
         text-decoration: none;
     }
     &.focus, &.focus .red-ui-treeList-sublabel-text {
-        background: $list-item-background-hover;
-        outline: 1px solid $form-input-focus-color !important;
+        background: var(--red-ui-list-item-background-hover);
+        outline: 1px solid var(--red-ui-form-input-focus-color) !important;
         outline-offset: -1px;
-        color: $list-item-color;
+        color: var(--red-ui-list-item-color);
     }
     &.selected, &.selected .red-ui-treeList-sublabel-text {
-        background: $list-item-background-selected;
+        background: var(--red-ui-list-item-background-selected);
         outline: none;
-        color: $list-item-color;
+        color: var(--red-ui-list-item-color);
     }
 
     input.red-ui-treeList-checkbox,
@@ -121,9 +121,9 @@
     padding: 0 10px 0 5px;
     line-height: 32px;
     font-size: 0.9em;
-    color: $list-item-secondary-color;
+    color: var(--red-ui-list-item-secondary-color);
     position: absolute;
-    background: $list-item-background;
+    background: var(--red-ui-list-item-background);
 }
 
 
@@ -143,5 +143,5 @@
     mask-position: 50% 50%;
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
-    background-color: $spinner-color;
+    background-color: var(--red-ui-spinner-color);
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss
index 76345e980..1a421fac5 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss
@@ -15,7 +15,7 @@
  **/
 
 .red-ui-typedInput-container {
-    border: 1px solid $form-input-border-color;
+    border: 1px solid var(--red-ui-form-input-border-color);
     border-radius: 5px;
     height: 34px;
     line-height: 14px;
@@ -28,7 +28,7 @@
     position: relative;
     &[disabled] {
         input, button {
-            background: $secondary-background-inactive;
+            background: var(--red-ui-secondary-background-inactive);
             pointer-events: none;
             cursor: not-allowed;
         }
@@ -50,7 +50,7 @@
     }
 
     &.red-ui-typedInput-focus:not(.input-error) {
-        border-color: $form-input-focus-color !important;
+        border-color: var(--red-ui-form-input-focus-color) !important;
     }
     .red-ui-typedInput-value-label {
         flex-grow: 1;
@@ -61,42 +61,42 @@
         overflow: hidden;
         text-overflow: ellipsis;
         .red-ui-typedInput-value-label-inactive {
-            background: $secondary-background-disabled;
-            color: $secondary-text-color-disabled;
+            background: var(--red-ui-secondary-background-disabled);
+            color: var(--red-ui-secondary-text-color-disabled);
         }
     }
 }
 .red-ui-typedInput-options {
     @include component-shadow;
-    font-family: $primary-font;
-    font-size: $primary-font-size;
+    font-family: var(--red-ui-primary-font);
+    font-size: var(--red-ui-primary-font-size);
 
     position: absolute;
     max-height: 350px;
     overflow-y: auto;
-    border: 1px solid $primary-border-color;
+    border: 1px solid var(--red-ui-primary-border-color);
     box-sizing: border-box;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     white-space: nowrap;
     z-index: 2000;
     a {
         padding: 6px 18px 6px 6px;
         display: flex;
         align-items: center;
-        border-bottom: 1px solid $secondary-border-color;
-        color: $form-text-color;
+        border-bottom: 1px solid var(--red-ui-secondary-border-color);
+        color: var(--red-ui-form-text-color);
         &:hover {
             text-decoration: none;
-            background: $workspace-button-background-hover;
+            background: var(--red-ui-workspace-button-background-hover);
         }
         &:focus {
             text-decoration: none;
-            background: $workspace-button-background-active;
+            background: var(--red-ui-workspace-button-background-active);
             outline: none;
         }
         &:active {
             text-decoration: none;
-            background: $workspace-button-background-active;
+            background: var(--red-ui-workspace-button-background-active);
         }
         input[type="checkbox"] {
             margin: 0 6px 0 0;
@@ -111,7 +111,7 @@
             mask-position: center;
             -webkit-mask-repeat: no-repeat;
             mask-repeat: no-repeat;
-            background-color: $primary-text-color;
+            background-color: var(--red-ui-primary-text-color);
             height: 14px;
             width: 12px;
         }
@@ -128,11 +128,11 @@ button.red-ui-typedInput-option-trigger
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
     padding: 0 1px 0 5px;
-    background: $form-button-background;
+    background: var(--red-ui-form-button-background);
     height: 32px;
     line-height: 30px;
     vertical-align: middle;
-    color: $form-text-color;
+    color: var(--red-ui-form-text-color);
     white-space: nowrap;
     i.red-ui-typedInput-icon {
         margin-left: 1px;
@@ -142,7 +142,7 @@ button.red-ui-typedInput-option-trigger
     &.disabled {
         cursor: default;
         > i.red-ui-typedInput-icon {
-            color: $secondary-text-color-disabled;
+            color: var(--red-ui-secondary-text-color-disabled);
         }
     }
     .red-ui-typedInput-type-label,.red-ui-typedInput-option-label {
@@ -161,21 +161,21 @@ button.red-ui-typedInput-option-trigger
             mask-position: center;
             -webkit-mask-repeat: no-repeat;
             mask-repeat: no-repeat;
-            background-color: $primary-text-color;
+            background-color: var(--red-ui-primary-text-color);
         }
     }
 
     &:not(.disabled):hover {
         text-decoration: none;
-        background: $workspace-button-background-hover;
+        background: var(--red-ui-workspace-button-background-hover);
     }
     &:focus {
         text-decoration: none;
         outline: none;
-        box-shadow: inset 0 0 0 1px $form-input-focus-color;
+        box-shadow: inset 0 0 0 1px var(--red-ui-form-input-focus-color);
     }
     &:not(.disabled):active {
-        background: $workspace-button-background-active;
+        background: var(--red-ui-workspace-button-background-active);
         text-decoration: none;
     }
     &.red-ui-typedInput-full-width {
@@ -208,8 +208,8 @@ button.red-ui-typedInput-option-trigger {
     line-height: 32px;
     display: inline-flex;
     .red-ui-typedInput-option-label {
-        background:$form-button-background;
-        color: $form-text-color;
+        background:var(--red-ui-form-button-background);
+        color: var(--red-ui-form-text-color);
         flex-grow: 1;
         padding: 0 0 0 8px;
         display:inline-block;
@@ -231,6 +231,6 @@ button.red-ui-typedInput-option-trigger {
         box-shadow: none;
     }
     &:focus .red-ui-typedInput-option-caret {
-        box-shadow: inset 0 0 0 1px $form-input-focus-color;
+        box-shadow: inset 0 0 0 1px var(--red-ui-form-input-focus-color);
     }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/userSettings.scss b/packages/node_modules/@node-red/editor-client/src/sass/userSettings.scss
index 5cf0570c2..36ab67e3f 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/userSettings.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/userSettings.scss
@@ -20,7 +20,7 @@
     left: 0;
     bottom: 0;
     width: 120px;
-    background: $tertiary-background;
+    background: var(--red-ui-tertiary-background);
 }
 .red-ui-settings-tabs-content {
     position: absolute;
@@ -30,7 +30,7 @@
     bottom: 0;
     padding: 0;
     h3:not(:first-child) {
-        border-top: 1px solid $secondary-border-color;
+        border-top: 1px solid var(--red-ui-secondary-border-color);
         margin-top: 15px;
         margin-bottom: 10px;
         padding-top: 20px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/variables.scss b/packages/node_modules/@node-red/editor-client/src/sass/variables.scss
index aadc2231e..abd31629c 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/variables.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/variables.scss
@@ -1,4 +1,5 @@
 :root {
+
     --red-ui-primary-font: #{$primary-font};
     --red-ui-primary-font-size: #{$primary-font-size};
     --red-ui-monospace-font: #{$monospace-font};
@@ -40,7 +41,6 @@
     --red-ui-text-color-link: #{$text-color-link};
 
 
-
     --red-ui-primary-border-color: #{$primary-border-color};
     --red-ui-secondary-border-color: #{$secondary-border-color};
     --red-ui-tertiary-border-color: #{$tertiary-border-color};
@@ -50,20 +50,38 @@
     --red-ui-border-color-success: #{$border-color-success};
 
     --red-ui-form-background: #{$form-background};
-
     --red-ui-form-placeholder-color: #{$form-placeholder-color};
     --red-ui-form-text-color: #{$form-text-color};
     --red-ui-form-text-color-disabled: #{$form-text-color-disabled};
+    --red-ui-form-input-focus-color: #{$form-input-focus-color};
     --red-ui-form-input-border-color: #{$form-input-border-color};
-    --red-ui-form-input-border-color-focus: #{$form-input-focus-color};
-    --red-ui-form-input-border-color-selected: #{$form-input-border-selected-color};
-    --red-ui-form-input-border-color-error: #{$form-input-border-error-color};
+    --red-ui-form-input-border-selected-color: #{$form-input-border-selected-color};
+    --red-ui-form-input-border-error-color: #{$form-input-border-error-color};
     --red-ui-form-input-background: #{$form-input-background};
     --red-ui-form-input-background-disabled: #{$form-input-background-disabled};
     --red-ui-form-button-background: #{$form-button-background};
 
     --red-ui-form-tips-background: #{$form-tips-background};
 
+
+    --red-ui-text-editor-color: #{$text-editor-color};
+    --red-ui-text-editor-background: #{$text-editor-background};
+    --red-ui-text-editor-color-disabled: #{$text-editor-color-disabled};
+    --red-ui-text-editor-background-disabled: #{$text-editor-background-disabled};
+    --red-ui-text-editor-gutter-background: #{$text-editor-gutter-background};
+    --red-ui-text-editor-gutter-color: #{$text-editor-gutter-color};
+    --red-ui-text-editor-gutter-active-line-background: #{$text-editor-gutter-active-line-background};
+    --red-ui-text-editor-active-line-background: #{$text-editor-active-line-background};
+    --red-ui-text-editor-selection-background: #{$text-editor-selection-background};
+
+    --red-ui-event-log-background: #{$event-log-background};
+    --red-ui-event-log-color: #{$event-log-color};
+    --red-ui-event-log-active-line-background: #{$event-log-active-line-background};
+    --red-ui-event-log-selection-background: #{$event-log-selection-background};
+
+
+
+
     --red-ui-list-item-color: #{$list-item-color};
     --red-ui-list-item-secondary-color: #{$list-item-secondary-color};
     --red-ui-list-item-background: #{$list-item-background};
@@ -72,8 +90,120 @@
     --red-ui-list-item-background-selected: #{$list-item-background-selected};
     --red-ui-list-item-border-selected: #{$list-item-border-selected};
 
+    --red-ui-tab-text-color-active: #{$tab-text-color-active};
+    --red-ui-tab-text-color-inactive: #{$tab-text-color-inactive};
+    --red-ui-tab-text-color-disabled-active: #{$tab-text-color-disabled-active};
+    --red-ui-tab-text-color-disabled-inactive: #{$tab-text-color-disabled-inactive};
+
+    --red-ui-tab-badge-color: #{$tab-badge-color};
+    --red-ui-tab-background: #{$tab-background};
+    --red-ui-tab-background-active: #{$tab-background-active};
+    --red-ui-tab-background-active-alpha: #{$tab-background-active-alpha};
+    --red-ui-tab-background-selected: #{$tab-background-selected};
+    --red-ui-tab-background-selected-alpha: #{$tab-background-selected-alpha};
+    --red-ui-tab-background-inactive: #{$tab-background-inactive};
+    --red-ui-tab-background-inactive-alpha: #{$tab-background-inactive-alpha};
+    --red-ui-tab-background-hover: #{$tab-background-hover};
+    --red-ui-tab-background-hover-alpha: #{$tab-background-hover-alpha};
+
+    --red-ui-palette-header-background: #{$palette-header-background};
+    --red-ui-palette-header-color: #{$palette-header-color};
+    --red-ui-palette-content-background: #{$palette-content-background};
+
+
+    --red-ui-workspace-button-background: #{$workspace-button-background};
+    --red-ui-workspace-button-background-hover: #{$workspace-button-background-hover};
+    --red-ui-workspace-button-background-active: #{$workspace-button-background-active};
+
+    --red-ui-workspace-button-color: #{$workspace-button-color};
+    --red-ui-workspace-button-color-disabled: #{$workspace-button-color-disabled};
+    --red-ui-workspace-button-color-focus: #{$workspace-button-color-focus};
+    --red-ui-workspace-button-color-hover: #{$workspace-button-color-hover};
+    --red-ui-workspace-button-color-active: #{$workspace-button-color-active};
+    --red-ui-workspace-button-color-selected: #{$workspace-button-color-selected};
+
+    --red-ui-workspace-button-color-primary: #{$workspace-button-color-primary};
+    --red-ui-workspace-button-background-primary: #{$workspace-button-background-primary};
+    --red-ui-workspace-button-background-primary-hover: #{$workspace-button-background-primary-hover};
+
+    --red-ui-workspace-button-color-focus-outline: #{$workspace-button-color-focus-outline};
+
     --red-ui-shade-color: #{$shade-color};
 
+    --red-ui-popover-background: #{$popover-background};
+    --red-ui-popover-border: #{$popover-border};
+    --red-ui-popover-color: #{$popover-color};
+    --red-ui-popover-button-border-color: #{$popover-button-border-color};
+    --red-ui-popover-button-border-color-hover: #{$popover-button-border-color-hover};
+
+
+
+    --red-ui-diff-text-header-color: #{$diff-text-header-color};
+    --red-ui-diff-text-header-background: #{$diff-text-header-background};
+    --red-ui-diff-state-color: #{$diff-state-color};
+    --red-ui-diff-state-prefix-color: #{$diff-state-prefix-color};
+    --red-ui-diff-state-added: #{$diff-state-added};
+    --red-ui-diff-state-deleted: #{$diff-state-deleted};
+    --red-ui-diff-state-changed: #{$diff-state-changed};
+    --red-ui-diff-state-changed-background: #{$diff-state-changed-background};
+    --red-ui-diff-state-unchanged: #{$diff-state-unchanged};
+    --red-ui-diff-state-unchanged-background: #{$diff-state-unchanged-background};
+
+    --red-ui-diff-state-conflicted: #{$diff-state-conflicted};
+    --red-ui-diff-state-moved: #{$diff-state-moved};
+    --red-ui-diff-state-conflict: #{$diff-state-conflict};
+    --red-ui-diff-state-conflict-background: #{$diff-state-conflict-background};
+
+    --red-ui-diff-state-added-background: #{$diff-state-added-background};
+    --red-ui-diff-state-added-border: #{$diff-state-added-border};
+    --red-ui-diff-state-added-header-background: #{$diff-state-added-header-background};
+    --red-ui-diff-state-added-header-border: #{$diff-state-added-header-border};
+
+    --red-ui-diff-state-deleted-background: #{$diff-state-deleted-background};
+    --red-ui-diff-state-deleted-border: #{$diff-state-deleted-border};
+    --red-ui-diff-state-deleted-header-background: #{$diff-state-deleted-header-background};
+    --red-ui-diff-state-deleted-header-border: #{$diff-state-deleted-header-border};
+
+    --red-ui-diff-merge-header-color: #{$diff-merge-header-color};
+    --red-ui-diff-merge-header-background: #{$diff-merge-header-background};
+    --red-ui-diff-merge-header-border-color: #{$diff-merge-header-border-color};
+
+    --red-ui-menuBackground: #{$menuBackground};
+    --red-ui-menuDivider: #{$menuDivider};
+    --red-ui-menuColor: #{$menuColor};
+    --red-ui-menuActiveColor: #{$menuActiveColor};
+    --red-ui-menuActiveBackground: #{$menuActiveBackground};
+    --red-ui-menuDisabledColor: #{$menuDisabledColor};
+    --red-ui-menuHoverColor: #{$menuHoverColor};
+    --red-ui-menuHoverBackground: #{$menuHoverBackground};
+    --red-ui-menuCaret: #{$menuCaret};
+
+    --red-ui-view-navigator-background: #{$view-navigator-background};
+
+    --red-ui-view-lasso-stroke: #{$view-lasso-stroke};
+    --red-ui-view-lasso-fill: #{$view-lasso-fill};
+
+    --red-ui-view-background: #{$view-background};
+    --red-ui-view-grid-color: #{$view-grid-color};
+
+    --red-ui-node-label-color: #{$node-label-color};
+    --red-ui-node-port-label-color: #{$node-port-label-color};
+    --red-ui-node-border: #{$node-border};
+    --red-ui-node-border-unknown: #{$node-border-unknown};
+    --red-ui-node-border-placeholder: #{$node-border-placeholder};
+    --red-ui-node-background-placeholder: #{$node-background-placeholder};
+
+    --red-ui-node-port-background: #{$node-port-background};
+    --red-ui-node-port-background-hover: #{$node-port-background-hover};
+    --red-ui-node-icon-color: #{$node-icon-color};
+    --red-ui-node-icon-background-color: #{$node-icon-background-color};
+    --red-ui-node-icon-background-color-fill: #{$node-icon-background-color-fill};
+    --red-ui-node-icon-background-color-opacity: #{$node-icon-background-color-opacity};
+    --red-ui-node-icon-border-color: #{$node-icon-border-color};
+    --red-ui-node-icon-border-color-opacity: #{$node-icon-border-color-opacity};
+
+    --red-ui-node-config-background: #{$node-config-background};
+
     --red-ui-node-link-port-background: #{$node-link-port-background};
 
     --red-ui-node-status-error-border: #{$node-status-error-border};
@@ -81,18 +211,87 @@
     --red-ui-node-status-changed-border: #{$node-status-changed-border};
     --red-ui-node-status-changed-background: #{$node-status-changed-background};
 
-    --red-ui-node-border: #{$node-border};
-    --red-ui-node-port-background:#{$node-port-background};
+    @each $current-color in red green yellow blue grey gray {
+        --red-ui-node-status-colors-#{"" + $current-color}: #{map-get($node-status-colors, $current-color)};
+    }
+
 
-    --red-ui-node-label-color: #{$node-label-color};
     --red-ui-node-selected-color: #{$node-selected-color};
     --red-ui-port-selected-color: #{$port-selected-color};
 
-    --red-ui-popover-background: #{$popover-background};
-    --red-ui-popover-border: #{$popover-border};
-    --red-ui-popover-color: #{$popover-color};
+    --red-ui-link-color: #{$link-color};
+    --red-ui-link-link-color: #{$link-link-color};
+    --red-ui-link-disabled-color: #{$link-disabled-color};
+    --red-ui-link-link-active-color: #{$link-link-active-color};
+    --red-ui-link-unknown-color: #{$link-unknown-color};
+
+    --red-ui-clipboard-textarea-background: #{$clipboard-textarea-background};
+
+
+    --red-ui-deploy-button-color: #{$deploy-button-color};
+    --red-ui-deploy-button-color-active: #{$deploy-button-color-active};
+    --red-ui-deploy-button-color-disabled: #{$deploy-button-color-disabled};
+    --red-ui-deploy-button-background: #{$deploy-button-background};
+    --red-ui-deploy-button-background-hover: #{$deploy-button-background-hover};
+    --red-ui-deploy-button-background-active: #{$deploy-button-background-active};
+    --red-ui-deploy-button-background-disabled: #{$deploy-button-background-disabled};
+    --red-ui-deploy-button-background-disabled-hover: #{$deploy-button-background-disabled-hover};
+
+
+    --red-ui-header-background: #{$header-background};
+    --red-ui-header-button-background-active: #{$header-button-background-active};
+    --red-ui-header-menu-color: #{$header-menu-color};
+    --red-ui-header-menu-color-disabled: #{$header-menu-color-disabled};
+    --red-ui-header-menu-heading-color: #{$header-menu-heading-color};
+    --red-ui-header-menu-sublabel-color: #{$header-menu-sublabel-color};
+    --red-ui-header-menu-background: #{$header-menu-background};
+    --red-ui-header-menu-item-hover: #{$header-menu-item-hover};
+    --red-ui-header-menu-item-border-active: #{$header-menu-item-border-active};
+    --red-ui-headerMenuItemDivider: #{$headerMenuItemDivider};
+    --red-ui-headerMenuCaret: #{$headerMenuCaret};
+
+    --red-ui-vcCommitShaColor: #{$vcCommitShaColor};
+
+    --red-ui-dnd-background: #{$dnd-background};
+    --red-ui-dnd-color: #{$dnd-color};
+
+    --red-ui-notification-border-default: #{$notification-border-default};
+    --red-ui-notification-border-success: #{$notification-border-success};
+    --red-ui-notification-border-warning: #{$notification-border-warning};
+    --red-ui-notification-border-error: #{$notification-border-error};
+
+    --red-ui-debug-message-background: #{$debug-message-background};
+    --red-ui-debug-message-background-hover: #{$debug-message-background-hover};
+
+    --red-ui-debug-message-text-color: #{$debug-message-text-color};
+    --red-ui-debug-message-text-color-meta: #{$debug-message-text-color-meta};
+    --red-ui-debug-message-text-color-object-key: #{$debug-message-text-color-object-key};
+    --red-ui-debug-message-text-color-msg-type-other: #{$debug-message-text-color-msg-type-other};
+    --red-ui-debug-message-text-color-msg-type-string: #{$debug-message-text-color-msg-type-string};
+    --red-ui-debug-message-text-color-msg-type-null: #{$debug-message-text-color-msg-type-null};
+    --red-ui-debug-message-text-color-msg-type-meta: #{$debug-message-text-color-msg-type-meta};
+    --red-ui-debug-message-text-color-msg-type-number: #{$debug-message-text-color-msg-type-number};
+
+    --red-ui-debug-message-border: #{$debug-message-border};
+    --red-ui-debug-message-border-hover: #{$debug-message-border-hover};
+    --red-ui-debug-message-border-warning: #{$debug-message-border-warning};
+    --red-ui-debug-message-border-error: #{$debug-message-border-error};
+
+    --red-ui-group-default-fill: #{$group-default-fill};
+    --red-ui-group-default-fill-opacity: #{$group-default-fill-opacity};
+    --red-ui-group-default-stroke: #{$group-default-stroke};
+    --red-ui-group-default-stroke-opacity: #{$group-default-stroke-opacity};
+    --red-ui-group-default-label-color: #{$group-default-label-color};
 
     --red-ui-tourGuide-border: #{$tourGuide-border};
     --red-ui-tourGuide-heading-color: #{$tourGuide-heading-color};
 
+    --red-ui-grip-color: #{$grip-color};
+
+    --red-ui-icons-flow-color: #{$icons-flow-color};
+
+    --red-ui-spinner-color: #{$spinner-color};
+
+    --red-ui-tab-icon-color: #{$tab-icon-color};
+
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
index d594337de..24e156b1e 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
@@ -47,12 +47,12 @@
 }
 
 .red-ui-workspace-chart-background {
-    fill: $view-background;
+    fill: var(--red-ui-view-background);
 }
 .red-ui-workspace-chart-grid line {
     fill: none;
     shape-rendering: crispEdges;
-    stroke: $view-grid-color;
+    stroke: var(--red-ui-view-grid-color);
     stroke-width: 1px;
 }
 .red-ui-workspace-select-mode {
@@ -94,11 +94,11 @@
 
         a {
             font-style: italic;
-            color: $tab-text-color-disabled-inactive !important;
+            color: var(--red-ui-tab-text-color-disabled-inactive) !important;
         }
         &.active a {
             font-weight: normal;
-            color: $tab-text-color-disabled-active !important;
+            color: var(--red-ui-tab-text-color-disabled-active) !important;
         }
         .red-ui-workspace-disabled-icon {
             display: inline;
@@ -112,17 +112,17 @@
     bottom: 0;
     right:0;
     z-index: 101;
-    border-left: 1px solid $primary-border-color;
-    border-top: 1px solid $primary-border-color;
-    background: $view-navigator-background;
-    box-shadow: -1px 0 3px $shadow;
+    border-left: 1px solid var(--red-ui-primary-border-color);
+    border-top: 1px solid var(--red-ui-primary-border-color);
+    background: var(--red-ui-view-navigator-background);
+    box-shadow: -1px 0 3px var(--red-ui-shadow);
 }
 .red-ui-navigator-border {
     stroke-dasharray: 5,5;
     pointer-events: none;
-    stroke: $secondary-border-color;
+    stroke: var(--red-ui-secondary-border-color);
     stroke-width: 1;
-    fill: $view-background;
+    fill: var(--red-ui-view-background);
 }
 
 .red-ui-component-footer {
@@ -182,7 +182,7 @@ button.red-ui-footer-button-toggle {
 
 #red-ui-loading-progress {
     position: absolute;
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
     top: 0;
     bottom: 0;
     right: 0;
@@ -196,7 +196,7 @@ button.red-ui-footer-button-toggle {
         width: 300px;
         height:80px;
         text-align: center;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
 
     }
 }
@@ -204,13 +204,13 @@ button.red-ui-footer-button-toggle {
     box-sizing: border-box;
     width: 300px;
     height: 30px;
-    border: 2px solid $primary-border-color;
+    border: 2px solid var(--red-ui-primary-border-color);
     border-radius: 4px;
 
     > span {
         display: block;
         height: 100%;
-        background: $secondary-border-color;
+        background: var(--red-ui-secondary-border-color);
         transition: width 0.2s;
         width: 10%;
     }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss
index 2a734eb43..d0b0370ab 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss
@@ -17,7 +17,7 @@
 
 #red-ui-workspace-toolbar {
     display: none;
-    color: $workspace-button-color;
+    color: var(--red-ui-workspace-button-color);
     font-size: 12px;
     line-height: 18px;
     position: absolute;
@@ -27,8 +27,8 @@
     padding: 7px;
     height: 40px;
     box-sizing: border-box;
-    background: $secondary-background;
-    border-bottom: 1px solid $secondary-border-color;
+    background: var(--red-ui-secondary-background);
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
     white-space: nowrap;
     transition: right 0.2s ease;
     overflow: hidden;
@@ -61,23 +61,23 @@
             }
         }
         .button.active {
-            background: $workspace-button-background-active;
+            background: var(--red-ui-workspace-button-background-active);
             cursor: default;
         }
     }
 
     .spinner-value {
         width: 25px;
-        color: $workspace-button-color;
+        color: var(--red-ui-workspace-button-color);
         padding: 0 5px;
         display: inline-block;
         text-align: center;
-        border-top: 1px solid $secondary-border-color;
-        border-bottom: 1px solid $secondary-border-color;
+        border-top: 1px solid var(--red-ui-secondary-border-color);
+        border-bottom: 1px solid var(--red-ui-secondary-border-color);
         margin: 0;
         height: 24px;
         font-size: 12px;
-        background: $form-input-background;
+        background: var(--red-ui-form-input-background);
         line-height: 22px;
         box-sizing: border-box;
     }
diff --git a/scripts/build-custom-theme.js b/scripts/build-custom-theme.js
index e16b35e8b..3a904fea8 100644
--- a/scripts/build-custom-theme.js
+++ b/scripts/build-custom-theme.js
@@ -83,7 +83,7 @@ while((match = ruleRegex.exec(colorsFile)) !== null) {
 
     const result = sass.renderSync({
         outputStyle: "expanded",
-        file: path.join(workingDir,"style.scss"),
+        file: path.join(workingDir,"style-custom-theme.scss"),
     });
 
     const css = result.css.toString()