diff --git a/src/lib/components/JSONEditor.scss b/src/lib/components/JSONEditor.scss
index b5be93ef..8fe5e3fe 100644
--- a/src/lib/components/JSONEditor.scss
+++ b/src/lib/components/JSONEditor.scss
@@ -1,4 +1,3 @@
-@import '../themes/jse-theme-default'; // do not put the .css extension here, else the file will not be bundled
 @import '../styles';
 
 .jse-main {
@@ -6,8 +5,8 @@
   height: 100%;
   min-width: 0;
   min-height: $contents-min-height;
-  font-family: var(--jse-font-family);
-  font-size: var(--jse-font-size);
+  font-family: $font-family;
+  font-size: $font-size;
   line-height: normal;
   position: relative;
   display: flex;
diff --git a/src/lib/components/__snapshots__/JSONEditor.test.ts.snap b/src/lib/components/__snapshots__/JSONEditor.test.ts.snap
index da7ee1f2..78d05f50 100644
--- a/src/lib/components/__snapshots__/JSONEditor.test.ts.snap
+++ b/src/lib/components/__snapshots__/JSONEditor.test.ts.snap
@@ -1482,11 +1482,11 @@ exports[`JSONEditor > render tree mode 1`] = `
             class="jse-json-node jse-expanded s-BfIc3EpAoT-Y jse-root"
             data-path=""
             role="treeitem"
+            style="--level: 0;"
             tabindex="-1"
           >
             <div
               class="jse-header-outer s-BfIc3EpAoT-Y"
-              style="margin-left: calc(0 * var(--jse-indent-size))"
             >
               <div
                 class="jse-header s-BfIc3EpAoT-Y"
@@ -1567,11 +1567,11 @@ exports[`JSONEditor > render tree mode 1`] = `
                 class="jse-json-node jse-expanded s-BfIc3EpAoT-Y"
                 data-path="%2F0"
                 role="treeitem"
+                style="--level: 1;"
                 tabindex="-1"
               >
                 <div
                   class="jse-header-outer s-BfIc3EpAoT-Y"
-                  style="margin-left: calc(1 * var(--jse-indent-size))"
                 >
                   <div
                     class="jse-header s-BfIc3EpAoT-Y"
@@ -1655,11 +1655,11 @@ exports[`JSONEditor > render tree mode 1`] = `
                     class="jse-json-node s-BfIc3EpAoT-Y"
                     data-path="%2F0%2Fid"
                     role="treeitem"
+                    style="--level: 2;"
                     tabindex="-1"
                   >
                     <div
                       class="jse-contents-outer s-BfIc3EpAoT-Y"
-                      style="margin-left: calc(2 * var(--jse-indent-size))"
                     >
                       <div
                         class="jse-contents s-BfIc3EpAoT-Y"
@@ -1717,7 +1717,6 @@ exports[`JSONEditor > render tree mode 1`] = `
                  
                 <div
                   class="jse-footer-outer s-BfIc3EpAoT-Y"
-                  style="margin-left: calc(1 * var(--jse-indent-size))"
                 >
                   <div
                     class="jse-footer s-BfIc3EpAoT-Y"
@@ -1746,11 +1745,11 @@ exports[`JSONEditor > render tree mode 1`] = `
                 class="jse-json-node jse-expanded s-BfIc3EpAoT-Y"
                 data-path="%2F1"
                 role="treeitem"
+                style="--level: 1;"
                 tabindex="-1"
               >
                 <div
                   class="jse-header-outer s-BfIc3EpAoT-Y"
-                  style="margin-left: calc(1 * var(--jse-indent-size))"
                 >
                   <div
                     class="jse-header s-BfIc3EpAoT-Y"
@@ -1834,11 +1833,11 @@ exports[`JSONEditor > render tree mode 1`] = `
                     class="jse-json-node s-BfIc3EpAoT-Y"
                     data-path="%2F1%2Fid"
                     role="treeitem"
+                    style="--level: 2;"
                     tabindex="-1"
                   >
                     <div
                       class="jse-contents-outer s-BfIc3EpAoT-Y"
-                      style="margin-left: calc(2 * var(--jse-indent-size))"
                     >
                       <div
                         class="jse-contents s-BfIc3EpAoT-Y"
@@ -1897,11 +1896,11 @@ exports[`JSONEditor > render tree mode 1`] = `
                     class="jse-json-node s-BfIc3EpAoT-Y"
                     data-path="%2F1%2Fname"
                     role="treeitem"
+                    style="--level: 2;"
                     tabindex="-1"
                   >
                     <div
                       class="jse-contents-outer s-BfIc3EpAoT-Y"
-                      style="margin-left: calc(2 * var(--jse-indent-size))"
                     >
                       <div
                         class="jse-contents s-BfIc3EpAoT-Y"
@@ -1959,7 +1958,6 @@ exports[`JSONEditor > render tree mode 1`] = `
                  
                 <div
                   class="jse-footer-outer s-BfIc3EpAoT-Y"
-                  style="margin-left: calc(1 * var(--jse-indent-size))"
                 >
                   <div
                     class="jse-footer s-BfIc3EpAoT-Y"
@@ -1988,11 +1986,11 @@ exports[`JSONEditor > render tree mode 1`] = `
                 class="jse-json-node jse-expanded s-BfIc3EpAoT-Y"
                 data-path="%2F2"
                 role="treeitem"
+                style="--level: 1;"
                 tabindex="-1"
               >
                 <div
                   class="jse-header-outer s-BfIc3EpAoT-Y"
-                  style="margin-left: calc(1 * var(--jse-indent-size))"
                 >
                   <div
                     class="jse-header s-BfIc3EpAoT-Y"
@@ -2076,11 +2074,11 @@ exports[`JSONEditor > render tree mode 1`] = `
                     class="jse-json-node s-BfIc3EpAoT-Y"
                     data-path="%2F2%2Fid"
                     role="treeitem"
+                    style="--level: 2;"
                     tabindex="-1"
                   >
                     <div
                       class="jse-contents-outer s-BfIc3EpAoT-Y"
-                      style="margin-left: calc(2 * var(--jse-indent-size))"
                     >
                       <div
                         class="jse-contents s-BfIc3EpAoT-Y"
@@ -2138,7 +2136,6 @@ exports[`JSONEditor > render tree mode 1`] = `
                  
                 <div
                   class="jse-footer-outer s-BfIc3EpAoT-Y"
-                  style="margin-left: calc(1 * var(--jse-indent-size))"
                 >
                   <div
                     class="jse-footer s-BfIc3EpAoT-Y"
@@ -2167,7 +2164,6 @@ exports[`JSONEditor > render tree mode 1`] = `
              
             <div
               class="jse-footer-outer s-BfIc3EpAoT-Y"
-              style="margin-left: calc(0 * var(--jse-indent-size))"
             >
               <div
                 class="jse-footer s-BfIc3EpAoT-Y"
diff --git a/src/lib/components/controls/ColorPickerPopup.scss b/src/lib/components/controls/ColorPickerPopup.scss
index f4a6bb43..a8e0a506 100644
--- a/src/lib/components/controls/ColorPickerPopup.scss
+++ b/src/lib/components/controls/ColorPickerPopup.scss
@@ -4,7 +4,7 @@
   :global(.picker_wrapper.popup),
   :global(.picker_wrapper.popup .picker_arrow::before),
   :global(.picker_wrapper.popup .picker_arrow::after) {
-    background: var(--jse-color-picker-background);
+    background: $color-picker-background;
     line-height: normal;
   }
 
@@ -13,20 +13,20 @@
   :global(.picker_editor input),
   :global(.picker_sample),
   :global(.picker_done button) {
-    box-shadow: var(--jse-color-picker-border-box-shadow);
+    box-shadow: $color-picker-border-box-shadow;
   }
 
   :global(.picker_editor input) {
-    background: var(--jse-background-color);
-    color: var(--jse-text-color);
+    background: $background-color;
+    color: $text-color;
   }
 
   :global(.picker_done button) {
-    background: var(--jse-button-background);
-    color: var(--jse-button-color);
+    background: $button-background;
+    color: $button-color;
   }
 
   :global(.picker_done button:hover) {
-    background: var(--jse-button-background-highlight);
+    background: $button-background-highlight;
   }
 }
diff --git a/src/lib/components/controls/DropdownButton.scss b/src/lib/components/controls/DropdownButton.scss
index 955e8da9..d59ceb21 100644
--- a/src/lib/components/controls/DropdownButton.scss
+++ b/src/lib/components/controls/DropdownButton.scss
@@ -4,8 +4,8 @@
   flex: 1;
   line-height: normal;
 
-  $background: var(--jse-context-menu-background);
-  $background-highlight: var(--jse-context-menu-background-highlight);
+  $background: $context-menu-background;
+  $background-highlight: $context-menu-background-highlight;
 
   @include jsoneditor-button;
   position: relative;
@@ -27,15 +27,15 @@
     @include jsoneditor-button;
 
     width: 2em;
-    background: var(--jse-context-menu-background);
-    color: var(--jse-context-menu-color);
+    background: $context-menu-background;
+    color: $context-menu-color;
 
     &.jse-visible {
       background: $background;
     }
 
     &:hover {
-      background: var(--jse-context-menu-background-highlight);
+      background: $context-menu-background-highlight;
     }
 
     &:focus {
@@ -43,7 +43,7 @@
     }
 
     &:disabled {
-      color: var(--jse-context-menu-color-disabled);
+      color: $context-menu-color-disabled;
       background: unset;
     }
 
@@ -57,8 +57,8 @@
     left: 0;
     z-index: 1;
     background: $background;
-    color: var(--jse-context-menu-color);
-    box-shadow: var(--jse-controls-box-shadow);
+    color: $context-menu-color;
+    box-shadow: $controls-box-shadow;
 
     &.jse-visible {
       display: block;
@@ -77,7 +77,7 @@
       }
 
       &:disabled {
-        color: var(--jse-context-menu-color-disabled);
+        color: $context-menu-color-disabled;
         background: unset;
       }
     }
diff --git a/src/lib/components/controls/EditableDiv.scss b/src/lib/components/controls/EditableDiv.scss
index 1944c2e9..d769cd2b 100644
--- a/src/lib/components/controls/EditableDiv.scss
+++ b/src/lib/components/controls/EditableDiv.scss
@@ -20,7 +20,7 @@ div.jse-editable-div {
   }
 
   &[contenteditable='true'] {
-    outline: var(--jse-edit-outline);
+    outline: $edit-outline;
     background: inherit !important;
     position: relative;
     border-radius: 0;
@@ -29,13 +29,13 @@ div.jse-editable-div {
 
   &.jse-empty {
     &:not(:focus) {
-      outline: 1px dotted var(--jse-tag-background);
+      outline: 1px dotted $tag-background;
       -moz-outline-radius: 2px;
     }
 
     &::after {
       pointer-events: none;
-      color: var(--jse-tag-background);
+      color: $tag-background;
     }
   }
 }
diff --git a/src/lib/components/controls/EditableDivShared.scss b/src/lib/components/controls/EditableDivShared.scss
index 911e93ef..26f63c33 100644
--- a/src/lib/components/controls/EditableDivShared.scss
+++ b/src/lib/components/controls/EditableDivShared.scss
@@ -2,33 +2,33 @@
 
 .jse-value {
   &.jse-string {
-    color: var(--jse-value-color-string);
+    color: $value-color-string;
   }
 
   &.jse-object,
   &.jse-array {
     min-width: 16px;
-    color: var(--jse-delimiter-color);
+    color: $delimiter-color;
   }
 
   &.jse-number {
-    color: var(--jse-value-color-number);
+    color: $value-color-number;
   }
 
   &.jse-boolean {
-    color: var(--jse-value-color-boolean);
+    color: $value-color-boolean;
   }
 
   &.jse-null {
-    color: var(--jse-value-color-null);
+    color: $value-color-null;
   }
 
   &.jse-invalid {
-    color: var(--jse-text-color);
+    color: $text-color;
   }
 
   &.jse-url {
-    color: var(--jse-value-color-url);
+    color: $value-color-url;
     text-decoration: underline;
   }
 }
diff --git a/src/lib/components/controls/JSONPreview.scss b/src/lib/components/controls/JSONPreview.scss
index 657fcf81..c8fe065a 100644
--- a/src/lib/components/controls/JSONPreview.scss
+++ b/src/lib/components/controls/JSONPreview.scss
@@ -2,15 +2,15 @@
 
 .jse-json-preview {
   flex: 1;
-  font-family: var(--jse-font-family-mono);
-  font-size: var(--jse-font-size-mono);
-  color: var(--jse-panel-color-readonly);
+  font-family: $font-family-mono;
+  font-size: $font-size-mono;
+  color: $panel-color-readonly;
   overflow: auto;
   white-space: pre-wrap;
   padding: 2px;
 
   // TODO: JSONPreview shouldn't add borders I think
-  border-left: var(--jse-main-border);
-  border-right: var(--jse-main-border);
-  border-bottom: var(--jse-main-border);
+  border-left: $main-border;
+  border-right: $main-border;
+  border-bottom: $main-border;
 }
diff --git a/src/lib/components/controls/Menu.scss b/src/lib/components/controls/Menu.scss
index 65e462b2..2a141654 100644
--- a/src/lib/components/controls/Menu.scss
+++ b/src/lib/components/controls/Menu.scss
@@ -1,10 +1,10 @@
 @import '../../styles';
 
 .jse-menu {
-  background: var(--jse-theme-color);
-  font-family: var(--jse-font-family);
-  font-size: var(--jse-font-size-main-menu);
-  color: var(--jse-menu-color);
+  background: $theme-color;
+  font-family: $font-family;
+  font-size: $font-size-main-menu;
+  color: $menu-color;
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
@@ -20,8 +20,8 @@
     color: inherit;
     cursor: pointer;
 
-    width: var(--jse-menu-button-size);
-    height: var(--jse-menu-button-size);
+    width: $menu-button-size;
+    height: $menu-button-size;
     padding: $padding-half;
     margin: 0;
     border-radius: 0;
@@ -33,21 +33,21 @@
 
     &:hover,
     &:focus {
-      background: var(--jse-theme-color-highlight);
+      background: $theme-color-highlight;
     }
 
     &:disabled {
-      color: var(--jse-menu-color);
+      color: $menu-color;
       opacity: 0.5;
 
       background: transparent;
     }
 
     &.jse-group-button {
-      $group-button-color: var(--jse-menu-color);
+      $group-button-color: $menu-color;
 
       width: auto;
-      height: calc(var(--jse-menu-button-size) - $padding);
+      height: calc($menu-button-size - $padding);
       margin: $padding-half 0;
       padding: 0 $padding-half 1px; // 1px bottom padding for better center alignment (text baseline)
       border: 1px solid $group-button-color;
@@ -66,12 +66,12 @@
 
       &:hover,
       &:focus {
-        background: var(--jse-theme-color-highlight);
+        background: $theme-color-highlight;
       }
 
       &.jse-selected {
         background: $group-button-color;
-        color: var(--jse-theme-color);
+        color: $theme-color;
       }
     }
   }
@@ -83,7 +83,7 @@
   .jse-separator {
     $margin: 3px;
 
-    background: var(--jse-menu-color);
+    background: $menu-color;
     opacity: 0.3;
     width: 1px;
     margin: $margin;
diff --git a/src/lib/components/controls/Message.scss b/src/lib/components/controls/Message.scss
index 59b7f04f..9b2dd93a 100644
--- a/src/lib/components/controls/Message.scss
+++ b/src/lib/components/controls/Message.scss
@@ -1,8 +1,8 @@
 @import '../../styles.scss';
 
 .jse-message {
-  font-family: var(--jse-font-family-mono);
-  font-size: var(--jse-font-size-mono);
+  font-family: $font-family-mono;
+  font-size: $font-size-mono;
 
   padding: $padding;
   display: flex;
@@ -11,8 +11,8 @@
   align-items: stretch;
 
   &.jse-success {
-    background: var(--jse-message-success-background);
-    color: var(--jse-message-success-color);
+    background: $message-success-background;
+    color: $message-success-color;
   }
 
   .jse-text {
@@ -34,18 +34,18 @@
   }
 
   &.jse-error {
-    background: var(--jse-message-error-background);
-    color: var(--jse-message-error-color);
+    background: $message-error-background;
+    color: $message-error-color;
   }
 
   &.jse-warning {
-    background: var(--jse-message-warning-background);
-    color: var(--jse-message-warning-color);
+    background: $message-warning-background;
+    color: $message-warning-color;
   }
 
   &.jse-info {
-    background: var(--jse-message-info-background);
-    color: var(--jse-message-info-color);
+    background: $message-info-background;
+    color: $message-info-color;
   }
 
   .jse-actions {
@@ -55,13 +55,13 @@
     button.jse-action {
       @include jsoneditor-button;
 
-      background: var(--jse-message-action-background);
+      background: $message-action-background;
       color: inherit;
 
       padding: $padding-half $padding;
 
       &:hover {
-        background: var(--jse-message-action-background-highlight);
+        background: $message-action-background-highlight;
       }
     }
   }
diff --git a/src/lib/components/controls/ValidationErrorsOverview.scss b/src/lib/components/controls/ValidationErrorsOverview.scss
index 87f9e0de..cf4b6ade 100644
--- a/src/lib/components/controls/ValidationErrorsOverview.scss
+++ b/src/lib/components/controls/ValidationErrorsOverview.scss
@@ -1,10 +1,10 @@
 @import '../../styles.scss';
 
 .jse-validation-errors-overview {
-  font-family: var(--jse-font-family-mono);
-  font-size: var(--jse-font-size-mono);
-  background: var(--jse-message-warning-background);
-  color: var(--jse-message-warning-color);
+  font-family: $font-family-mono;
+  font-size: $font-size-mono;
+  background: $message-warning-background;
+  color: $message-warning-color;
   overflow: auto;
   max-height: $errors-overview-max-height;
 
diff --git a/src/lib/components/controls/contextmenu/ContextMenu.scss b/src/lib/components/controls/contextmenu/ContextMenu.scss
index 213ccdeb..ba8544cd 100644
--- a/src/lib/components/controls/contextmenu/ContextMenu.scss
+++ b/src/lib/components/controls/contextmenu/ContextMenu.scss
@@ -1,12 +1,12 @@
 @import '../../../styles.scss';
 
 .jse-contextmenu {
-  box-shadow: var(--jse-controls-box-shadow);
+  box-shadow: $controls-box-shadow;
 
-  font-family: var(--jse-font-family);
-  font-size: var(--jse-font-size);
-  background: var(--jse-context-menu-background);
-  color: var(--jse-context-menu-color);
+  font-family: $font-family;
+  font-size: $font-size;
+  background: $context-menu-background;
+  color: $context-menu-color;
 
   .jse-row {
     display: flex;
@@ -18,14 +18,14 @@
       flex: 1;
       white-space: nowrap;
       padding: $padding;
-      color: var(--jse-context-menu-color-disabled);
+      color: $context-menu-color-disabled;
       line-height: normal;
     }
 
     div.jse-tip {
       flex: 1;
-      background: var(--jse-context-menu-tip-background);
-      color: var(--jse-context-menu-tip-color);
+      background: $context-menu-tip-background;
+      color: $context-menu-tip-color;
       margin: $padding-half;
       padding: $padding-half $padding;
       font-size: 80%;
@@ -50,13 +50,13 @@
     align-items: stretch;
 
     &:not(:last-child) {
-      border-right: 1px solid var(--jse-context-menu-separator-color);
+      border-right: 1px solid $context-menu-separator-color;
     }
   }
 
   .jse-separator {
     width: 100%;
     height: 1px;
-    background: var(--jse-context-menu-separator-color);
+    background: $context-menu-separator-color;
   }
 }
diff --git a/src/lib/components/controls/contextmenu/ContextMenuPointer.scss b/src/lib/components/controls/contextmenu/ContextMenuPointer.scss
index 9c8682c8..d15d5553 100644
--- a/src/lib/components/controls/contextmenu/ContextMenuPointer.scss
+++ b/src/lib/components/controls/contextmenu/ContextMenuPointer.scss
@@ -2,10 +2,10 @@
 
 .jse-context-menu-pointer {
   position: absolute;
-  top: calc(-0.5 * var(--jse-context-menu-pointer-size));
-  right: calc(-0.5 * var(--jse-context-menu-pointer-size));
-  width: var(--jse-context-menu-pointer-size);
-  height: var(--jse-context-menu-pointer-size);
+  top: calc(-0.5 * $context-menu-pointer-size);
+  right: calc(-0.5 * $context-menu-pointer-size);
+  width: $context-menu-pointer-size;
+  height: $context-menu-pointer-size;
   padding: 0;
   margin: 0;
 
@@ -13,12 +13,12 @@
   background: transparent;
 
   border-radius: 2px;
-  background: var(--jse-context-menu-pointer-background);
-  color: var(--jse-context-menu-pointer-color);
+  background: $context-menu-pointer-background;
+  color: $context-menu-pointer-color;
   border: none;
-  box-shadow: var(--jse-controls-box-shadow);
+  box-shadow: $controls-box-shadow;
 
   &:hover {
-    background: var(--jse-context-menu-pointer-background-highlight);
+    background: $context-menu-pointer-background-highlight;
   }
 }
diff --git a/src/lib/components/controls/navigationBar/NavigationBar.scss b/src/lib/components/controls/navigationBar/NavigationBar.scss
index f0426342..f80ce755 100644
--- a/src/lib/components/controls/navigationBar/NavigationBar.scss
+++ b/src/lib/components/controls/navigationBar/NavigationBar.scss
@@ -1,23 +1,23 @@
 @import '../../../styles';
 
 .jse-navigation-bar {
-  font-family: var(--jse-font-family-mono);
-  font-size: var(--jse-font-size-mono);
-  background: var(--jse-panel-background);
-  color: var(--jse-panel-button-color);
+  font-family: $font-family-mono;
+  font-size: $font-size-mono;
+  background: $panel-background;
+  color: $panel-button-color;
   padding: 0;
   margin: 0;
   display: flex;
   overflow: auto;
 
-  border-left: var(--jse-main-border);
-  border-right: var(--jse-main-border);
+  border-left: $main-border;
+  border-right: $main-border;
 
   .jse-navigation-bar-edit {
-    font-family: var(--jse-font-family-mono);
-    font-size: var(--jse-font-size-mono);
+    font-family: $font-family-mono;
+    font-size: $font-size-mono;
     padding: $padding-half $padding;
-    color: var(--jse-panel-color-readonly);
+    color: $panel-color-readonly;
     background: transparent;
     border: none;
     display: flex;
@@ -32,8 +32,8 @@
     &:focus,
     &:hover,
     &.editing {
-      background: var(--jse-panel-button-background-highlight);
-      color: var(--jse-panel-button-color-highlight);
+      background: $panel-button-background-highlight;
+      color: $panel-button-color-highlight;
       transition:
         color 0.2s ease-in,
         background 0.2s ease-in;
diff --git a/src/lib/components/controls/navigationBar/NavigationBarDropdown.scss b/src/lib/components/controls/navigationBar/NavigationBarDropdown.scss
index 492c3615..4bf6ebbf 100644
--- a/src/lib/components/controls/navigationBar/NavigationBarDropdown.scss
+++ b/src/lib/components/controls/navigationBar/NavigationBarDropdown.scss
@@ -5,9 +5,9 @@
   top: 100%;
   left: 0;
   z-index: 3; // above the floating ContextMenuButton
-  background: var(--jse-navigation-bar-background);
-  color: var(--jse-navigation-bar-dropdown-color);
-  box-shadow: var(--jse-controls-box-shadow);
+  background: $navigation-bar-background;
+  color: $navigation-bar-dropdown-color;
+  box-shadow: $controls-box-shadow;
   display: flex;
   flex-direction: column;
   max-height: 300px;
@@ -15,8 +15,8 @@
   min-width: 80px;
 
   button.jse-navigation-bar-dropdown-item {
-    font-family: var(--jse-font-family-mono);
-    font-size: var(--jse-font-size-mono);
+    font-family: $font-family-mono;
+    font-size: $font-size-mono;
     border: none;
     background: transparent;
     color: inherit;
@@ -30,12 +30,12 @@
 
     &:focus,
     &:hover {
-      background: var(--jse-navigation-bar-background-highlight);
+      background: $navigation-bar-background-highlight;
     }
 
     &.jse-selected {
-      background: var(--jse-navigation-bar-dropdown-color);
-      color: var(--jse-navigation-bar-background);
+      background: $navigation-bar-dropdown-color;
+      color: $navigation-bar-background;
     }
   }
 }
diff --git a/src/lib/components/controls/navigationBar/NavigationBarItem.scss b/src/lib/components/controls/navigationBar/NavigationBarItem.scss
index 892aa922..2c2d5d2a 100644
--- a/src/lib/components/controls/navigationBar/NavigationBarItem.scss
+++ b/src/lib/components/controls/navigationBar/NavigationBarItem.scss
@@ -18,16 +18,16 @@
 
     &:focus,
     &:hover {
-      background: var(--jse-panel-button-background-highlight);
-      color: var(--jse-panel-button-color-highlight);
+      background: $panel-button-background-highlight;
+      color: $panel-button-color-highlight;
     }
 
     &.jse-navigation-bar-arrow {
       padding: 2px $padding 0;
 
       &.jse-open {
-        background: var(--jse-navigation-bar-background);
-        color: var(--jse-navigation-bar-dropdown-color);
+        background: $navigation-bar-background;
+        color: $navigation-bar-dropdown-color;
       }
     }
   }
diff --git a/src/lib/components/controls/navigationBar/NavigationBarPathEditor.scss b/src/lib/components/controls/navigationBar/NavigationBarPathEditor.scss
index 7f2f4a99..454ad9ad 100644
--- a/src/lib/components/controls/navigationBar/NavigationBarPathEditor.scss
+++ b/src/lib/components/controls/navigationBar/NavigationBarPathEditor.scss
@@ -3,23 +3,23 @@
 .jse-navigation-bar-path-editor {
   flex: 1;
   display: flex;
-  border: var(--jse-edit-outline);
-  background: var(--jse-background-color);
+  border: $edit-outline;
+  background: $background-color;
 
   input.jse-navigation-bar-text {
     flex: 1;
     font-family: inherit;
     font-size: inherit;
     padding: 0 5px 1px;
-    background: var(--jse-background-color);
-    color: var(--jse-text-color);
+    background: $background-color;
+    color: $text-color;
     border: none;
     outline: none;
   }
 
   button {
     border: none;
-    background: var(--jse-background-color);
+    background: $background-color;
     cursor: pointer;
     font-family: inherit;
     font-size: 80%;
@@ -28,25 +28,25 @@
 
   button.jse-navigation-bar-copy {
     &.copied {
-      color: var(--jse-message-success-background);
+      color: $message-success-background;
     }
   }
 
   button.jse-navigation-bar-validation-error {
-    color: var(--jse-error-color);
+    color: $error-color;
   }
 
   &.error {
-    border-color: var(--jse-error-color);
+    border-color: $error-color;
 
     input.jse-navigation-bar-text {
-      color: var(--jse-error-color);
+      color: $error-color;
     }
   }
 
   .jse-copied-text {
-    background: var(--jse-message-success-background);
-    color: var(--jse-message-success-color);
+    background: $message-success-background;
+    color: $message-success-color;
     position: relative;
     margin: 2px;
     padding: 0 5px;
diff --git a/src/lib/components/controls/selectQueryLanguage/SelectQueryLanguage.scss b/src/lib/components/controls/selectQueryLanguage/SelectQueryLanguage.scss
index 2248d353..014c6384 100644
--- a/src/lib/components/controls/selectQueryLanguage/SelectQueryLanguage.scss
+++ b/src/lib/components/controls/selectQueryLanguage/SelectQueryLanguage.scss
@@ -10,7 +10,7 @@
     right: 0;
     display: flex;
     flex-direction: column;
-    box-shadow: var(--jse-controls-box-shadow);
+    box-shadow: $controls-box-shadow;
 
     .jse-query-language {
       @include jsoneditor-button;
@@ -18,11 +18,11 @@
       text-align: left;
       padding: $padding $padding-double;
       white-space: nowrap;
-      color: var(--jse-context-menu-color);
-      background: var(--jse-context-menu-background);
+      color: $context-menu-color;
+      background: $context-menu-background;
 
       &:hover {
-        background: var(--jse-context-menu-background-highlight);
+        background: $context-menu-background-highlight;
       }
     }
   }
diff --git a/src/lib/components/controls/tooltip/Tooltip.scss b/src/lib/components/controls/tooltip/Tooltip.scss
index 13a2fa66..59671cca 100644
--- a/src/lib/components/controls/tooltip/Tooltip.scss
+++ b/src/lib/components/controls/tooltip/Tooltip.scss
@@ -1,13 +1,13 @@
 @import '../../../styles';
 
 .jse-tooltip {
-  font-family: var(--jse-font-family);
-  font-size: var(--jse-font-size);
+  font-family: $font-family;
+  font-size: $font-size;
   line-height: normal;
   padding: $padding-half $padding;
   border-radius: $border-radius;
-  background: var(--jse-context-menu-background);
-  color: var(--jse-context-menu-color);
+  background: $context-menu-background;
+  color: $context-menu-color;
   white-space: nowrap;
-  box-shadow: var(--jse-controls-box-shadow);
+  box-shadow: $controls-box-shadow;
 }
diff --git a/src/lib/components/modals/CopyPasteModal.scss b/src/lib/components/modals/CopyPasteModal.scss
index 206f3818..a0bddd6b 100644
--- a/src/lib/components/modals/CopyPasteModal.scss
+++ b/src/lib/components/modals/CopyPasteModal.scss
@@ -11,7 +11,7 @@
     .jse-shortcut {
       .jse-key {
         font-size: 200%;
-        color: var(--jse-theme-color);
+        color: $theme-color;
       }
     }
   }
diff --git a/src/lib/components/modals/Header.scss b/src/lib/components/modals/Header.scss
index a71367f0..903ab5ec 100644
--- a/src/lib/components/modals/Header.scss
+++ b/src/lib/components/modals/Header.scss
@@ -2,8 +2,8 @@
 
 .jse-header {
   display: flex;
-  background: var(--jse-theme-color);
-  color: var(--jse-menu-color);
+  background: $theme-color;
+  color: $menu-color;
 
   .jse-title {
     flex: 1;
diff --git a/src/lib/components/modals/JSONEditorModal.scss b/src/lib/components/modals/JSONEditorModal.scss
index 0153c44a..53a21310 100644
--- a/src/lib/components/modals/JSONEditorModal.scss
+++ b/src/lib/components/modals/JSONEditorModal.scss
@@ -5,9 +5,6 @@
   .jse-modal-contents {
     padding-top: 0;
 
-    --jse-theme-color: var(--jse-modal-theme-color);
-    --jse-theme-color-highlight: var(--jse-modal-theme-color-highlight);
-
     .jse-label {
       font-weight: bold;
       display: block;
@@ -31,6 +28,9 @@
       min-height: 150px;
       min-width: 0;
       display: flex;
+
+      --jse-theme-color: #{$modal-editor-theme-color};
+      --jse-theme-color-highlight: #{$modal-editor-theme-color-highlight};
     }
   }
 
@@ -40,7 +40,7 @@
 
     .jse-error {
       flex: 1;
-      color: var(--jse-error-color);
+      color: $error-color;
     }
 
     button {
diff --git a/src/lib/components/modals/Modal.scss b/src/lib/components/modals/Modal.scss
index 01324ed2..bf14ba21 100644
--- a/src/lib/components/modals/Modal.scss
+++ b/src/lib/components/modals/Modal.scss
@@ -3,12 +3,21 @@
 .jse-modal {
   // styling for the select box, svelte-select
   // see docs: https://github.com/rob-balfre/svelte-select#css-custom-properties-variables
-  --height: 36px;
-  --multi-item-height: 28px;
-  --multi-item-margin: 2px;
-  --multi-item-padding: 2px 8px;
-  --multi-item-border-radius: 6px;
-  --indicator-top: 8px;
+  :global(.svelte-select) {
+    --border: #{$svelte-select-border};
+    --item-is-active-bg: #{$svelte-select-item-is-active-bg};
+    --border-radius: #{$svelte-select-border-radius};
+    --background: #{$svelte-select-background};
+    --padding: #{$svelte-select-padding};
+    --multi-select-padding: #{$svelte-select-multi-select-padding};
+    --font-size: #{$svelte-select-font-size};
+    --height: 36px;
+    --multi-item-height: 28px;
+    --multi-item-margin: 2px;
+    --multi-item-padding: 2px 8px;
+    --multi-item-border-radius: 6px;
+    --indicator-top: 8px;
+  }
 
   @include jse-modal-style;
 
@@ -43,7 +52,7 @@
   height: 100%;
   top: 0;
   left: 0;
-  background: var(--jse-modal-overlay-background);
+  background: $modal-overlay-background;
 }
 
 :global(.bg.jse-modal-bg .jse-modal-window-wrap) {
diff --git a/src/lib/components/modals/SortModal.scss b/src/lib/components/modals/SortModal.scss
index 4c2fae9a..d8174873 100644
--- a/src/lib/components/modals/SortModal.scss
+++ b/src/lib/components/modals/SortModal.scss
@@ -21,8 +21,8 @@
         width: 100%;
         box-sizing: border-box;
         padding: 6px 16px; // TODO: define variables for those props
-        border: var(--jse-input-border);
-        border-radius: var(--jse-input-radius);
+        border: $input-border;
+        border-radius: $input-radius;
         font-family: inherit;
         font-size: inherit;
         background: inherit;
@@ -30,7 +30,7 @@
         outline: none;
 
         &:read-only {
-          background: var(--jse-input-background-readonly);
+          background: $input-background-readonly;
         }
       }
 
@@ -44,7 +44,7 @@
     height: 200px; // Trick for the property select box dropdown to be fully visible
 
     .jse-error {
-      color: var(--jse-error-color);
+      color: $error-color;
     }
   }
 }
diff --git a/src/lib/components/modals/TransformModal.scss b/src/lib/components/modals/TransformModal.scss
index e9150ab5..c1fba5e7 100644
--- a/src/lib/components/modals/TransformModal.scss
+++ b/src/lib/components/modals/TransformModal.scss
@@ -35,9 +35,9 @@
           }
 
           :global(code) {
-            background: var(--jse-modal-code-background);
-            font-family: var(--jse-font-family-mono);
-            font-size: var(--jse-font-size-mono);
+            background: $modal-code-background;
+            font-family: $font-family-mono;
+            font-size: $font-size-mono;
           }
         }
 
@@ -128,11 +128,11 @@
 
   :global(.jse-tree-mode) {
     flex: 1;
-    background: var(--jse-input-background-readonly);
+    background: $input-background-readonly;
     box-shadow: none;
     box-sizing: border-box;
 
-    --jse-main-border: var(--jse-input-border);
+    --jse-main-border: #{$input-border};
   }
 
   input,
@@ -142,17 +142,17 @@
 
   .jse-preview.jse-error {
     flex: 1;
-    background: var(--jse-input-background-readonly);
-    border: var(--jse-input-border);
-    color: var(--jse-error-color);
+    background: $input-background-readonly;
+    border: $input-border;
+    color: $error-color;
     padding: $padding-half;
   }
 
   :global(a) {
-    color: var(--jse-a-color);
+    color: $a-color;
   }
 
   :global(a:hover) {
-    color: var(--jse-a-color-highlight);
+    color: $a-color-highlight;
   }
 }
diff --git a/src/lib/components/modals/TransformWizard.scss b/src/lib/components/modals/TransformWizard.scss
index 2c2dd9a9..4a9f46c2 100644
--- a/src/lib/components/modals/TransformWizard.scss
+++ b/src/lib/components/modals/TransformWizard.scss
@@ -63,14 +63,14 @@ table.jse-transform-wizard {
         .jse-filter-value {
           flex: 4;
           padding: 4px 8px;
-          border: var(--jse-input-border);
-          border-radius: var(--jse-input-radius);
+          border: $input-border;
+          border-radius: $input-radius;
           outline: none;
-          background: var(--jse-input-background);
+          background: $input-background;
           color: inherit;
 
           &:focus {
-            border: var(--jse-input-border-focus);
+            border: $input-border-focus;
           }
         }
       }
diff --git a/src/lib/components/modals/repair/JSONRepairComponent.scss b/src/lib/components/modals/repair/JSONRepairComponent.scss
index 2186a73d..bcca9cbe 100644
--- a/src/lib/components/modals/repair/JSONRepairComponent.scss
+++ b/src/lib/components/modals/repair/JSONRepairComponent.scss
@@ -4,12 +4,15 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  background: var(--jse-background-color);
-  color: var(--jse-text-color);
+  background: $background-color;
+  color: $text-color;
 
   .jse-menu {
     .jse-info {
-      padding: 0 $padding;
+      padding: $padding-half;
+      font-family: $font-family;
+      font-size: $font-size;
+      vertical-align: center;
     }
   }
 
@@ -17,10 +20,10 @@
     flex: 1;
     border: none;
     padding: $contents-padding;
-    font-family: var(--jse-font-family-mono);
-    font-size: var(--jse-font-size-mono);
-    background: var(--jse-background-color);
-    color: var(--jse-text-color);
+    font-family: $font-family-mono;
+    font-size: $font-size-mono;
+    background: $input-background;
+    color: $text-color;
 
     resize: none;
     outline: none;
diff --git a/src/lib/components/modes/tablemode/TableMode.scss b/src/lib/components/modes/tablemode/TableMode.scss
index 358dc4bf..2c8919fb 100644
--- a/src/lib/components/modes/tablemode/TableMode.scss
+++ b/src/lib/components/modes/tablemode/TableMode.scss
@@ -5,16 +5,16 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  background: var(--jse-background-color);
+  background: $background-color;
   min-width: 0;
   min-height: 0;
-  font-family: var(--jse-font-family-mono);
-  font-size: var(--jse-font-size-mono);
-  color: var(--jse-text-color);
-  line-height: var(--jse-line-height);
+  font-family: $font-family-mono;
+  font-size: $font-size-mono;
+  color: $text-color;
+  line-height: $line-height;
 
   &.no-main-menu {
-    border-top: var(--jse-main-border);
+    border-top: $main-border;
   }
 
   .jse-hidden-input-label {
@@ -41,11 +41,11 @@
     overflow: auto;
     overflow-anchor: none; // important to prevent Chrome from adjusting the scrollTop based on changing contents (causing an infinite loop)
 
-    border-left: var(--jse-main-border);
-    border-right: var(--jse-main-border);
+    border-left: $main-border;
+    border-right: $main-border;
 
     &:last-child {
-      border-bottom: var(--jse-main-border);
+      border-bottom: $main-border;
     }
 
     table.jse-table-main {
@@ -68,21 +68,21 @@
 
       .jse-table-row {
         &:hover {
-          background-color: var(--jse-table-row-odd-background);
+          background-color: $table-row-odd-background;
         }
 
         .jse-table-cell {
-          padding: 0 var(--jse-padding) 0 0;
+          padding: 0 $padding 0 0;
           vertical-align: top;
           white-space: nowrap;
-          height: var(--jse-line-height);
+          height: $line-height;
 
           &.jse-table-cell-header,
           &.jse-table-cell-gutter {
             font-weight: normal;
             text-align: left;
-            color: var(--jse-text-readonly);
-            background: var(--jse-table-header-background);
+            color: $text-readonly;
+            background: $table-header-background;
           }
 
           &.jse-table-cell-header {
@@ -92,19 +92,19 @@
 
             .jse-table-root-error {
               // same padding as .jse-column-header
-              padding: $padding-half var(--jse-padding) $padding-half $padding-half;
+              padding: $padding-half $padding $padding-half $padding-half;
             }
 
             // FIXME: border and/or border shadow?
           }
 
           &.jse-table-cell-gutter {
-            padding: 0 var(--jse-padding) 0 $padding-half;
+            padding: 0 $padding 0 $padding-half;
             // FIXME: border and/or border shadow?
           }
 
           &.jse-selected-value > :global(.jse-value) {
-            background: var(--jse-selection-background-color);
+            background: $selection-background-color;
           }
 
           :global(div) {
@@ -137,10 +137,10 @@
       .jse-loading {
         flex: 2;
         text-align: center;
-        color: var(--jse-panel-color-readonly);
+        color: $panel-color-readonly;
         box-sizing: border-box;
-        font-family: var(--jse-font-family);
-        font-size: var(--jse-font-size);
+        font-family: $font-family;
+        font-size: $font-size;
       }
     }
   }
diff --git a/src/lib/components/modes/tablemode/TableModeWelcome.scss b/src/lib/components/modes/tablemode/TableModeWelcome.scss
index 8977440b..9892b0f4 100644
--- a/src/lib/components/modes/tablemode/TableModeWelcome.scss
+++ b/src/lib/components/modes/tablemode/TableModeWelcome.scss
@@ -7,11 +7,11 @@
   overflow: auto;
   align-items: center;
 
-  border-left: var(--jse-main-border);
-  border-right: var(--jse-main-border);
+  border-left: $main-border;
+  border-right: $main-border;
 
   &:last-child {
-    border-bottom: var(--jse-main-border);
+    border-bottom: $main-border;
   }
 
   .jse-space.jse-before {
@@ -25,14 +25,14 @@
     max-width: 300px;
     margin: 2em $padding;
 
-    font-family: var(--jse-font-family);
-    font-size: var(--jse-font-size);
+    font-family: $font-family;
+    font-size: $font-size;
 
     .jse-nested-arrays-title {
     }
 
     .jse-nested-arrays-info {
-      color: var(--jse-panel-color-readonly);
+      color: $panel-color-readonly;
     }
 
     button.jse-nested-array-action {
diff --git a/src/lib/components/modes/tablemode/tag/InlineValue.scss b/src/lib/components/modes/tablemode/tag/InlineValue.scss
index dd1324a8..e092983b 100644
--- a/src/lib/components/modes/tablemode/tag/InlineValue.scss
+++ b/src/lib/components/modes/tablemode/tag/InlineValue.scss
@@ -1,9 +1,9 @@
 @import '../../../../styles';
 
 .jse-inline-value {
-  font-family: var(--jse-font-family-mono);
-  font-size: var(--jse-font-size-mono);
-  line-height: var(--jse-line-height);
+  font-family: $font-family-mono;
+  font-size: $font-size-mono;
+  line-height: $line-height;
   border: none;
   padding: 0 $padding-half;
   background: transparent;
@@ -11,10 +11,10 @@
   cursor: pointer;
 
   &:hover {
-    background: var(--jse-hover-background-color);
+    background: $hover-background-color;
   }
 
   &.jse-selected {
-    background: var(--jse-selection-background-color);
+    background: $selection-background-color;
   }
 }
diff --git a/src/lib/components/modes/textmode/StatusBar.scss b/src/lib/components/modes/textmode/StatusBar.scss
index 98f6a986..3ad6c8b1 100644
--- a/src/lib/components/modes/textmode/StatusBar.scss
+++ b/src/lib/components/modes/textmode/StatusBar.scss
@@ -1,22 +1,22 @@
 @import '../../../styles';
 
 .jse-status-bar {
-  background: var(--jse-panel-background);
-  color: var(--jse-panel-color-readonly);
-  font-family: var(--jse-font-family-mono);
-  font-size: var(--jse-font-size-mono);
+  background: $panel-background;
+  color: $panel-color-readonly;
+  font-family: $font-family-mono;
+  font-size: $font-size-mono;
   margin: 0;
 
-  border-top: var(--jse-panel-border);
-  border-left: var(--jse-main-border);
-  border-right: var(--jse-main-border);
+  border-top: $panel-border;
+  border-left: $main-border;
+  border-right: $main-border;
 
   &:last-child {
-    border-bottom: var(--jse-main-border);
+    border-bottom: $main-border;
   }
 
   display: flex;
-  gap: var(--jse-padding);
+  gap: $padding;
 
   .jse-status-bar-info {
     padding: 2px;
diff --git a/src/lib/components/modes/textmode/TextMode.scss b/src/lib/components/modes/textmode/TextMode.scss
index ff912915..eeb8cf93 100644
--- a/src/lib/components/modes/textmode/TextMode.scss
+++ b/src/lib/components/modes/textmode/TextMode.scss
@@ -1,14 +1,19 @@
 @import '../../../styles';
 
 .jse-text-mode {
+  --internal-key-color: #{$key-color};
+  --internal-value-color-number: #{$value-color-number};
+  --internal-value-color-boolean: #{$value-color-boolean};
+  --internal-value-color-string: #{$value-color-string};
+  --internal-value-color-null: #{$value-color-null};
   flex: 1;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  background: var(--jse-background-color);
+  background: $background-color;
 
   &.no-main-menu {
-    border-top: var(--jse-main-border);
+    border-top: $main-border;
   }
 
   .jse-contents {
@@ -20,11 +25,11 @@
     min-width: 0;
     min-height: 0;
 
-    border-left: var(--jse-main-border);
-    border-right: var(--jse-main-border);
+    border-left: $main-border;
+    border-right: $main-border;
 
     &:last-child {
-      border-bottom: var(--jse-main-border);
+      border-bottom: $main-border;
     }
 
     &.jse-hidden {
@@ -42,87 +47,87 @@
       overflow: hidden;
 
       :global(.cm-scroller) {
-        font-family: var(--jse-font-family-mono);
-        font-size: var(--jse-font-size-mono);
-        line-height: var(--jse-line-height);
-        color: var(--jse-delimiter-color);
+        font-family: $font-family-mono;
+        font-size: $font-size-mono;
+        line-height: $line-height;
+        color: $delimiter-color;
       }
 
       :global(.cm-gutters) {
-        background: var(--jse-panel-background);
-        color: var(--jse-panel-color-readonly);
-        border-right: var(--jse-panel-border);
+        background: $panel-background;
+        color: $panel-color-readonly;
+        border-right: $panel-border;
       }
 
       :global(.cm-activeLine),
       :global(.cm-activeLineGutter) {
-        background: var(--jse-active-line-background-color);
+        background: $active-line-background-color;
       }
 
       :global(.cm-selectionBackground) {
-        background: var(--jse-selection-background-color);
+        background: $selection-background-color;
       }
 
       :global(.cm-searchMatch) {
-        background-color: var(--jse-search-match-color);
-        outline: var(--jse-search-match-outline);
+        background-color: $search-match-color;
+        outline: $search-match-outline;
       }
 
       :global(.cm-searchMatch.cm-searchMatch-selected) {
-        background-color: var(--jse-search-match-active-color);
-        outline: var(--jse-search-match-active-outline);
+        background-color: $search-match-active-color;
+        outline: $search-match-active-outline;
       }
 
       :global(.cm-selectionMatch) {
-        background-color: var(--jse-search-match-background-color);
+        background-color: $search-match-background-color;
       }
 
       :global(.cm-foldPlaceholder) {
-        background: var(--jse-tag-background);
-        color: var(--jse-tag-color);
+        background: $tag-background;
+        color: $tag-color;
         border: none;
         padding: 0 $padding;
       }
 
       :global(.cm-tooltip) {
-        font-size: var(--jse-font-size);
-        font-family: var(--jse-font-family);
-        color: var(--jse-tooltip-color);
-        background: var(--jse-tooltip-background);
-        border: var(--jse-tooltip-border);
+        font-size: $font-size;
+        font-family: $font-family;
+        color: $tooltip-color;
+        background: $tooltip-background;
+        border: $tooltip-border;
       }
 
       :global(.cm-diagnosticAction) {
-        background: var(--jse-tooltip-action-button-color);
-        background: var(--jse-tooltip-action-button-background);
+        background: $tooltip-action-button-color;
+        background: $tooltip-action-button-background;
       }
 
       :global(.cm-panels) {
-        border-bottom: var(--jse-panel-border);
+        border-bottom: $panel-border;
       }
 
       :global(.cm-search) {
-        background: var(--jse-panel-background);
-        color: var(--jse-panel-color);
-        font-family: var(--jse-font-family);
-        font-size: var(--jse-font-size);
+        background: $panel-background;
+        color: $panel-color;
+        font-family: $font-family;
+        font-size: $font-size;
       }
 
       :global(.cm-search input) {
-        font-family: var(--jse-font-family);
-        font-size: var(--jse-font-size-text-mode-search);
-        color: var(--jse-input-color);
-        border: var(--jse-input-border);
-        background: var(--jse-input-background);
+        font-family: $font-family;
+        font-size: $font-size-text-mode-search;
+        color: $input-color;
+        border: $input-border;
+        background: $input-background;
         margin-right: 2px;
       }
 
       :global(.cm-search button) {
-        font-family: var(--jse-font-family);
-        font-size: var(--jse-font-size-text-mode-search);
+        font-family: $font-family;
+        font-size: $font-size-text-mode-search;
 
-        color: var(--jse-panel-button-color);
-        background: var(--jse-panel-button-background);
+        color: $panel-button-color;
+        background: $panel-button-background;
 
         border: none;
         cursor: pointer;
@@ -131,14 +136,14 @@
         margin: 0;
 
         &:hover {
-          color: var(--jse-panel-button-color-highlight);
-          background: var(--jse-panel-button-background-highlight);
+          color: $panel-button-color-highlight;
+          background: $panel-button-background-highlight;
         }
       }
 
       :global(.cm-search label) {
-        font-family: var(--jse-font-family);
-        font-size: var(--jse-font-size-text-mode-search);
+        font-family: $font-family;
+        font-size: $font-size-text-mode-search;
         padding-left: $padding;
       }
 
@@ -157,7 +162,7 @@
       }
 
       :global(.cm-cursor-primary) {
-        border-color: var(--jse-text-color);
+        border-color: $text-color;
       }
     }
 
@@ -168,17 +173,17 @@
     .jse-loading {
       flex: 2;
       text-align: center;
-      color: var(--jse-panel-color-readonly);
+      color: $panel-color-readonly;
       box-sizing: border-box;
-      font-family: var(--jse-font-family);
-      font-size: var(--jse-font-size);
+      font-family: $font-family;
+      font-size: $font-size;
     }
 
     &.jse-preview {
       flex: 1;
-      font-family: var(--jse-font-family-mono);
-      font-size: var(--jse-font-size-mono);
-      color: var(--jse-panel-color-readonly);
+      font-family: $font-family-mono;
+      font-size: $font-size-mono;
+      color: $panel-color-readonly;
       overflow: auto;
       white-space: pre-wrap;
       word-break: break-word;
diff --git a/src/lib/components/modes/textmode/codemirror/codemirror-theme.ts b/src/lib/components/modes/textmode/codemirror/codemirror-theme.ts
index 78a280d5..eff33539 100644
--- a/src/lib/components/modes/textmode/codemirror/codemirror-theme.ts
+++ b/src/lib/components/modes/textmode/codemirror/codemirror-theme.ts
@@ -2,11 +2,11 @@ import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
 import { tags } from '@lezer/highlight'
 
 const highlightStyle = HighlightStyle.define([
-  { tag: tags.propertyName, color: 'var(--jse-key-color)' }, // keys
-  { tag: tags.number, color: 'var(--jse-value-color-number)' },
-  { tag: tags.bool, color: 'var(--jse-value-color-boolean)' },
-  { tag: tags.string, color: 'var(--jse-value-color-string)' },
-  { tag: tags.keyword, color: 'var(--jse-value-color-null)' } // null
+  { tag: tags.propertyName, color: 'var(--internal-key-color)' }, // keys
+  { tag: tags.number, color: 'var(--internal-value-color-number)' },
+  { tag: tags.bool, color: 'var(--internal-value-color-boolean)' },
+  { tag: tags.string, color: 'var(--internal-value-color-string)' },
+  { tag: tags.keyword, color: 'var(--internal-value-color-null)' } // null
 ])
 
 export const highlighter = syntaxHighlighting(highlightStyle)
diff --git a/src/lib/components/modes/treemode/CollapsedItems.scss b/src/lib/components/modes/treemode/CollapsedItems.scss
index 02fd1d77..eef165f4 100644
--- a/src/lib/components/modes/treemode/CollapsedItems.scss
+++ b/src/lib/components/modes/treemode/CollapsedItems.scss
@@ -1,12 +1,13 @@
 @import '../../../styles';
 
 div.jse-collapsed-items {
+  margin-left: calc(var(--level) * $indent-size);
   $transparent-color: transparent;
-  $background-color: var(--jse-collapsed-items-background-color);
-  $color: var(--jse-collapsed-items-link-color);
+  $background-color: $collapsed-items-background-color;
+  $color: $collapsed-items-link-color;
 
-  font-family: var(--jse-font-family);
-  font-size: var(--jse-font-size);
+  font-family: $font-family;
+  font-size: $font-size;
   color: $color;
 
   // https://sharkcoder.com/visual/borders
@@ -14,7 +15,7 @@ div.jse-collapsed-items {
   padding: $padding-half;
   border: $size solid transparent;
   border-width: $size 0;
-  background-color: var(--jse-contents-background-color);
+  background-color: $contents-background-color;
   background-image: linear-gradient($background-color, $background-color),
     linear-gradient(to bottom right, $transparent-color 50.5%, $background-color 50.5%),
     linear-gradient(to bottom left, $transparent-color 50.5%, $background-color 50.5%),
@@ -60,7 +61,7 @@ div.jse-collapsed-items {
 
     &:hover,
     &:focus {
-      color: var(--jse-collapsed-items-link-color-highlight);
+      color: $collapsed-items-link-color-highlight;
     }
   }
 }
diff --git a/src/lib/components/modes/treemode/CollapsedItems.svelte b/src/lib/components/modes/treemode/CollapsedItems.svelte
index 10ff2036..16426ae2 100644
--- a/src/lib/components/modes/treemode/CollapsedItems.svelte
+++ b/src/lib/components/modes/treemode/CollapsedItems.svelte
@@ -23,11 +23,6 @@
 
   $: expandItemsSections = getExpandItemsSections(startIndex, endIndex)
 
-  // TODO: this is duplicated from the same function in JSONNode
-  function getIndentationStyle(level) {
-    return `margin-left: calc(${level} * var(--jse-indent-size))`
-  }
-
   function handleMouseMove(event) {
     // prevent the whole array from being selected whilst dragging over
     // a section with collapsed items
@@ -40,7 +35,7 @@
   class="jse-collapsed-items"
   class:jse-selected={selected}
   on:mousemove={handleMouseMove}
-  style={getIndentationStyle(path.length + 2)}
+  style:--level={path.length + 2}
 >
   <div>
     <div class="jse-text">Items {startIndex}-{endIndex}</div>
diff --git a/src/lib/components/modes/treemode/JSONKey.scss b/src/lib/components/modes/treemode/JSONKey.scss
index 3cb0bf7c..33f7a9c9 100644
--- a/src/lib/components/modes/treemode/JSONKey.scss
+++ b/src/lib/components/modes/treemode/JSONKey.scss
@@ -8,29 +8,29 @@
   outline: none;
   border-radius: 1px;
   vertical-align: top;
-  color: var(--jse-key-color);
-  cursor: var(--jse-contents-cursor);
+  color: $key-color;
+  cursor: $contents-cursor;
 
   word-break: normal;
   overflow-wrap: normal; // not anywhere as for JSONValue
   white-space: pre-wrap; // important for rendering multiple consecutive spaces
 
   &:hover {
-    background: var(--jse-hover-background-color);
+    background: $hover-background-color;
   }
 
   &:hover {
-    background: var(--jse-hover-background-color);
+    background: $hover-background-color;
   }
 
   &.jse-empty {
     min-width: 3em;
-    outline: 1px dotted var(--jse-tag-background);
+    outline: 1px dotted $tag-background;
     -moz-outline-radius: 2px;
 
     &::after {
       pointer-events: none;
-      color: var(--jse-tag-background);
+      color: $tag-background;
       content: 'key';
     }
   }
diff --git a/src/lib/components/modes/treemode/JSONNode.scss b/src/lib/components/modes/treemode/JSONNode.scss
index a8646dd3..675fbbb7 100644
--- a/src/lib/components/modes/treemode/JSONNode.scss
+++ b/src/lib/components/modes/treemode/JSONNode.scss
@@ -2,7 +2,7 @@
 
 .jse-json-node {
   position: relative;
-  color: var(--jse-text-color);
+  color: $text-color;
 
   &.jse-root {
     min-height: 100%;
@@ -12,7 +12,7 @@
     > .jse-header-outer :global(.jse-context-menu-pointer),
     > .jse-contents-outer > .jse-contents :global(.jse-context-menu-pointer) {
       top: 0;
-      right: calc(-2px - var(--jse-context-menu-pointer-size));
+      right: calc(-2px - $context-menu-pointer-size);
     }
 
     > .jse-contents-outer > .jse-contents {
@@ -30,6 +30,7 @@
   .jse-header-outer,
   .jse-footer-outer {
     display: flex;
+    margin-left: calc(var(--level) * $indent-size);
   }
 
   .jse-header {
@@ -45,6 +46,7 @@
 
   .jse-contents-outer {
     display: flex;
+    margin-left: calc(var(--level) * $indent-size);
   }
 
   .jse-header,
@@ -55,18 +57,18 @@
   }
 
   .jse-contents {
-    padding-left: var(--jse-indent-size);
+    padding-left: $indent-size;
   }
 
   .jse-footer {
     display: inline-flex;
-    padding-left: calc(var(--jse-indent-size) + $input-padding);
+    padding-left: calc($indent-size + $input-padding);
   }
 
   .jse-header,
   .jse-contents,
   .jse-footer {
-    background: var(--jse-contents-background-color);
+    background: $contents-background-color;
   }
 
   .jse-insert-selection-area {
@@ -96,6 +98,7 @@
     display: flex;
     position: relative;
     z-index: 1; // prevent the next line half-overlapping the pointer
+    margin-left: calc(var(--level) * $indent-size);
 
     max-width: 250px;
     min-width: 100px;
@@ -105,11 +108,11 @@
 
     :global(.jse-context-menu-pointer) {
       right: -$height-half;
-      background: var(--jse-context-menu-pointer-hover-background);
+      background: $context-menu-pointer-hover-background;
     }
 
     &.jse-hovered {
-      outline-color: var(--jse-context-menu-pointer-hover-background);
+      outline-color: $context-menu-pointer-hover-background;
     }
   }
 
@@ -126,7 +129,7 @@
     .jse-props .jse-contents,
     .jse-items .jse-contents,
     .jse-footer {
-      background: var(--jse-hover-background-color);
+      background: $hover-background-color;
     }
   }
 
@@ -144,12 +147,12 @@
     .jse-footer,
     :global(.jse-key),
     :global(.jse-value) {
-      background: var(--jse-selection-background-color);
-      cursor: var(--jse-contents-selected-cursor);
+      background: $selection-background-color;
+      cursor: $contents-selected-cursor;
     }
 
     .jse-expand {
-      background: var(--jse-selection-background-color);
+      background: $selection-background-color;
     }
   }
 
@@ -157,22 +160,22 @@
   &.jse-selected-key {
     > .jse-contents-outer > .jse-contents > :global(.jse-identifier) > :global(.jse-key),
     > .jse-header-outer > .jse-header > :global(.jse-identifier) > :global(.jse-key) {
-      background: var(--jse-selection-background-color);
-      cursor: var(--jse-contents-selected-cursor);
+      background: $selection-background-color;
+      cursor: $contents-selected-cursor;
     }
   }
 
   // value selected (part 1)
   &.jse-selected-value > .jse-contents-outer > .jse-contents > :global(.jse-value) {
-    background: var(--jse-selection-background-color);
-    cursor: var(--jse-contents-selected-cursor);
+    background: $selection-background-color;
+    cursor: $contents-selected-cursor;
   }
 
   :global(.jse-collapsed-items.jse-selected),
   &.jse-selected :global(.jse-collapsed-items),
   &.jse-selected-value :global(.jse-collapsed-items) {
-    background-color: var(--jse-selection-background-color);
-    --jse-collapsed-items-background-color: var(--jse-collapsed-items-selected-background-color);
+    background-color: $selection-background-color;
+    --jse-collapsed-items-background-color: #{$collapsed-items-selected-background-color};
   }
 
   // value selected (part 2)
@@ -188,12 +191,12 @@
     .jse-items .jse-header,
     .jse-items .jse-footer,
     .jse-items .jse-expand {
-      background: var(--jse-selection-background-color);
+      background: $selection-background-color;
 
       :global(.jse-key),
       :global(.jse-value) {
-        background: var(--jse-selection-background-color);
-        cursor: var(--jse-contents-selected-cursor);
+        background: $selection-background-color;
+        cursor: $contents-selected-cursor;
       }
     }
   }
@@ -204,17 +207,17 @@
 
   .jse-insert-area {
     &.jse-selected {
-      outline-color: var(--jse-context-menu-pointer-background);
+      outline-color: $context-menu-pointer-background;
     }
   }
 
   .jse-insert-area {
     &.jse-selected {
       :global(.jse-context-menu-pointer) {
-        background: var(--jse-context-menu-pointer-background);
+        background: $context-menu-pointer-background;
 
         &:hover {
-          background: var(--jse-context-menu-pointer-background-highlight);
+          background: $context-menu-pointer-background-highlight;
         }
       }
     }
@@ -224,21 +227,21 @@
 // lighter selection color when the editor doesn't have focus
 :global(.jse-main:not(.jse-focus)) {
   .jse-json-node {
-    --jse-selection-background-color: var(--jse-selection-background-inactive-color);
-    --jse-context-menu-pointer-background: var(--jse-context-menu-pointer-hover-background);
+    --jse-selection-background-color: #{$selection-background-inactive-color};
+    --jse-context-menu-pointer-background: #{$context-menu-pointer-hover-background};
   }
 }
 
 .jse-expand {
-  width: var(--jse-indent-size);
+  width: $indent-size;
   padding: 0;
   margin: 0;
   border: none;
   cursor: pointer;
   background: transparent;
-  color: var(--jse-delimiter-color);
-  font-size: var(--jse-font-size-mono);
-  height: var(--jse-line-height);
+  color: $delimiter-color;
+  font-size: $font-size-mono;
+  height: $line-height;
 
   &:hover {
     opacity: 0.8;
@@ -250,7 +253,7 @@
 .jse-index,
 .jse-bracket {
   vertical-align: top;
-  color: var(--jse-delimiter-color);
+  color: $delimiter-color;
 }
 
 .jse-index {
@@ -268,9 +271,9 @@
 .jse-tag {
   border: none;
   font-size: 80%;
-  font-family: var(--jse-font-family);
-  color: var(--jse-tag-color);
-  background: var(--jse-tag-background);
+  font-family: $font-family;
+  color: $tag-color;
+  background: $tag-background;
   border-radius: 2px;
   cursor: pointer;
   //position: relative;
diff --git a/src/lib/components/modes/treemode/JSONNode.svelte b/src/lib/components/modes/treemode/JSONNode.svelte
index 80d2d1bc..bedb7152 100644
--- a/src/lib/components/modes/treemode/JSONNode.svelte
+++ b/src/lib/components/modes/treemode/JSONNode.svelte
@@ -120,12 +120,6 @@
 
   $: root = path.length === 0
 
-  function getIndentationStyle(level) {
-    return `margin-left: calc(${level} * var(--jse-indent-size))`
-  }
-
-  $: indentationStyle = getIndentationStyle(path.length)
-
   // TODO: extract getProps into a separate function
   function getProps(
     path: JSONPath,
@@ -614,6 +608,7 @@
   )}
   data-path={encodeDataPath(path)}
   aria-selected={isNodeSelected}
+  style:--level={path.length}
   class:jse-root={root}
   class:jse-selected={isNodeSelected && isMultiSelection(selection)}
   class:jse-selected-key={isNodeSelected && isKeySelection(selection)}
@@ -628,7 +623,7 @@
   on:blur={undefined}
 >
   {#if Array.isArray(value)}
-    <div class="jse-header-outer" style={indentationStyle}>
+    <div class="jse-header-outer">
       <div class="jse-header">
         <button
           type="button"
@@ -698,7 +693,7 @@
             class:jse-hovered={hover === HOVER_INSERT_INSIDE}
             class:jse-selected={isNodeSelected && isInsideSelection(selection)}
             data-type="insert-selection-area-inside"
-            style={getIndentationStyle(path.length + 1)}
+            style:--level={path.length + 1}
             title={INSERT_EXPLANATION}
           >
             <ContextMenuPointer
@@ -739,7 +734,7 @@
           {/if}
         {/each}
       </div>
-      <div class="jse-footer-outer" style={indentationStyle}>
+      <div class="jse-footer-outer">
         <div data-type="selectable-value" class="jse-footer">
           <span class="jse-bracket">]</span>
         </div>
@@ -754,7 +749,7 @@
       </div>
     {/if}
   {:else if isObject(value)}
-    <div class="jse-header-outer" style={indentationStyle}>
+    <div class="jse-header-outer">
       <div class="jse-header">
         <button
           type="button"
@@ -819,7 +814,7 @@
             class:jse-hovered={hover === HOVER_INSERT_INSIDE}
             class:jse-selected={isNodeSelected && isInsideSelection(selection)}
             data-type="insert-selection-area-inside"
-            style={getIndentationStyle(path.length + 1)}
+            style:--level={path.length + 1}
             title={INSERT_EXPLANATION}
           >
             <ContextMenuPointer
@@ -854,7 +849,7 @@
           </svelte:self>
         {/each}
       </div>
-      <div class="jse-footer-outer" style={indentationStyle}>
+      <div class="jse-footer-outer">
         <div data-type="selectable-value" class="jse-footer">
           <div class="jse-bracket">&rbrace;</div>
         </div>
@@ -869,7 +864,7 @@
       </div>
     {/if}
   {:else}
-    <div class="jse-contents-outer" style={indentationStyle}>
+    <div class="jse-contents-outer">
       <div class="jse-contents">
         <slot name="identifier" />
         {#if !root}
@@ -908,7 +903,6 @@
       class:jse-hovered={hover === HOVER_INSERT_AFTER}
       class:jse-selected={isNodeSelected && isAfterSelection(selection)}
       data-type="insert-selection-area-after"
-      style={indentationStyle}
       title={INSERT_EXPLANATION}
     >
       <ContextMenuPointer
diff --git a/src/lib/components/modes/treemode/TreeMode.scss b/src/lib/components/modes/treemode/TreeMode.scss
index 73dab738..07eaa8cd 100644
--- a/src/lib/components/modes/treemode/TreeMode.scss
+++ b/src/lib/components/modes/treemode/TreeMode.scss
@@ -5,13 +5,13 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  background: var(--jse-background-color);
+  background: $background-color;
   min-width: 0;
   min-height: 0;
-  font-family: var(--jse-font-family-mono);
-  font-size: var(--jse-font-size-mono);
-  color: var(--jse-text-color);
-  line-height: var(--jse-line-height);
+  font-family: $font-family-mono;
+  font-size: $font-size-mono;
+  color: $text-color;
+  line-height: $line-height;
 
   .jse-hidden-input-label {
     .jse-hidden-input {
@@ -31,22 +31,22 @@
     position: relative;
     height: 0;
     top: $padding;
-    margin-right: calc(var(--jse-padding) + 20px);
+    margin-right: calc($padding + 20px);
     margin-left: $padding;
     text-align: right;
     z-index: 3; // must be above the ContextMenuButton
   }
 
   &.no-main-menu {
-    border-top: var(--jse-main-border);
+    border-top: $main-border;
   }
 
   .jse-contents {
-    border-left: var(--jse-main-border);
-    border-right: var(--jse-main-border);
+    border-left: $main-border;
+    border-right: $main-border;
 
     &:last-child {
-      border-bottom: var(--jse-main-border);
+      border-bottom: $main-border;
     }
 
     flex: 1;
@@ -63,10 +63,10 @@
     .jse-loading {
       flex: 2;
       text-align: center;
-      color: var(--jse-panel-color-readonly);
+      color: $panel-color-readonly;
       box-sizing: border-box;
-      font-family: var(--jse-font-family);
-      font-size: var(--jse-font-size);
+      font-family: $font-family;
+      font-size: $font-size;
     }
   }
 }
diff --git a/src/lib/components/modes/treemode/ValidationErrorIcon.scss b/src/lib/components/modes/treemode/ValidationErrorIcon.scss
index 800dcf50..bc2b68c8 100644
--- a/src/lib/components/modes/treemode/ValidationErrorIcon.scss
+++ b/src/lib/components/modes/treemode/ValidationErrorIcon.scss
@@ -9,5 +9,5 @@ button.jse-validation-error {
   vertical-align: top;
   display: inline-flex;
 
-  color: var(--jse-warning-color);
+  color: $warning-color;
 }
diff --git a/src/lib/components/modes/treemode/Welcome.scss b/src/lib/components/modes/treemode/Welcome.scss
index c848d771..1a3ca2b3 100644
--- a/src/lib/components/modes/treemode/Welcome.scss
+++ b/src/lib/components/modes/treemode/Welcome.scss
@@ -3,18 +3,18 @@
 .jse-welcome {
   flex: 1;
   overflow: auto;
-  font-family: var(--jse-font-family);
-  font-size: var(--jse-font-size);
+  font-family: $font-family;
+  font-size: $font-size;
 
   display: flex;
   flex-direction: column;
   align-items: center;
 
-  border-left: var(--jse-main-border);
-  border-right: var(--jse-main-border);
+  border-left: $main-border;
+  border-right: $main-border;
 
   &:last-child {
-    border-bottom: var(--jse-main-border);
+    border-bottom: $main-border;
   }
 
   .jse-space.jse-before {
@@ -36,7 +36,7 @@
     }
 
     .jse-welcome-info {
-      color: var(--jse-panel-color-readonly);
+      color: $panel-color-readonly;
     }
 
     button {
diff --git a/src/lib/components/modes/treemode/highlight/SearchResultHighlighter.scss b/src/lib/components/modes/treemode/highlight/SearchResultHighlighter.scss
index 623b23f8..e1e04e26 100644
--- a/src/lib/components/modes/treemode/highlight/SearchResultHighlighter.scss
+++ b/src/lib/components/modes/treemode/highlight/SearchResultHighlighter.scss
@@ -1,11 +1,11 @@
 @import '../../../../styles';
 
 .jse-highlight {
-  background-color: var(--jse-search-match-color);
-  outline: var(--jse-search-match-outline);
+  background-color: $search-match-color;
+  outline: $search-match-outline;
 
   &.jse-active {
-    background-color: var(--jse-search-match-active-color);
-    outline: var(--jse-search-match-active-outline);
+    background-color: $search-match-active-color;
+    outline: $search-match-active-outline;
   }
 }
diff --git a/src/lib/components/modes/treemode/menu/SearchBox.scss b/src/lib/components/modes/treemode/menu/SearchBox.scss
index 6e844a64..55cdda46 100644
--- a/src/lib/components/modes/treemode/menu/SearchBox.scss
+++ b/src/lib/components/modes/treemode/menu/SearchBox.scss
@@ -6,14 +6,14 @@ $padding-section-left: 32px;
 $input-min-width: 50px;
 
 .jse-search-box {
-  border: var(--jse-panel-border);
+  border: $panel-border;
   border-radius: $border-radius;
 
-  font-family: var(--jse-font-family);
-  font-size: var(--jse-font-size);
-  background: var(--jse-panel-background);
-  color: var(--jse-panel-color-readonly);
-  box-shadow: var(--jse-controls-box-shadow);
+  font-family: $font-family;
+  font-size: $font-size;
+  background: $panel-background;
+  color: $panel-color-readonly;
+  box-shadow: $controls-box-shadow;
   display: inline-block;
   width: 400px;
   max-width: 100%;
@@ -37,20 +37,20 @@ $input-min-width: 50px;
       margin: 0;
       cursor: pointer;
 
-      color: var(--jse-panel-button-color);
-      background: var(--jse-panel-button-background);
+      color: $panel-button-color;
+      background: $panel-button-background;
 
       &:hover {
-        color: var(--jse-panel-button-color-highlight);
-        background: var(--jse-panel-button-background-highlight);
+        color: $panel-button-color-highlight;
+        background: $panel-button-background-highlight;
       }
     }
 
     input {
-      color: var(--jse-panel-color);
-      border: var(--jse-input-border);
+      color: $panel-color;
+      border: $input-border;
       border-radius: $border-radius;
-      background: var(--jse-input-background);
+      background: $input-background;
       height: $search-size;
       padding: 0 $input-padding;
       margin: 0;
@@ -63,7 +63,7 @@ $input-min-width: 50px;
     .jse-replace-toggle {
       padding: $padding $padding-half;
       min-width: 20px;
-      background: var(--jse-panel-button-background-highlight);
+      background: $panel-button-background-highlight;
     }
 
     .jse-search-contents {
diff --git a/src/lib/plugins/value/components/BooleanToggle.scss b/src/lib/plugins/value/components/BooleanToggle.scss
index 2aebb722..558eff6f 100644
--- a/src/lib/plugins/value/components/BooleanToggle.scss
+++ b/src/lib/plugins/value/components/BooleanToggle.scss
@@ -6,7 +6,7 @@
   vertical-align: top;
   display: inline-flex;
 
-  color: var(--jse-value-color-boolean);
+  color: $value-color-boolean;
 }
 
 .jse-boolean-toggle:not(.jse-readonly) {
diff --git a/src/lib/plugins/value/components/ColorPicker.scss b/src/lib/plugins/value/components/ColorPicker.scss
index 078f7ce6..40e6b08c 100644
--- a/src/lib/plugins/value/components/ColorPicker.scss
+++ b/src/lib/plugins/value/components/ColorPicker.scss
@@ -1,17 +1,17 @@
 @import '../../../styles';
 
 .jse-color-picker-button {
-  font-size: var(--jse-font-size-mono);
+  font-size: $font-size-mono;
 
-  width: var(--jse-color-picker-button-size);
-  height: var(--jse-color-picker-button-size);
+  width: $color-picker-button-size;
+  height: $color-picker-button-size;
   box-sizing: border-box;
   padding: 0;
   margin: 2px 0 0;
   display: inline-flex;
   vertical-align: top;
 
-  border: 1px solid var(--jse-text-color);
+  border: 1px solid $text-color;
   border-radius: 2px;
   background: inherit;
   outline: none;
diff --git a/src/lib/plugins/value/components/EnumValue.scss b/src/lib/plugins/value/components/EnumValue.scss
index 94f320ea..edd2da04 100644
--- a/src/lib/plugins/value/components/EnumValue.scss
+++ b/src/lib/plugins/value/components/EnumValue.scss
@@ -2,7 +2,7 @@
 @import '../../../components/controls/EditableDivShared';
 
 .jse-enum-value {
-  background: var(--jse-hover-background-color);
+  background: $hover-background-color;
   border: none;
   padding: 0;
 
@@ -13,13 +13,13 @@
   outline: none;
 
   &.jse-selected {
-    background: var(--jse-selection-background-color);
+    background: $selection-background-color;
     color: inherit;
   }
 
   &.jse-value:focus {
     // override the color to black when editing
-    color: var(--jse-text-color);
+    color: $text-color;
   }
 }
 
diff --git a/src/lib/plugins/value/components/ReadonlyValue.scss b/src/lib/plugins/value/components/ReadonlyValue.scss
index 25031272..9b6205f7 100644
--- a/src/lib/plugins/value/components/ReadonlyValue.scss
+++ b/src/lib/plugins/value/components/ReadonlyValue.scss
@@ -9,24 +9,24 @@
   outline: none;
   border-radius: 1px;
   vertical-align: top;
-  cursor: var(--jse-contents-cursor);
+  cursor: $contents-cursor;
 
   word-break: normal;
   overflow-wrap: anywhere;
   white-space: pre-wrap; // important for rendering multiple consecutive spaces
 
   &:hover {
-    background: var(--jse-hover-background-color);
+    background: $hover-background-color;
   }
 
   &.jse-empty {
     min-width: 4em;
-    outline: 1px dotted var(--jse-tag-background);
+    outline: 1px dotted $tag-background;
     -moz-outline-radius: 2px;
 
     &::after {
       pointer-events: none;
-      color: var(--jse-tag-background);
+      color: $tag-background;
       content: 'value';
     }
   }
diff --git a/src/lib/plugins/value/components/TimestampTag.scss b/src/lib/plugins/value/components/TimestampTag.scss
index cc9527c0..583f66fd 100644
--- a/src/lib/plugins/value/components/TimestampTag.scss
+++ b/src/lib/plugins/value/components/TimestampTag.scss
@@ -6,5 +6,5 @@
   vertical-align: middle;
   display: inline-flex;
 
-  color: var(--jse-value-color-number);
+  color: $value-color-number;
 }
diff --git a/src/lib/styles.scss b/src/lib/styles.scss
index a49d6b4c..1d0e1283 100644
--- a/src/lib/styles.scss
+++ b/src/lib/styles.scss
@@ -1,3 +1,5 @@
+@import 'themes/defaults.scss';
+
 $pressed-button-margin: 2px;
 $input-padding: 5px;
 $search-box-offset: 10px;
@@ -5,9 +7,8 @@ $navigation-bar-height: 27px; // TODO: having this hardcoded is ugly
 $search-box-offset-navigation-bar: $search-box-offset + $navigation-bar-height;
 $border-radius: 3px;
 
-$padding: var(--jse-padding);
-$padding-half: calc(0.5 * var(--jse-padding));
-$padding-double: calc(2 * var(--jse-padding));
+$padding-half: calc(0.5 * $padding);
+$padding-double: calc(2 * $padding);
 $menu-padding: 5px;
 $bottom-height: 5px;
 $contents-padding: 2px;
@@ -19,8 +20,8 @@ $errors-overview-max-height: 25%;
   background: transparent;
   color: inherit;
   cursor: pointer;
-  font-family: var(--jse-font-family);
-  font-size: var(--jse-font-size);
+  font-family: $font-family;
+  font-size: $font-size;
   padding: $menu-padding;
   margin: 0;
 }
@@ -34,16 +35,16 @@ $errors-overview-max-height: 25%;
   color: inherit;
 
   &:hover {
-    background: var(--jse-context-menu-background-highlight);
+    background: $context-menu-background-highlight;
   }
 
   &:focus {
-    background: var(--jse-context-menu-background-highlight);
+    background: $context-menu-background-highlight;
     z-index: 1;
   }
 
   &:disabled {
-    color: var(--jse-context-menu-color-disabled);
+    color: $context-menu-color-disabled;
     background: unset;
   }
 
@@ -59,53 +60,53 @@ $errors-overview-max-height: 25%;
 @mixin jsoneditor-button-primary {
   @include jsoneditor-button;
 
-  background: var(--jse-button-primary-background);
-  color: var(--jse-button-primary-color);
+  background: $button-primary-background;
+  color: $button-primary-color;
   padding: $padding $padding-double;
   border-radius: $border-radius;
 
   &:hover {
-    background: var(--jse-button-primary-background-highlight);
+    background: $button-primary-background-highlight;
   }
 
   &:disabled {
-    background: var(--jse-button-primary-background-disabled);
+    background: $button-primary-background-disabled;
   }
 }
 
 @mixin jsoneditor-button-secondary {
   @include jsoneditor-button;
 
-  background: var(--jse-button-secondary-background);
-  color: var(--jse-button-secondary-color);
+  background: $button-secondary-background;
+  color: $button-secondary-color;
   padding: $padding $padding-double;
   border-radius: $border-radius;
 
   &:hover {
-    background: var(--jse-button-secondary-background-highlight);
+    background: $button-secondary-background-highlight;
   }
 
   &:disabled {
-    background: var(--jse-button-secondary-background-disabled);
+    background: $button-secondary-background-disabled;
   }
 }
 
 @mixin modal-input-mixin {
-  border: var(--jse-input-border);
+  border: $input-border;
   outline: none;
   box-sizing: border-box;
   padding: $padding-half;
-  font-family: var(--jse-font-family-mono);
-  font-size: var(--jse-font-size-mono);
+  font-family: $font-family-mono;
+  font-size: $font-size-mono;
   color: inherit;
-  background: var(--jse-input-background);
+  background: $input-background;
 
   &:focus {
-    border: var(--jse-input-border-focus);
+    border: $input-border-focus;
   }
 
   &:read-only {
-    background: var(--jse-input-background-readonly);
+    background: $input-background-readonly;
   }
 }
 
@@ -117,11 +118,11 @@ $errors-overview-max-height: 25%;
   color: inherit;
   display: flex;
   gap: $padding;
-  padding: $padding-half var(--jse-padding) $padding-half $padding-half;
+  padding: $padding-half $padding $padding-half $padding-half;
   width: 100%;
 
   &:hover {
-    background: var(--jse-table-header-background-highlight);
+    background: $table-header-background-highlight;
   }
 
   &:not(&.jse-readonly) {
@@ -136,9 +137,9 @@ $errors-overview-max-height: 25%;
   min-width: 0;
   min-height: 0;
 
-  font-family: var(--jse-font-family);
-  font-size: var(--jse-font-size);
+  font-family: $font-family;
+  font-size: $font-size;
   line-height: normal;
-  background: var(--jse-modal-background);
-  color: var(--jse-text-color);
+  background: $modal-background;
+  color: $text-color;
 }
diff --git a/src/lib/themes/defaults.scss b/src/lib/themes/defaults.scss
new file mode 100644
index 00000000..a6023fc9
--- /dev/null
+++ b/src/lib/themes/defaults.scss
@@ -0,0 +1,211 @@
+$theme: var(--jse-theme, light);
+
+/* over all fonts, sizes, and colors */
+$font-family: var(
+  --jse-font-family,
+  -apple-system,
+  BlinkMacSystemFont,
+  'Segoe UI',
+  Roboto,
+  Oxygen-Sans,
+  Ubuntu,
+  Cantarell,
+  'Helvetica Neue',
+  sans-serif
+);
+/* "consolas" for Windows, "menlo" for Mac with fallback to "monaco", 'Ubuntu Mono' for Ubuntu */
+/* (at Mac this font looks too large at 14px, but 13px is too small for the font on Windows) */
+$font-family-mono: var(
+  --jse-font-family-mono,
+  consolas,
+  menlo,
+  monaco,
+  'Ubuntu Mono',
+  'source-code-pro',
+  monospace
+);
+
+$font-size-mono: var(--jse-font-size-mono, 14px);
+
+$black: #4d4d4d;
+$white: #fff;
+
+$font-size: var(--jse-font-size, 16px);
+$font-size-main-menu: var(--jse-font-size-main-menu, 14px);
+$font-size-text-mode-search: var(--jse-font-size-text-mode-search, 80%);
+$line-height: var(--jse-line-height, calc(1em + 4px));
+$indent-size: var(--jse-indent-size, calc(1em + 4px));
+$color-picker-button-size: var(--jse-color-picker-button-size, 1em);
+$padding: var(--jse-padding, 10px);
+$theme-color: var(--jse-theme-color, #3883fa);
+$theme-color-highlight: var(--jse-theme-color-highlight, #5f9dff);
+$background-color: var(--jse-background-color, $white);
+$text-color: var(--jse-text-color, $black);
+$text-readonly: var(--jse-text-readonly, #8d8d8d);
+$text-color-inverse: var(--jse-text-color-inverse, $white);
+$error-color: var(--jse-error-color, #ee5341);
+$warning-color: var(--jse-warning-color, #fdc539);
+
+/* main, menu, modal */
+$main-border: var(--jse-main-border, 1px solid #d7d7d7);
+$menu-color: var(--jse-menu-color, $text-color-inverse);
+$menu-button-size: var(--jse-menu-button-size, 32px);
+$modal-background: var(--jse-modal-background, #f5f5f5);
+$modal-overlay-background: var(--jse-overlay-background, rgba(0, 0, 0, 0.3));
+$modal-code-background: var(--jse-modal-code-background, rgba(0, 0, 0, 0.05));
+
+/* jsoneditor modal */
+/* deprecated since 2023-12-04: --jse-modal-theme-color has been renamed to --jse-modal-editor-theme-color */
+$modal-editor-theme-color: var(
+  --jse-modal-editor-theme-color,
+  var(--jse-modal-theme-color, #707070)
+);
+$modal-editor-theme-color-highlight: var(
+  --jse-modal-editor-theme-color-highlight,
+  var(--jse-modal-theme-color-highlight, #646464)
+);
+
+/* tooltip in text mode */
+$tooltip-color: var(--jse-tooltip-color, $text-color);
+$tooltip-background: var(--jse-tooltip-background, $modal-background);
+$tooltip-border: var(--jse-tooltip-border, $main-border);
+$tooltip-action-button-color: var(--jse-tooltip-action-button-color, $text-color-inverse);
+$tooltip-action-button-background: var(--jse-tooltip-action-button-background, $black);
+
+/* panels: navigation bar, gutter, search box */
+$panel-background: var(--jse-panel-background, #ebebeb);
+$panel-color: var(--jse-panel-color, $text-color);
+$panel-color-readonly: var(--jse-panel-color-readonly, #b2b2b2);
+$panel-border: var(--jse-panel-border, $main-border);
+
+$panel-button-color: var(--jse-panel-button-color, inherit);
+$panel-button-background: var(--jse-panel-button-background, transparent);
+$panel-button-color-highlight: var(--panel-button-color-highlight, $text-color);
+$panel-button-background-highlight: var(--jse-panel-button-background-highlight, #e0e0e0);
+
+/* navigation-bar */
+$navigation-bar-background: var(--jse-navigation-bar-background, $background-color);
+$navigation-bar-background-highlight: var(--jse-navigation-bar-background-highlight, #e5e5e5);
+$navigation-bar-dropdown-color: var(--jse-navigation-bar-dropdown-color, #656565);
+
+/* context menu */
+$context-menu-background: var(--jse-context-menu-background, #656565);
+$context-menu-background-highlight: var(--jse-context-menu-background-highlight, #7a7a7a);
+$context-menu-color: var(--jse-context-menu-color, $text-color-inverse);
+$context-menu-color-disabled: var(--jse-context-menu-color-disabled, #9d9d9d);
+$context-menu-separator-color: var(--jse-context-menu-separator-color, #7a7a7a);
+$context-menu-pointer-hover-background: var(--jse-context-menu-pointer-hover-background, #b2b2b2);
+$context-menu-pointer-background: var(
+  --jse-context-menu-pointer-background,
+  $context-menu-background
+);
+$context-menu-pointer-background-highlight: var(
+  --jse-context-menu-pointer-background-highlight,
+  $context-menu-background-highlight
+);
+$context-menu-pointer-color: var(--jse-context-menu-pointer-color, $context-menu-color);
+$context-menu-pointer-size: var(--jse-context-menu-pointer-size, calc(1em + 4px));
+$context-menu-tip-background: var(--jse-context-menu-tip-background, rgba(255, 255, 255, 0.2));
+
+$context-menu-tip-color: var(--context-menu-tip-color, inherit);
+
+/* contents: json key and values */
+$key-color: var(--jse-key-color, #1a1a1a);
+$value-color: var(--jse-value-color, #1a1a1a);
+$value-color-number: var(--jse-value-color-number, #ee422e);
+$value-color-boolean: var(--jse-value-color-boolean, #ff8c00);
+$value-color-null: var(--jse-value-color-null, #004ed0);
+$value-color-string: var(--jse-value-color-string, #008000);
+$value-color-url: var(--jse-value-color-url, #008000);
+$delimiter-color: var(--jse-delimiter-color, rgba(0, 0, 0, 0.38));
+$edit-outline: var(--jse-edit-outline, 2px solid #656565);
+
+/* contents: selected or hovered */
+$contents-background-color: var(--jse-contents-background-color, transparent);
+$contents-cursor: var(--jse-contents-cursor, pointer);
+$contents-selected-cursor: var(--jse-contents-selected-cursor, grab);
+$selection-background-color: var(--jse-selection-background-color, #d3d3d3);
+$selection-background-inactive-color: var(--jse-selection-background-inactive-color, #e8e8e8);
+$hover-background-color: var(--jse-hover-background-color, rgba(0, 0, 0, 0.06));
+$active-line-background-color: var(--jse-active-line-background-color, rgba(0, 0, 0, 0.06));
+$search-match-background-color: var(--jse-search-match-background-color, #99ff7780);
+
+/* contents: section of collapsed items in an array */
+$collapsed-items-background-color: var(--jse-collapsed-items-background-color, #f5f5f5);
+$collapsed-items-selected-background-color: var(
+  --jse-collapsed-items-selected-background-color,
+  #c2c2c2
+);
+$collapsed-items-link-color: var(--jse-collapsed-items-link-color, rgba(0, 0, 0, 0.38));
+$collapsed-items-link-color-highlight: var(--jse-collapsed-items-link-color-highlight, #ee5341);
+
+/* contents: highlighting of search matches */
+$search-match-color: var(--jse-search-match-color, #ffe665);
+$search-match-outline: var(--jse-search-match-outline, 1px solid #ffd700);
+$search-match-active-color: var(--jse-search-match-active-color, #ffd700);
+$search-match-active-outline: var(--jse-search-match-active-outline, 1px solid #e1be00);
+
+/* contents: inline tags inside the JSON document */
+$tag-background: var(--jse-tag-background, rgba(0, 0, 0, 0.2));
+$tag-color: var(--jse-tag-color, $text-color-inverse);
+
+/* contents: table */
+$table-header-background: var(--jse-table-header-background, #f5f5f5);
+$table-header-background-highlight: var(--jse-table-header-background-highlight, #e8e8e8);
+$table-row-odd-background: var(--jse-table-row-odd-background, rgba(0, 0, 0, 0.05));
+
+/* controls in modals: inputs, buttons, and `a` */
+$controls-box-shadow: var(--jse-controls-box-shadow, 0 2px 6px 0 rgba(0, 0, 0, 0.24));
+$input-background: var(--jse-input-background, $background-color);
+$input-background-readonly: var(--jse-input-background-readonly, transparent);
+$input-color: var(--jse-input-color, $text-color);
+$input-border: var(--jse-input-border, 1px solid #d8dbdf);
+$input-border-focus: var(
+  --jse-input-border-focus,
+  1px solid var(--jse-input-border-focus, $theme-color)
+);
+$input-radius: var(--jse-input-radius, 3px);
+$button-background: var(--jse-button-background, #e0e0e0);
+$button-background-highlight: var(--jse-button-background-highlight, #e7e7e7);
+$button-color: var(--jse-button-color, $text-color);
+$button-primary-background: var(--jse-button-primary-background, $theme-color);
+$button-primary-background-highlight: var(
+  --jse-button-primary-background-highlight,
+  $theme-color-highlight
+);
+$button-primary-background-disabled: var(--jse-button-primary-background-disabled, #9d9d9d);
+$button-primary-color: var(--jse-button-primary-color, $text-color-inverse);
+$button-secondary-background: var(--jse-button-secondary-background, #d3d3d3);
+$button-secondary-background-highlight: var(--jse-button-secondary-background-highlight, #e1e1e1);
+$button-secondary-background-disabled: var(--jse-button-secondary-background-disabled, #9d9d9d);
+$button-secondary-color: var(--jse-button-secondary-color, $text-color);
+$a-color: var(--jse-a-color, #156fc5);
+$a-color-highlight: var(--jse-a-color-highlight, #0f508d);
+
+/* messages */
+$message-error-background: var(--jse-message-error-background, $error-color);
+$message-error-color: var(--jse-message-error-color, $white);
+$message-warning-background: var(--jse-message-warning-background, #ffde5c);
+$message-warning-color: var(--jse-message-warning-color, $black);
+$message-success-background: var(--message-success-background, #9ac45d);
+$message-success-color: var(--jse-message-success-color, $white);
+$message-info-background: var(--jse-message-info-background, #4f91ff);
+$message-info-color: var(--jse-message-info-color, $white);
+$message-action-background: var(--jse-message-action-background, rgba(255, 255, 255, 0.2));
+$message-action-background-highlight: var(
+  --jse-message-action-background-highlight,
+  rgba(255, 255, 255, 0.3)
+);
+
+/* svelte-select */
+$svelte-select-item-is-active-bg: var(--jse-item-is-active-bg, #3883fa);
+$svelte-select-border: var(--jse-svelte-select-border, 1px solid #d8dbdf);
+$svelte-select-border-radius: var(--jse-svelte-select-border-radius, 3px);
+$svelte-select-background: var(--jse-svelte-select-background, $white);
+$svelte-select-padding: var(--jse-svelte-select-padding, 0 10px);
+$svelte-select-font-size: var(--jse-svelte-select-font-size, $font-size);
+$svelte-select-multi-select-padding: var(--jse-svelte-select-multi-select-padding, 0 10px);
+
+/* color picker */
+$color-picker-background: var(--jse-color-picker-background, $panel-background);
+$color-picker-border-box-shadow: var(--jse-color-picker-border-box-shadow, #cbcbcb 0 0 0 1px);
diff --git a/src/lib/themes/jse-theme-dark.css b/src/lib/themes/jse-theme-dark.css
index 76196df6..4e097dcc 100644
--- a/src/lib/themes/jse-theme-dark.css
+++ b/src/lib/themes/jse-theme-dark.css
@@ -6,6 +6,7 @@
   --jse-theme-color-highlight: #467cd2;
   --jse-background-color: #1e1e1e;
   --jse-text-color: #d4d4d4;
+  --jse-text-color-inverse: #4d4d4d;
 
   /* main, menu, modal */
   --jse-main-border: 1px solid #4f4f4f;
@@ -97,8 +98,8 @@
   --jse-a-color-highlight: #4387c9;
 
   /* svelte-select */
-  --background: #3d3d3d;
-  --border: 1px solid #4f4f4f;
+  --jse-svelte-select-background: #3d3d3d;
+  --jse-svelte-select-border: 1px solid #4f4f4f;
   --list-background: #3d3d3d;
   --item-hover-bg: #505050;
   --multi-item-bg: #5b5b5b;
diff --git a/src/lib/themes/jse-theme-default.css b/src/lib/themes/jse-theme-default.css
deleted file mode 100644
index cfe171d3..00000000
--- a/src/lib/themes/jse-theme-default.css
+++ /dev/null
@@ -1,161 +0,0 @@
-:root {
-  --jse-theme: light;
-
-  /* over all fonts, sizes, and colors */
-  --jse-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
-    Cantarell, 'Helvetica Neue', sans-serif;
-  /* "consolas" for Windows, "menlo" for Mac with fallback to "monaco", 'Ubuntu Mono' for Ubuntu */
-  /* (at Mac this font looks too large at 14px, but 13px is too small for the font on Windows) */
-  --jse-font-family-mono: consolas, menlo, monaco, 'Ubuntu Mono', 'source-code-pro', monospace;
-  --jse-font-size-mono: 14px;
-  --jse-font-size: 16px;
-  --jse-font-size-main-menu: 14px;
-  --jse-font-size-text-mode-search: 80%;
-  --jse-line-height: calc(1em + 4px);
-  --jse-indent-size: calc(1em + 4px);
-  --jse-color-picker-button-size: 1em;
-  --jse-padding: 10px;
-  --jse-theme-color: #3883fa;
-  --jse-theme-color-highlight: #5f9dff;
-  --jse-background-color: #fff;
-  --jse-text-color: #4d4d4d;
-  --jse-text-readonly: #8d8d8d;
-  --jse-text-color-inverse: #fff;
-  --jse-error-color: #ee5341;
-  --jse-warning-color: #fdc539;
-
-  /* main, menu, modal */
-  --jse-main-border: 1px solid #d7d7d7;
-  --jse-menu-color: var(--jse-text-color-inverse);
-  --jse-menu-button-size: 32px;
-  --jse-modal-background: #f5f5f5;
-  --jse-modal-overlay-background: rgba(0, 0, 0, 0.3);
-  --jse-modal-code-background: rgba(0, 0, 0, 0.05);
-
-  /* jsoneditor modal */
-  --jse-modal-theme-color: #707070;
-  --jse-modal-theme-color-highlight: #646464;
-
-  /* tooltip in text mode */
-  --jse-tooltip-color: var(--jse-text-color);
-  --jse-tooltip-background: var(--jse-modal-background);
-  --jse-tooltip-border: var(--jse-main-border);
-  --jse-tooltip-action-button-color: var(--jse-text-color-inverse);
-  --jse-tooltip-action-button-background: #4d4d4d;
-
-  /* panels: navigation bar, gutter, search box */
-  --jse-panel-background: #ebebeb;
-  --jse-panel-color: var(--jse-text-color);
-  --jse-panel-color-readonly: #b2b2b2;
-  --jse-panel-border: var(--jse-main-border);
-  --jse-panel-button-color: inherit;
-  --jse-panel-button-background: transparent;
-  --jse-panel-button-color-highlight: var(--jse-text-color);
-  --jse-panel-button-background-highlight: #e0e0e0;
-
-  /* navigation-bar */
-  --jse-navigation-bar-background: var(--jse-background-color);
-  --jse-navigation-bar-background-highlight: #e5e5e5;
-  --jse-navigation-bar-dropdown-color: #656565;
-
-  /* context menu */
-  --jse-context-menu-background: #656565;
-  --jse-context-menu-background-highlight: #7a7a7a;
-  --jse-context-menu-color: var(--jse-text-color-inverse);
-  --jse-context-menu-color-disabled: #9d9d9d;
-  --jse-context-menu-separator-color: #7a7a7a;
-  --jse-context-menu-pointer-hover-background: #b2b2b2;
-  --jse-context-menu-pointer-background: var(--jse-context-menu-background);
-  --jse-context-menu-pointer-background-highlight: var(--jse-context-menu-background-highlight);
-  --jse-context-menu-pointer-color: var(--jse-context-menu-color);
-  --jse-context-menu-pointer-size: calc(1em + 4px);
-  --jse-context-menu-tip-background: rgba(255, 255, 255, 0.2);
-  --jse-context-menu-tip-color: inherit;
-
-  /* contents: json key and values */
-  --jse-key-color: #1a1a1a;
-  --jse-value-color: #1a1a1a;
-  --jse-value-color-number: #ee422e;
-  --jse-value-color-boolean: #ff8c00;
-  --jse-value-color-null: #004ed0;
-  --jse-value-color-string: #008000;
-  --jse-value-color-url: #008000;
-  --jse-delimiter-color: rgba(0, 0, 0, 0.38);
-  --jse-edit-outline: 2px solid #656565;
-
-  /* contents: selected or hovered */
-  --jse-contents-background-color: transparent;
-  --jse-contents-cursor: pointer;
-  --jse-contents-selected-cursor: grab;
-  --jse-selection-background-color: #d3d3d3;
-  --jse-selection-background-inactive-color: #e8e8e8;
-  --jse-hover-background-color: rgba(0, 0, 0, 0.06);
-  --jse-active-line-background-color: rgba(0, 0, 0, 0.06);
-  --jse-search-match-background-color: #99ff7780;
-
-  /* contents: section of collapsed items in an array */
-  --jse-collapsed-items-background-color: #f5f5f5;
-  --jse-collapsed-items-selected-background-color: #c2c2c2;
-  --jse-collapsed-items-link-color: rgba(0, 0, 0, 0.38);
-  --jse-collapsed-items-link-color-highlight: #ee5341;
-
-  /* contents: highlighting of search matches */
-  --jse-search-match-color: #ffe665;
-  --jse-search-match-outline: 1px solid #ffd700;
-  --jse-search-match-active-color: #ffd700;
-  --jse-search-match-active-outline: 1px solid #e1be00;
-
-  /* contents: inline tags inside the JSON document */
-  --jse-tag-background: rgba(0, 0, 0, 0.2);
-  --jse-tag-color: var(--jse-text-color-inverse);
-
-  /* contents: table */
-  --jse-table-header-background: #f5f5f5;
-  --jse-table-header-background-highlight: #e8e8e8;
-  --jse-table-row-odd-background: rgba(0, 0, 0, 0.05);
-
-  /* controls in modals: inputs, buttons, and `a` */
-  --jse-controls-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
-  --jse-input-background: var(--jse-background-color);
-  --jse-input-background-readonly: transparent;
-  --jse-input-border: 1px solid #d8dbdf;
-  --jse-input-border-focus: 1px solid var(--jse-theme-color);
-  --jse-input-radius: 3px;
-  --jse-button-background: #e0e0e0;
-  --jse-button-background-highlight: #e7e7e7;
-  --jse-button-color: var(--jse-text-color);
-  --jse-button-primary-background: var(--jse-theme-color);
-  --jse-button-primary-background-highlight: var(--jse-theme-color-highlight);
-  --jse-button-primary-background-disabled: #9d9d9d;
-  --jse-button-primary-color: var(--jse-text-color-inverse);
-  --jse-button-secondary-background: #d3d3d3;
-  --jse-button-secondary-background-highlight: #e1e1e1;
-  --jse-button-secondary-background-disabled: #9d9d9d;
-  --jse-button-secondary-color: var(--jse-text-color);
-  --jse-a-color: #156fc5;
-  --jse-a-color-highlight: #0f508d;
-
-  /* messages */
-  --jse-message-error-background: var(--jse-error-color);
-  --jse-message-error-color: var(--jse-text-color-inverse);
-  --jse-message-warning-background: #ffde5c;
-  --jse-message-warning-color: var(--jse-text-color);
-  --jse-message-success-background: #9ac45d;
-  --jse-message-success-color: var(--jse-text-color-inverse);
-  --jse-message-info-background: #4f91ff;
-  --jse-message-info-color: var(--jse-text-color-inverse);
-  --jse-message-action-background: rgba(255, 255, 255, 0.2);
-  --jse-message-action-background-highlight: rgba(255, 255, 255, 0.3);
-
-  /* svelte-select */
-  --item-is-active-bg: #3883fa;
-  --border: 1px solid #d8dbdf;
-  --border-radius: 3px;
-  --background: #fff;
-  --padding: 0 10px;
-  --multi-select-padding: 0 10px;
-
-  /* color picker */
-  --jse-color-picker-background: var(--jse-panel-background);
-  --jse-color-picker-border-box-shadow: #cbcbcb 0 0 0 1px;
-}
diff --git a/src/routes/development/+page.svelte b/src/routes/development/+page.svelte
index a50e5e3a..944d0f89 100644
--- a/src/routes/development/+page.svelte
+++ b/src/routes/development/+page.svelte
@@ -914,7 +914,7 @@ See https://github.com/sveltejs/kit/issues/981
         )};
       --jse-context-menu-pointer-background: #{desaturate(darken($background-color, 40%), 40%)};
 
-      --jse-collapsed-items-background-color: var(--jse-selection-background-inactive-color);
+      --jse-collapsed-items-background-color: #{desaturate(darken($background-color, 5%), 10%)};
       --jse-collapsed-items-selected-background-color: #{desaturate(
           darken($background-color, 20%),
           20%
diff --git a/src/routes/themes/jse-theme-big.css b/src/routes/themes/jse-theme-big.css
index 5577f619..70ed0339 100644
--- a/src/routes/themes/jse-theme-big.css
+++ b/src/routes/themes/jse-theme-big.css
@@ -11,7 +11,7 @@
 
   --jse-button-primary-background: var(--jse-theme-color);
   --jse-button-primary-background-highlight: #e74c1c;
-  --itemIsActiveBG: #fd5e2d;
+  --jse-item-is-active-bg: #fd5e2d;
 
   /* messages */
   --jse-message-error-background: #f6c5c0;