From 54e5dafe9aa4b8e208568e505f4b0752e3d8e2e3 Mon Sep 17 00:00:00 2001
From: Jos de Jong <wjosdejong@gmail.com>
Date: Tue, 22 Oct 2024 11:05:19 +0200
Subject: [PATCH] chore: update dependencies, fix jsonrepair version, resolve
 sass warnings

---
 package-lock.json                             | 278 +++++++++---------
 package.json                                  |  32 +-
 src/lib/components/JSONEditor.scss            |  13 +-
 .../__snapshots__/JSONEditor.test.ts.snap     |  20 +-
 .../components/controls/ColorPickerPopup.scss |  17 +-
 .../components/controls/DropdownButton.scss   |  29 +-
 src/lib/components/controls/EditableDiv.scss  |  15 +-
 .../controls/EditableDivShared.scss           |  17 +-
 src/lib/components/controls/JSONPreview.scss  |  15 +-
 src/lib/components/controls/Menu.scss         |  39 +--
 src/lib/components/controls/Message.scss      |  37 +--
 src/lib/components/controls/SearchBox.scss    |  49 +--
 .../controls/ValidationErrorsOverview.scss    |  25 +-
 .../controls/contextmenu/ContextMenu.scss     |  35 +--
 .../contextmenu/ContextMenuButton.scss        |   4 +-
 .../ContextMenuDropDownButton.scss            |   4 +-
 .../contextmenu/ContextMenuPointer.scss       |  25 +-
 .../controls/navigationBar/NavigationBar.scss |  27 +-
 .../navigationBar/NavigationBarDropdown.scss  |  21 +-
 .../navigationBar/NavigationBarItem.scss      |  17 +-
 .../NavigationBarPathEditor.scss              |  27 +-
 .../SelectQueryLanguage.scss                  |  15 +-
 .../components/controls/tooltip/Tooltip.scss  |  17 +-
 src/lib/components/modals/CopyPasteModal.scss |   9 +-
 src/lib/components/modals/Header.scss         |  11 +-
 .../components/modals/JSONEditorModal.scss    |  21 +-
 src/lib/components/modals/Modal.svelte        |  25 +-
 src/lib/components/modals/SortModal.scss      |  15 +-
 src/lib/components/modals/TransformModal.scss |  47 +--
 .../modals/TransformModalHeader.scss          |   4 +-
 .../components/modals/TransformWizard.scss    |  19 +-
 .../modals/repair/JSONRepairComponent.scss    |  23 +-
 .../modes/tablemode/ColumnHeader.scss         |   4 +-
 .../modes/tablemode/RefreshColumnHeader.scss  |   4 +-
 .../components/modes/tablemode/TableMode.scss |  58 ++--
 .../modes/tablemode/TableModeWelcome.scss     |  21 +-
 .../modes/tablemode/tag/InlineValue.scss      |  19 +-
 .../components/modes/textmode/StatusBar.scss  |  21 +-
 .../components/modes/textmode/TextMode.scss   | 125 ++++----
 .../modes/treemode/CollapsedItems.scss        |  25 +-
 .../components/modes/treemode/JSONKey.scss    |  11 +-
 .../components/modes/treemode/JSONNode.scss   |  69 ++---
 .../components/modes/treemode/TreeMode.scss   |  41 +--
 .../modes/treemode/ValidationErrorIcon.scss   |  15 +-
 .../components/modes/treemode/Welcome.scss    |  21 +-
 .../highlight/SearchResultHighlighter.scss    |  11 +-
 .../value/components/BooleanToggle.scss       |   5 +-
 .../plugins/value/components/ColorPicker.scss |  13 +-
 .../plugins/value/components/EnumValue.scss   |  11 +-
 .../value/components/ReadonlyValue.scss       |  11 +-
 .../value/components/TimestampTag.scss        |   5 +-
 src/lib/styles.scss                           |  66 ++---
 52 files changed, 769 insertions(+), 739 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 086dd7e4..344275b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "@codemirror/autocomplete": "^6.18.1",
-        "@codemirror/commands": "^6.7.0",
+        "@codemirror/commands": "^6.7.1",
         "@codemirror/lang-json": "^6.0.1",
         "@codemirror/language": "^6.10.3",
         "@codemirror/lint": "^6.8.2",
@@ -28,12 +28,12 @@
         "immutable-json-patch": "^6.0.1",
         "jmespath": "^0.16.0",
         "json-source-map": "^0.6.1",
-        "jsonpath-plus": "^9.0.0 || ^10.0.0",
-        "jsonrepair": "^3.8.1",
+        "jsonpath-plus": "^9.0.0 || ^10.1.0",
+        "jsonrepair": "3.8.0",
         "lodash-es": "^4.17.21",
         "memoize-one": "^6.0.0",
         "natural-compare-lite": "^1.4.0",
-        "sass": "^1.79.5",
+        "sass": "^1.80.3",
         "svelte-awesome": "^3.3.4",
         "svelte-select": "^5.8.3",
         "vanilla-picker": "^2.12.3"
@@ -44,32 +44,32 @@
         "@commitlint/cli": "19.5.0",
         "@commitlint/config-conventional": "19.5.0",
         "@eslint/eslintrc": "3.1.0",
-        "@eslint/js": "9.11.1",
+        "@eslint/js": "9.13.0",
         "@rollup/plugin-babel": "6.0.4",
-        "@rollup/plugin-commonjs": "28.0.0",
+        "@rollup/plugin-commonjs": "28.0.1",
         "@rollup/plugin-json": "6.1.0",
         "@rollup/plugin-node-resolve": "15.3.0",
         "@rollup/plugin-terser": "0.4.4",
-        "@rollup/plugin-typescript": "12.1.0",
+        "@rollup/plugin-typescript": "12.1.1",
         "@sveltejs/adapter-auto": "3.2.5",
-        "@sveltejs/kit": "2.7.0",
+        "@sveltejs/kit": "2.7.2",
         "@sveltejs/package": "2.3.5",
         "@sveltejs/vite-plugin-svelte": "3.1.2",
-        "@testing-library/jest-dom": "6.5.0",
-        "@testing-library/svelte": "5.2.3",
+        "@testing-library/jest-dom": "6.6.2",
+        "@testing-library/svelte": "5.2.4",
         "@types/cookie": "0.6.0",
         "@types/jmespath": "0.15.2",
         "@types/jsonpath": "0.2.4",
         "@types/lodash-es": "4.17.12",
         "@typescript-eslint/eslint-plugin": "7.17.0",
         "@typescript-eslint/parser": "7.17.0",
-        "@vitest/coverage-v8": "2.1.2",
+        "@vitest/coverage-v8": "2.1.3",
         "cpy-cli": "5.0.0",
         "del-cli": "6.0.0",
         "eslint": "8.57.0",
         "eslint-config-prettier": "9.1.0",
-        "eslint-plugin-import": "2.30.0",
-        "eslint-plugin-svelte": "2.44.0",
+        "eslint-plugin-import": "2.31.0",
+        "eslint-plugin-svelte": "2.46.0",
         "globals": "15.11.0",
         "husky": "9.1.6",
         "jsdom": "25.0.1",
@@ -83,11 +83,11 @@
         "standard-version": "9.5.0",
         "svelte": "^4.2.19",
         "svelte-check": "4.0.5",
-        "svelte-eslint-parser": "0.41.1",
+        "svelte-eslint-parser": "0.43.0",
         "svelte-preprocess": "6.0.3",
         "typescript": "5.6.3",
-        "vite": "5.4.8",
-        "vitest": "2.1.2"
+        "vite": "5.4.9",
+        "vitest": "2.1.3"
       },
       "peerDependencies": {
         "svelte": "^4.0.0"
@@ -1684,9 +1684,9 @@
       }
     },
     "node_modules/@codemirror/commands": {
-      "version": "6.7.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.7.0.tgz",
-      "integrity": "sha512-+cduIZ2KbesDhbykV02K25A5xIVrquSPz4UxxYBemRlAT2aW8dhwUgLDwej7q/RJUHKk4nALYcR1puecDvbdqw==",
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.7.1.tgz",
+      "integrity": "sha512-llTrboQYw5H4THfhN4U3qCnSZ1SOJ60ohhz+SzU0ADGtwlc533DtklQP0vSFaQuCPDn3BPpOd1GbbnUtwNjsrw==",
       "license": "MIT",
       "dependencies": {
         "@codemirror/language": "^6.0.0",
@@ -2546,9 +2546,9 @@
       "license": "MIT"
     },
     "node_modules/@eslint/js": {
-      "version": "9.11.1",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.11.1.tgz",
-      "integrity": "sha512-/qu+TWz8WwPWc7/HcIJKi+c+MOm46GdVaSlTTQcaqaL53+GsoA6MxWp5PtTx48qbSP7ylM1Kn7nhvkugfJvRSA==",
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.13.0.tgz",
+      "integrity": "sha512-IFLyoY4d72Z5y/6o/BazFBezupzI/taV8sGumxTAVw3lXG9A6md1Dc34T9s1FoD/an9pJH8RHbAxsaEbBed9lA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3168,9 +3168,9 @@
       }
     },
     "node_modules/@polka/url": {
-      "version": "1.0.0-next.25",
-      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
-      "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==",
+      "version": "1.0.0-next.28",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz",
+      "integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==",
       "dev": true,
       "license": "MIT"
     },
@@ -3213,19 +3213,19 @@
       }
     },
     "node_modules/@rollup/plugin-commonjs": {
-      "version": "28.0.0",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.0.tgz",
-      "integrity": "sha512-BJcu+a+Mpq476DMXG+hevgPSl56bkUoi88dKT8t3RyUp8kGuOh+2bU8Gs7zXDlu+fyZggnJ+iOBGrb/O1SorYg==",
+      "version": "28.0.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.1.tgz",
+      "integrity": "sha512-+tNWdlWKbpB3WgBN7ijjYkq9X5uhjmcvyjEght4NmH5fAU++zfQzAJ6wumLS+dNcvwEZhKx2Z+skY8m7v0wGSA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@rollup/pluginutils": "^5.0.1",
         "commondir": "^1.0.1",
         "estree-walker": "^2.0.2",
-        "fdir": "^6.1.1",
+        "fdir": "^6.2.0",
         "is-reference": "1.2.1",
         "magic-string": "^0.30.3",
-        "picomatch": "^2.3.1"
+        "picomatch": "^4.0.2"
       },
       "engines": {
         "node": ">=16.0.0 || 14 >= 14.17"
@@ -3239,19 +3239,6 @@
         }
       }
     },
-    "node_modules/@rollup/plugin-commonjs/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/@rollup/plugin-json": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.1.0.tgz",
@@ -3322,9 +3309,9 @@
       }
     },
     "node_modules/@rollup/plugin-typescript": {
-      "version": "12.1.0",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-12.1.0.tgz",
-      "integrity": "sha512-Kzs8KGJofe7cfTRODsnG1jNGxSvU8gVoNNd7Z/QaY25AYwe2LSSUpx/kPxqF38NYkpR8de3m51r9uwJpDlz6dg==",
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-12.1.1.tgz",
+      "integrity": "sha512-t7O653DpfB5MbFrqPe/VcKFFkvRuFNp9qId3xq4Eth5xlyymzxNpye2z8Hrl0RIMuXTSr5GGcFpkdlMeacUiFQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3648,9 +3635,9 @@
       }
     },
     "node_modules/@sveltejs/kit": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.7.0.tgz",
-      "integrity": "sha512-4XyY1SCB/Eyz8E9G7SEBKViysYwVtDftuA7kyQ5bmuFNPWC1KZC4988rMvaJxhH2BbCTsbLPjNOZwiEGXt8/2g==",
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.7.2.tgz",
+      "integrity": "sha512-bFwrl+0bNr0/DHQZM0INwwSPNYqDjfsKRhUoa6rj9d8tDZzszBrJ3La6/HVFxWGONEigtG+SzHXa1BEa1BLdwA==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -3665,7 +3652,7 @@
         "mrmime": "^2.0.0",
         "sade": "^1.8.1",
         "set-cookie-parser": "^2.6.0",
-        "sirv": "^2.0.4",
+        "sirv": "^3.0.0",
         "tiny-glob": "^0.2.9"
       },
       "bin": {
@@ -3861,9 +3848,9 @@
       }
     },
     "node_modules/@testing-library/jest-dom": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.5.0.tgz",
-      "integrity": "sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==",
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.6.2.tgz",
+      "integrity": "sha512-P6GJD4yqc9jZLbe98j/EkyQDTPgqftohZF5FBkHY5BUERZmcf4HeO2k0XaefEg329ux2p21i1A1DmyQ1kKw2Jw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3955,9 +3942,9 @@
       }
     },
     "node_modules/@testing-library/svelte": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/@testing-library/svelte/-/svelte-5.2.3.tgz",
-      "integrity": "sha512-y5eaD2Vp3hb729dAv3dOYNoZ9uNM0bQ0rd5AfXDWPvI+HiGmjl8ZMOuKzBopveyAkci1Kplb6kS53uZhPGEK+w==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@testing-library/svelte/-/svelte-5.2.4.tgz",
+      "integrity": "sha512-EFdy73+lULQgMJ1WolAymrxWWrPv9DWyDuDFKKlUip2PA/EXuHptzfYOKWljccFWDKhhGOu3dqNmoc2f/h/Ecg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4319,9 +4306,9 @@
       "license": "ISC"
     },
     "node_modules/@vitest/coverage-v8": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-2.1.2.tgz",
-      "integrity": "sha512-b7kHrFrs2urS0cOk5N10lttI8UdJ/yP3nB4JYTREvR5o18cR99yPpK4gK8oQgI42BVv0ILWYUSYB7AXkAUDc0g==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-2.1.3.tgz",
+      "integrity": "sha512-2OJ3c7UPoFSmBZwqD2VEkUw6A/tzPF0LmW0ZZhhB8PFxuc+9IBG/FaSM+RLEenc7ljzFvGN+G0nGQoZnh7sy2A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4342,8 +4329,8 @@
         "url": "https://opencollective.com/vitest"
       },
       "peerDependencies": {
-        "@vitest/browser": "2.1.2",
-        "vitest": "2.1.2"
+        "@vitest/browser": "2.1.3",
+        "vitest": "2.1.3"
       },
       "peerDependenciesMeta": {
         "@vitest/browser": {
@@ -4352,14 +4339,14 @@
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.1.2.tgz",
-      "integrity": "sha512-FEgtlN8mIUSEAAnlvn7mP8vzaWhEaAEvhSXCqrsijM7K6QqjB11qoRZYEd4AKSCDz8p0/+yH5LzhZ47qt+EyPg==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.1.3.tgz",
+      "integrity": "sha512-SNBoPubeCJhZ48agjXruCI57DvxcsivVDdWz+SSsmjTT4QN/DfHk3zB/xKsJqMs26bLZ/pNRLnCf0j679i0uWQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "2.1.2",
-        "@vitest/utils": "2.1.2",
+        "@vitest/spy": "2.1.3",
+        "@vitest/utils": "2.1.3",
         "chai": "^5.1.1",
         "tinyrainbow": "^1.2.0"
       },
@@ -4368,13 +4355,13 @@
       }
     },
     "node_modules/@vitest/mocker": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-2.1.2.tgz",
-      "integrity": "sha512-ExElkCGMS13JAJy+812fw1aCv2QO/LBK6CyO4WOPAzLTmve50gydOlWhgdBJPx2ztbADUq3JVI0C5U+bShaeEA==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-2.1.3.tgz",
+      "integrity": "sha512-eSpdY/eJDuOvuTA3ASzCjdithHa+GIF1L4PqtEELl6Qa3XafdMLBpBlZCIUCX2J+Q6sNmjmxtosAG62fK4BlqQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "^2.1.0-beta.1",
+        "@vitest/spy": "2.1.3",
         "estree-walker": "^3.0.3",
         "magic-string": "^0.30.11"
       },
@@ -4382,7 +4369,7 @@
         "url": "https://opencollective.com/vitest"
       },
       "peerDependencies": {
-        "@vitest/spy": "2.1.2",
+        "@vitest/spy": "2.1.3",
         "msw": "^2.3.5",
         "vite": "^5.0.0"
       },
@@ -4406,9 +4393,9 @@
       }
     },
     "node_modules/@vitest/pretty-format": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.2.tgz",
-      "integrity": "sha512-FIoglbHrSUlOJPDGIrh2bjX1sNars5HbxlcsFKCtKzu4+5lpsRhOCVcuzp0fEhAGHkPZRIXVNzPcpSlkoZ3LuA==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.3.tgz",
+      "integrity": "sha512-XH1XdtoLZCpqV59KRbPrIhFCOO0hErxrQCMcvnQete3Vibb9UeIOX02uFPfVn3Z9ZXsq78etlfyhnkmIZSzIwQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4419,13 +4406,13 @@
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.1.2.tgz",
-      "integrity": "sha512-UCsPtvluHO3u7jdoONGjOSil+uON5SSvU9buQh3lP7GgUXHp78guN1wRmZDX4wGK6J10f9NUtP6pO+SFquoMlw==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.1.3.tgz",
+      "integrity": "sha512-JGzpWqmFJ4fq5ZKHtVO3Xuy1iF2rHGV4d/pdzgkYHm1+gOzNZtqjvyiaDGJytRyMU54qkxpNzCx+PErzJ1/JqQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/utils": "2.1.2",
+        "@vitest/utils": "2.1.3",
         "pathe": "^1.1.2"
       },
       "funding": {
@@ -4433,13 +4420,13 @@
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.1.2.tgz",
-      "integrity": "sha512-xtAeNsZ++aRIYIUsek7VHzry/9AcxeULlegBvsdLncLmNCR6tR8SRjn8BbDP4naxtccvzTqZ+L1ltZlRCfBZFA==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.1.3.tgz",
+      "integrity": "sha512-qWC2mWc7VAXmjAkEKxrScWHWFyCQx/cmiZtuGqMi+WwqQJ2iURsVY4ZfAK6dVo6K2smKRU6l3BPwqEBvhnpQGg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "2.1.2",
+        "@vitest/pretty-format": "2.1.3",
         "magic-string": "^0.30.11",
         "pathe": "^1.1.2"
       },
@@ -4448,9 +4435,9 @@
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.1.2.tgz",
-      "integrity": "sha512-GSUi5zoy+abNRJwmFhBDC0yRuVUn8WMlQscvnbbXdKLXX9dE59YbfwXxuJ/mth6eeqIzofU8BB5XDo/Ns/qK2A==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.1.3.tgz",
+      "integrity": "sha512-Nb2UzbcUswzeSP7JksMDaqsI43Sj5+Kry6ry6jQJT4b5gAK+NS9NED6mDb8FlMRCX8m5guaHCDZmqYMMWRy5nQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4461,13 +4448,13 @@
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.2.tgz",
-      "integrity": "sha512-zMO2KdYy6mx56btx9JvAqAZ6EyS3g49krMPPrgOp1yxGZiA93HumGk+bZ5jIZtOg5/VBYl5eBmGRQHqq4FG6uQ==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.3.tgz",
+      "integrity": "sha512-xpiVfDSg1RrYT0tX6czgerkpcKFmFOF/gCr30+Mve5V2kewCy4Prn1/NDMSRwaSmT7PRaOF83wu+bEtsY1wrvA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "2.1.2",
+        "@vitest/pretty-format": "2.1.3",
         "loupe": "^3.1.1",
         "tinyrainbow": "^1.2.0"
       },
@@ -7624,9 +7611,9 @@
       }
     },
     "node_modules/eslint-module-utils": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.11.0.tgz",
-      "integrity": "sha512-gbBE5Hitek/oG6MUVj6sFuzEjA/ClzNflVrLovHi/JgLdC7fiN5gLAY1WIPW1a0V5I999MnsrvVrCOGmmVqDBQ==",
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz",
+      "integrity": "sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7652,9 +7639,9 @@
       }
     },
     "node_modules/eslint-plugin-import": {
-      "version": "2.30.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.30.0.tgz",
-      "integrity": "sha512-/mHNE9jINJfiD2EKkg1BKyPyUk4zdnT54YgbOgfjSakWT5oyX/qQLVNTkehyfpcMxZXMy1zyonZ2v7hZTX43Yw==",
+      "version": "2.31.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz",
+      "integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7666,7 +7653,7 @@
         "debug": "^3.2.7",
         "doctrine": "^2.1.0",
         "eslint-import-resolver-node": "^0.3.9",
-        "eslint-module-utils": "^2.9.0",
+        "eslint-module-utils": "^2.12.0",
         "hasown": "^2.0.2",
         "is-core-module": "^2.15.1",
         "is-glob": "^4.0.3",
@@ -7675,13 +7662,14 @@
         "object.groupby": "^1.0.3",
         "object.values": "^1.2.0",
         "semver": "^6.3.1",
+        "string.prototype.trimend": "^1.0.8",
         "tsconfig-paths": "^3.15.0"
       },
       "engines": {
         "node": ">=4"
       },
       "peerDependencies": {
-        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8"
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9"
       }
     },
     "node_modules/eslint-plugin-import/node_modules/debug": {
@@ -7708,9 +7696,9 @@
       }
     },
     "node_modules/eslint-plugin-svelte": {
-      "version": "2.44.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-2.44.0.tgz",
-      "integrity": "sha512-wav4MOs02vBb1WjvTCYItwJCxMkuk2Z4p+K/eyjL0N/z7ahXLP+0LtQQjiKc2ezuif7GnZLbD1F3o1VHzSvdVg==",
+      "version": "2.46.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-2.46.0.tgz",
+      "integrity": "sha512-1A7iEMkzmCZ9/Iz+EAfOGYL8IoIG6zeKEq1SmpxGeM5SXmoQq+ZNnCpXFVJpsxPWYx8jIVGMerQMzX20cqUl0g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7718,13 +7706,13 @@
         "@jridgewell/sourcemap-codec": "^1.4.15",
         "eslint-compat-utils": "^0.5.1",
         "esutils": "^2.0.3",
-        "known-css-properties": "^0.34.0",
+        "known-css-properties": "^0.35.0",
         "postcss": "^8.4.38",
         "postcss-load-config": "^3.1.4",
         "postcss-safe-parser": "^6.0.0",
         "postcss-selector-parser": "^6.1.0",
         "semver": "^7.6.2",
-        "svelte-eslint-parser": "^0.41.1"
+        "svelte-eslint-parser": "^0.43.0"
       },
       "engines": {
         "node": "^14.17.0 || >=16.0.0"
@@ -7734,7 +7722,7 @@
       },
       "peerDependencies": {
         "eslint": "^7.0.0 || ^8.0.0-0 || ^9.0.0-0",
-        "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0-next.191"
+        "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0"
       },
       "peerDependenciesMeta": {
         "svelte": {
@@ -10182,27 +10170,27 @@
       "license": "MIT"
     },
     "node_modules/jsonpath-plus": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/jsonpath-plus/-/jsonpath-plus-9.0.0.tgz",
-      "integrity": "sha512-bqE77VIDStrOTV/czspZhTn+o27Xx9ZJRGVkdVShEtPoqsIx5yALv3lWVU6y+PqYvWPJNWE7ORCQheQkEe0DDA==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/jsonpath-plus/-/jsonpath-plus-10.1.0.tgz",
+      "integrity": "sha512-gHfV1IYqH8uJHYVTs8BJX1XKy2/rR93+f8QQi0xhx95aCiXn1ettYAd5T+7FU6wfqyDoX/wy0pm/fL3jOKJ9Lg==",
       "license": "MIT",
       "dependencies": {
         "@jsep-plugin/assignment": "^1.2.1",
         "@jsep-plugin/regex": "^1.0.3",
-        "jsep": "^1.3.8"
+        "jsep": "^1.3.9"
       },
       "bin": {
         "jsonpath": "bin/jsonpath-cli.js",
         "jsonpath-plus": "bin/jsonpath-cli.js"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=18.0.0"
       }
     },
     "node_modules/jsonrepair": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/jsonrepair/-/jsonrepair-3.8.1.tgz",
-      "integrity": "sha512-5wnjaO53EJOhfLFY92nvBz2B9gqF9ql/D4HKUb1WOSBaqtVcAifFfmurblnhCJn/ySqKFA8U3n7nhGMAu/hEjQ==",
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/jsonrepair/-/jsonrepair-3.8.0.tgz",
+      "integrity": "sha512-89lrxpwp+IEcJ6kwglF0HH3Tl17J08JEpYfXnvvjdp4zV4rjSoGu2NdQHxBs7yTOk3ETjTn9du48pBy8iBqj1w==",
       "license": "ISC",
       "bin": {
         "jsonrepair": "bin/cli.js"
@@ -10269,9 +10257,9 @@
       }
     },
     "node_modules/known-css-properties": {
-      "version": "0.34.0",
-      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.34.0.tgz",
-      "integrity": "sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==",
+      "version": "0.35.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.35.0.tgz",
+      "integrity": "sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==",
       "dev": true,
       "license": "MIT"
     },
@@ -11389,8 +11377,6 @@
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -12262,9 +12248,9 @@
       "license": "MIT"
     },
     "node_modules/sass": {
-      "version": "1.79.5",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.79.5.tgz",
-      "integrity": "sha512-W1h5kp6bdhqFh2tk3DsI771MoEJjvrSY/2ihJRJS4pjIyfJCw0nTsxqhnrUzaLMOJjFchj8rOvraI/YUVjtx5g==",
+      "version": "1.80.3",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.3.tgz",
+      "integrity": "sha512-ptDWyVmDMVielpz/oWy3YP3nfs7LpJTHIJZboMVs8GEC9eUmtZTZhMHlTW98wY4aEorDfjN38+Wr/XjskFWcfA==",
       "license": "MIT",
       "dependencies": {
         "@parcel/watcher": "^2.4.1",
@@ -12426,9 +12412,9 @@
       }
     },
     "node_modules/sirv": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
-      "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.0.tgz",
+      "integrity": "sha512-BPwJGUeDaDCHihkORDchNyyTvWFhcusy1XMmhEVTQTwGeybFbp8YEmB+njbPnth1FibULBSBVwCQni25XlCUDg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -12437,7 +12423,7 @@
         "totalist": "^3.0.0"
       },
       "engines": {
-        "node": ">= 10"
+        "node": ">=18"
       }
     },
     "node_modules/slash": {
@@ -13138,9 +13124,9 @@
       }
     },
     "node_modules/svelte-eslint-parser": {
-      "version": "0.41.1",
-      "resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.41.1.tgz",
-      "integrity": "sha512-08ndI6zTghzI8SuJAFpvMbA/haPSGn3xz19pjre19yYMw8Nw/wQJ2PrZBI/L8ijGTgtkWCQQiLLy+Z1tfaCwNA==",
+      "version": "0.43.0",
+      "resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.43.0.tgz",
+      "integrity": "sha512-GpU52uPKKcVnh8tKN5P4UZpJ/fUDndmq7wfsvoVXsyP+aY0anol7Yqo01fyrlaWGMFfm4av5DyrjlaXdLRJvGA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -13157,7 +13143,7 @@
         "url": "https://github.com/sponsors/ota-meshi"
       },
       "peerDependencies": {
-        "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0-next.191"
+        "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0"
       },
       "peerDependenciesMeta": {
         "svelte": {
@@ -13884,9 +13870,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.8",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
-      "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==",
+      "version": "5.4.9",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.9.tgz",
+      "integrity": "sha512-20OVpJHh0PAM0oSOELa5GaZNWeDjcAvQjGXy2Uyr+Tp+/D2/Hdz6NLgpJLsarPTA2QJ6v8mX2P1ZfbsSKvdMkg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -13944,9 +13930,9 @@
       }
     },
     "node_modules/vite-node": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.1.2.tgz",
-      "integrity": "sha512-HPcGNN5g/7I2OtPjLqgOtCRu/qhVvBxTUD3qzitmL0SrG1cWFzxzhMDWussxSbrRYWqnKf8P2jiNhPMSN+ymsQ==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.1.3.tgz",
+      "integrity": "sha512-I1JadzO+xYX887S39Do+paRePCKoiDrWRRjp9kkG5he0t7RXNvPAJPCQSJqbGN4uCrFFeS3Kj3sLqY8NMYBEdA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -13981,19 +13967,19 @@
       }
     },
     "node_modules/vitest": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.1.2.tgz",
-      "integrity": "sha512-veNjLizOMkRrJ6xxb+pvxN6/QAWg95mzcRjtmkepXdN87FNfxAss9RKe2far/G9cQpipfgP2taqg0KiWsquj8A==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.1.3.tgz",
+      "integrity": "sha512-Zrxbg/WiIvUP2uEzelDNTXmEMJXuzJ1kCpbDvaKByFA9MNeO95V+7r/3ti0qzJzrxdyuUw5VduN7k+D3VmVOSA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/expect": "2.1.2",
-        "@vitest/mocker": "2.1.2",
-        "@vitest/pretty-format": "^2.1.2",
-        "@vitest/runner": "2.1.2",
-        "@vitest/snapshot": "2.1.2",
-        "@vitest/spy": "2.1.2",
-        "@vitest/utils": "2.1.2",
+        "@vitest/expect": "2.1.3",
+        "@vitest/mocker": "2.1.3",
+        "@vitest/pretty-format": "^2.1.3",
+        "@vitest/runner": "2.1.3",
+        "@vitest/snapshot": "2.1.3",
+        "@vitest/spy": "2.1.3",
+        "@vitest/utils": "2.1.3",
         "chai": "^5.1.1",
         "debug": "^4.3.6",
         "magic-string": "^0.30.11",
@@ -14004,7 +13990,7 @@
         "tinypool": "^1.0.0",
         "tinyrainbow": "^1.2.0",
         "vite": "^5.0.0",
-        "vite-node": "2.1.2",
+        "vite-node": "2.1.3",
         "why-is-node-running": "^2.3.0"
       },
       "bin": {
@@ -14019,8 +14005,8 @@
       "peerDependencies": {
         "@edge-runtime/vm": "*",
         "@types/node": "^18.0.0 || >=20.0.0",
-        "@vitest/browser": "2.1.2",
-        "@vitest/ui": "2.1.2",
+        "@vitest/browser": "2.1.3",
+        "@vitest/ui": "2.1.3",
         "happy-dom": "*",
         "jsdom": "*"
       },
diff --git a/package.json b/package.json
index 033c0517..05cb6dcd 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,7 @@
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.18.1",
-    "@codemirror/commands": "^6.7.0",
+    "@codemirror/commands": "^6.7.1",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/language": "^6.10.3",
     "@codemirror/lint": "^6.8.2",
@@ -94,12 +94,12 @@
     "immutable-json-patch": "^6.0.1",
     "jmespath": "^0.16.0",
     "json-source-map": "^0.6.1",
-    "jsonpath-plus": "^9.0.0 || ^10.0.0",
-    "jsonrepair": "^3.8.1",
+    "jsonpath-plus": "^9.0.0 || ^10.1.0",
+    "jsonrepair": "3.8.0",
     "lodash-es": "^4.17.21",
     "memoize-one": "^6.0.0",
     "natural-compare-lite": "^1.4.0",
-    "sass": "^1.79.5",
+    "sass": "^1.80.3",
     "svelte-awesome": "^3.3.4",
     "svelte-select": "^5.8.3",
     "vanilla-picker": "^2.12.3"
@@ -113,32 +113,32 @@
     "@commitlint/cli": "19.5.0",
     "@commitlint/config-conventional": "19.5.0",
     "@eslint/eslintrc": "3.1.0",
-    "@eslint/js": "9.11.1",
+    "@eslint/js": "9.13.0",
     "@rollup/plugin-babel": "6.0.4",
-    "@rollup/plugin-commonjs": "28.0.0",
+    "@rollup/plugin-commonjs": "28.0.1",
     "@rollup/plugin-json": "6.1.0",
     "@rollup/plugin-node-resolve": "15.3.0",
     "@rollup/plugin-terser": "0.4.4",
-    "@rollup/plugin-typescript": "12.1.0",
+    "@rollup/plugin-typescript": "12.1.1",
     "@sveltejs/adapter-auto": "3.2.5",
-    "@sveltejs/kit": "2.7.0",
+    "@sveltejs/kit": "2.7.2",
     "@sveltejs/package": "2.3.5",
     "@sveltejs/vite-plugin-svelte": "3.1.2",
-    "@testing-library/jest-dom": "6.5.0",
-    "@testing-library/svelte": "5.2.3",
+    "@testing-library/jest-dom": "6.6.2",
+    "@testing-library/svelte": "5.2.4",
     "@types/cookie": "0.6.0",
     "@types/jmespath": "0.15.2",
     "@types/jsonpath": "0.2.4",
     "@types/lodash-es": "4.17.12",
     "@typescript-eslint/eslint-plugin": "7.17.0",
     "@typescript-eslint/parser": "7.17.0",
-    "@vitest/coverage-v8": "2.1.2",
+    "@vitest/coverage-v8": "2.1.3",
     "cpy-cli": "5.0.0",
     "del-cli": "6.0.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-import": "2.30.0",
-    "eslint-plugin-svelte": "2.44.0",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-svelte": "2.46.0",
     "globals": "15.11.0",
     "husky": "9.1.6",
     "jsdom": "25.0.1",
@@ -152,10 +152,10 @@
     "standard-version": "9.5.0",
     "svelte": "^4.2.19",
     "svelte-check": "4.0.5",
-    "svelte-eslint-parser": "0.41.1",
+    "svelte-eslint-parser": "0.43.0",
     "svelte-preprocess": "6.0.3",
     "typescript": "5.6.3",
-    "vite": "5.4.8",
-    "vitest": "2.1.2"
+    "vite": "5.4.9",
+    "vitest": "2.1.3"
   }
 }
diff --git a/src/lib/components/JSONEditor.scss b/src/lib/components/JSONEditor.scss
index d29adde6..cbaf3962 100644
--- a/src/lib/components/JSONEditor.scss
+++ b/src/lib/components/JSONEditor.scss
@@ -1,12 +1,13 @@
-@import '../styles';
+@use '../styles';
+@use '../themes/defaults';
 
 .jse-main {
   width: 100%;
   height: 100%;
   min-width: 0;
-  min-height: $contents-min-height;
-  font-family: $font-family;
-  font-size: $font-size;
+  min-height: styles.$contents-min-height;
+  font-family: defaults.$font-family;
+  font-size: defaults.$font-size;
   line-height: normal;
   position: relative;
   display: flex;
@@ -14,7 +15,7 @@
 
   // lighter selection color when the editor doesn't have focus
   &:not(.jse-focus) {
-    --jse-selection-background-color: #{$selection-background-inactive-color};
-    --jse-context-menu-pointer-background: #{$context-menu-pointer-hover-background};
+    --jse-selection-background-color: #{defaults.$selection-background-inactive-color};
+    --jse-context-menu-pointer-background: #{defaults.$context-menu-pointer-hover-background};
   }
 }
diff --git a/src/lib/components/__snapshots__/JSONEditor.test.ts.snap b/src/lib/components/__snapshots__/JSONEditor.test.ts.snap
index 2ce22bb8..28fb2801 100644
--- a/src/lib/components/__snapshots__/JSONEditor.test.ts.snap
+++ b/src/lib/components/__snapshots__/JSONEditor.test.ts.snap
@@ -302,7 +302,7 @@ exports[`JSONEditor > render table mode 1`] = `
                   class="jse-value-outer svelte-u14cgx"
                 >
                   <div
-                    class="jse-value jse-number jse-table-cell svelte-9ohlz8"
+                    class="jse-value jse-number jse-table-cell svelte-c0g9qz"
                     data-type="selectable-value"
                     role="button"
                     tabindex="-1"
@@ -325,7 +325,7 @@ exports[`JSONEditor > render table mode 1`] = `
                   class="jse-value-outer svelte-u14cgx"
                 >
                   <div
-                    class="jse-value jse-string jse-empty jse-table-cell svelte-9ohlz8"
+                    class="jse-value jse-string jse-empty jse-table-cell svelte-c0g9qz"
                     data-type="selectable-value"
                     role="button"
                     tabindex="-1"
@@ -360,7 +360,7 @@ exports[`JSONEditor > render table mode 1`] = `
                   class="jse-value-outer svelte-u14cgx"
                 >
                   <div
-                    class="jse-value jse-number jse-table-cell svelte-9ohlz8"
+                    class="jse-value jse-number jse-table-cell svelte-c0g9qz"
                     data-type="selectable-value"
                     role="button"
                     tabindex="-1"
@@ -383,7 +383,7 @@ exports[`JSONEditor > render table mode 1`] = `
                   class="jse-value-outer svelte-u14cgx"
                 >
                   <div
-                    class="jse-value jse-string jse-table-cell svelte-9ohlz8"
+                    class="jse-value jse-string jse-table-cell svelte-c0g9qz"
                     data-type="selectable-value"
                     role="button"
                     tabindex="-1"
@@ -418,7 +418,7 @@ exports[`JSONEditor > render table mode 1`] = `
                   class="jse-value-outer svelte-u14cgx"
                 >
                   <div
-                    class="jse-value jse-number jse-table-cell svelte-9ohlz8"
+                    class="jse-value jse-number jse-table-cell svelte-c0g9qz"
                     data-type="selectable-value"
                     role="button"
                     tabindex="-1"
@@ -441,7 +441,7 @@ exports[`JSONEditor > render table mode 1`] = `
                   class="jse-value-outer svelte-u14cgx"
                 >
                   <div
-                    class="jse-value jse-string jse-empty jse-table-cell svelte-9ohlz8"
+                    class="jse-value jse-string jse-empty jse-table-cell svelte-c0g9qz"
                     data-type="selectable-value"
                     role="button"
                     tabindex="-1"
@@ -1607,7 +1607,7 @@ exports[`JSONEditor > render tree mode 1`] = `
                         class="jse-value-outer svelte-1n9xu6u"
                       >
                         <div
-                          class="jse-value jse-number svelte-9ohlz8"
+                          class="jse-value jse-number svelte-c0g9qz"
                           data-type="selectable-value"
                           role="button"
                           tabindex="-1"
@@ -1781,7 +1781,7 @@ exports[`JSONEditor > render tree mode 1`] = `
                         class="jse-value-outer svelte-1n9xu6u"
                       >
                         <div
-                          class="jse-value jse-number svelte-9ohlz8"
+                          class="jse-value jse-number svelte-c0g9qz"
                           data-type="selectable-value"
                           role="button"
                           tabindex="-1"
@@ -1845,7 +1845,7 @@ exports[`JSONEditor > render tree mode 1`] = `
                         class="jse-value-outer svelte-1n9xu6u"
                       >
                         <div
-                          class="jse-value jse-string svelte-9ohlz8"
+                          class="jse-value jse-string svelte-c0g9qz"
                           data-type="selectable-value"
                           role="button"
                           tabindex="-1"
@@ -2019,7 +2019,7 @@ exports[`JSONEditor > render tree mode 1`] = `
                         class="jse-value-outer svelte-1n9xu6u"
                       >
                         <div
-                          class="jse-value jse-number svelte-9ohlz8"
+                          class="jse-value jse-number svelte-c0g9qz"
                           data-type="selectable-value"
                           role="button"
                           tabindex="-1"
diff --git a/src/lib/components/controls/ColorPickerPopup.scss b/src/lib/components/controls/ColorPickerPopup.scss
index a8e0a506..e7a9469f 100644
--- a/src/lib/components/controls/ColorPickerPopup.scss
+++ b/src/lib/components/controls/ColorPickerPopup.scss
@@ -1,10 +1,11 @@
-@import '../../styles';
+@use '../../styles';
+@use '../../themes/defaults';
 
 .jse-color-picker-popup {
   :global(.picker_wrapper.popup),
   :global(.picker_wrapper.popup .picker_arrow::before),
   :global(.picker_wrapper.popup .picker_arrow::after) {
-    background: $color-picker-background;
+    background: defaults.$color-picker-background;
     line-height: normal;
   }
 
@@ -13,20 +14,20 @@
   :global(.picker_editor input),
   :global(.picker_sample),
   :global(.picker_done button) {
-    box-shadow: $color-picker-border-box-shadow;
+    box-shadow: defaults.$color-picker-border-box-shadow;
   }
 
   :global(.picker_editor input) {
-    background: $background-color;
-    color: $text-color;
+    background: defaults.$background-color;
+    color: defaults.$text-color;
   }
 
   :global(.picker_done button) {
-    background: $button-background;
-    color: $button-color;
+    background: defaults.$button-background;
+    color: defaults.$button-color;
   }
 
   :global(.picker_done button:hover) {
-    background: $button-background-highlight;
+    background: defaults.$button-background-highlight;
   }
 }
diff --git a/src/lib/components/controls/DropdownButton.scss b/src/lib/components/controls/DropdownButton.scss
index ea9a90a1..e3fe4722 100644
--- a/src/lib/components/controls/DropdownButton.scss
+++ b/src/lib/components/controls/DropdownButton.scss
@@ -1,13 +1,14 @@
-@import '../../styles';
+@use '../../styles';
+@use '../../themes/defaults';
 
 .jse-dropdown-button {
   flex: 1;
   line-height: normal;
 
-  $background: $context-menu-background;
-  $background-highlight: $context-menu-background-highlight;
+  $background: defaults.$context-menu-background;
+  $background-highlight: defaults.$context-menu-background-highlight;
 
-  @include jsoneditor-button;
+  @include styles.jsoneditor-button;
   position: relative;
   padding: 0;
   display: flex;
@@ -24,11 +25,11 @@
   }
 
   button.jse-open-dropdown {
-    @include jsoneditor-button;
+    @include styles.jsoneditor-button;
 
     width: 2em;
-    background: $context-menu-background;
-    color: $context-menu-color;
+    background: defaults.$context-menu-background;
+    color: defaults.$context-menu-color;
     border-radius: 0;
 
     &.jse-visible {
@@ -36,7 +37,7 @@
     }
 
     &:hover {
-      background: $context-menu-background-highlight;
+      background: defaults.$context-menu-background-highlight;
     }
 
     &:focus {
@@ -44,7 +45,7 @@
     }
 
     &:disabled {
-      color: $context-menu-color-disabled;
+      color: defaults.$context-menu-color-disabled;
       background: unset;
     }
   }
@@ -56,19 +57,19 @@
     left: 0;
     z-index: 1;
     background: $background;
-    color: $context-menu-color;
-    box-shadow: $controls-box-shadow;
+    color: defaults.$context-menu-color;
+    box-shadow: defaults.$controls-box-shadow;
 
     &.jse-visible {
       display: block;
     }
 
     button {
-      @include jsoneditor-button;
+      @include styles.jsoneditor-button;
 
       width: 100%;
       text-align: left;
-      padding: $padding;
+      padding: defaults.$padding;
       margin: 0;
 
       &:hover {
@@ -76,7 +77,7 @@
       }
 
       &:disabled {
-        color: $context-menu-color-disabled;
+        color: defaults.$context-menu-color-disabled;
         background: unset;
       }
     }
diff --git a/src/lib/components/controls/EditableDiv.scss b/src/lib/components/controls/EditableDiv.scss
index 575cb836..175830f4 100644
--- a/src/lib/components/controls/EditableDiv.scss
+++ b/src/lib/components/controls/EditableDiv.scss
@@ -1,10 +1,11 @@
-@import '../../styles';
-@import './EditableDivShared';
+@use '../../styles';
+@use 'EditableDivShared';
+@use '../../themes/defaults';
 
 // for key and value
 div.jse-editable-div {
   min-width: 2em;
-  padding: 0 $input-padding;
+  padding: 0 styles.$input-padding;
   box-sizing: border-box;
   outline: none;
   border-radius: 1px;
@@ -25,8 +26,8 @@ div.jse-editable-div {
   }
 
   &[contenteditable='true'] {
-    outline: $edit-outline;
-    background: $background-color;
+    outline: defaults.$edit-outline;
+    background: defaults.$background-color;
     position: relative;
     display: inline-block;
     border-radius: 0;
@@ -35,13 +36,13 @@ div.jse-editable-div {
 
   &.jse-empty {
     &:not(:focus) {
-      outline: 1px dotted $tag-background;
+      outline: 1px dotted defaults.$tag-background;
       -moz-outline-radius: 2px;
     }
 
     &::after {
       pointer-events: none;
-      color: $tag-background;
+      color: defaults.$tag-background;
     }
   }
 }
diff --git a/src/lib/components/controls/EditableDivShared.scss b/src/lib/components/controls/EditableDivShared.scss
index 26f63c33..90c57b60 100644
--- a/src/lib/components/controls/EditableDivShared.scss
+++ b/src/lib/components/controls/EditableDivShared.scss
@@ -1,34 +1,35 @@
-@import '../../styles';
+@use '../../styles';
+@use '../../themes/defaults';
 
 .jse-value {
   &.jse-string {
-    color: $value-color-string;
+    color: defaults.$value-color-string;
   }
 
   &.jse-object,
   &.jse-array {
     min-width: 16px;
-    color: $delimiter-color;
+    color: defaults.$delimiter-color;
   }
 
   &.jse-number {
-    color: $value-color-number;
+    color: defaults.$value-color-number;
   }
 
   &.jse-boolean {
-    color: $value-color-boolean;
+    color: defaults.$value-color-boolean;
   }
 
   &.jse-null {
-    color: $value-color-null;
+    color: defaults.$value-color-null;
   }
 
   &.jse-invalid {
-    color: $text-color;
+    color: defaults.$text-color;
   }
 
   &.jse-url {
-    color: $value-color-url;
+    color: defaults.$value-color-url;
     text-decoration: underline;
   }
 }
diff --git a/src/lib/components/controls/JSONPreview.scss b/src/lib/components/controls/JSONPreview.scss
index c8fe065a..a600d019 100644
--- a/src/lib/components/controls/JSONPreview.scss
+++ b/src/lib/components/controls/JSONPreview.scss
@@ -1,16 +1,17 @@
-@import '../../styles';
+@use '../../styles';
+@use '../../themes/defaults';
 
 .jse-json-preview {
   flex: 1;
-  font-family: $font-family-mono;
-  font-size: $font-size-mono;
-  color: $panel-color-readonly;
+  font-family: defaults.$font-family-mono;
+  font-size: defaults.$font-size-mono;
+  color: defaults.$panel-color-readonly;
   overflow: auto;
   white-space: pre-wrap;
   padding: 2px;
 
   // TODO: JSONPreview shouldn't add borders I think
-  border-left: $main-border;
-  border-right: $main-border;
-  border-bottom: $main-border;
+  border-left: defaults.$main-border;
+  border-right: defaults.$main-border;
+  border-bottom: defaults.$main-border;
 }
diff --git a/src/lib/components/controls/Menu.scss b/src/lib/components/controls/Menu.scss
index 2a141654..eba11a4c 100644
--- a/src/lib/components/controls/Menu.scss
+++ b/src/lib/components/controls/Menu.scss
@@ -1,10 +1,11 @@
-@import '../../styles';
+@use '../../styles';
+@use '../../themes/defaults';
 
 .jse-menu {
-  background: $theme-color;
-  font-family: $font-family;
-  font-size: $font-size-main-menu;
-  color: $menu-color;
+  background: defaults.$theme-color;
+  font-family: defaults.$font-family;
+  font-size: defaults.$font-size-main-menu;
+  color: defaults.$menu-color;
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
@@ -20,9 +21,9 @@
     color: inherit;
     cursor: pointer;
 
-    width: $menu-button-size;
-    height: $menu-button-size;
-    padding: $padding-half;
+    width: defaults.$menu-button-size;
+    height: defaults.$menu-button-size;
+    padding: styles.$padding-half;
     margin: 0;
     border-radius: 0;
 
@@ -33,23 +34,23 @@
 
     &:hover,
     &:focus {
-      background: $theme-color-highlight;
+      background: defaults.$theme-color-highlight;
     }
 
     &:disabled {
-      color: $menu-color;
+      color: defaults.$menu-color;
       opacity: 0.5;
 
       background: transparent;
     }
 
     &.jse-group-button {
-      $group-button-color: $menu-color;
+      $group-button-color: defaults.$menu-color;
 
       width: auto;
-      height: calc($menu-button-size - $padding);
-      margin: $padding-half 0;
-      padding: 0 $padding-half 1px; // 1px bottom padding for better center alignment (text baseline)
+      height: calc(defaults.$menu-button-size - defaults.$padding);
+      margin: styles.$padding-half 0;
+      padding: 0 styles.$padding-half 1px; // 1px bottom padding for better center alignment (text baseline)
       border: 1px solid $group-button-color;
 
       &:not(.jse-last) {
@@ -57,21 +58,21 @@
       }
 
       &.jse-first {
-        margin-left: $padding-half;
+        margin-left: styles.$padding-half;
       }
 
       &.jse-last {
-        margin-right: $padding-half;
+        margin-right: styles.$padding-half;
       }
 
       &:hover,
       &:focus {
-        background: $theme-color-highlight;
+        background: defaults.$theme-color-highlight;
       }
 
       &.jse-selected {
         background: $group-button-color;
-        color: $theme-color;
+        color: defaults.$theme-color;
       }
     }
   }
@@ -83,7 +84,7 @@
   .jse-separator {
     $margin: 3px;
 
-    background: $menu-color;
+    background: defaults.$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 9b2dd93a..a83b27f6 100644
--- a/src/lib/components/controls/Message.scss
+++ b/src/lib/components/controls/Message.scss
@@ -1,18 +1,19 @@
-@import '../../styles.scss';
+@use '../../styles.scss';
+@use '../../themes/defaults';
 
 .jse-message {
-  font-family: $font-family-mono;
-  font-size: $font-size-mono;
+  font-family: defaults.$font-family-mono;
+  font-size: defaults.$font-size-mono;
 
-  padding: $padding;
+  padding: defaults.$padding;
   display: flex;
-  gap: $padding;
+  gap: defaults.$padding;
   flex-wrap: wrap;
   align-items: stretch;
 
   &.jse-success {
-    background: $message-success-background;
-    color: $message-success-color;
+    background: defaults.$message-success-background;
+    color: defaults.$message-success-color;
   }
 
   .jse-text {
@@ -34,34 +35,34 @@
   }
 
   &.jse-error {
-    background: $message-error-background;
-    color: $message-error-color;
+    background: defaults.$message-error-background;
+    color: defaults.$message-error-color;
   }
 
   &.jse-warning {
-    background: $message-warning-background;
-    color: $message-warning-color;
+    background: defaults.$message-warning-background;
+    color: defaults.$message-warning-color;
   }
 
   &.jse-info {
-    background: $message-info-background;
-    color: $message-info-color;
+    background: defaults.$message-info-background;
+    color: defaults.$message-info-color;
   }
 
   .jse-actions {
     display: flex;
-    gap: $padding;
+    gap: defaults.$padding;
 
     button.jse-action {
-      @include jsoneditor-button;
+      @include styles.jsoneditor-button;
 
-      background: $message-action-background;
+      background: defaults.$message-action-background;
       color: inherit;
 
-      padding: $padding-half $padding;
+      padding: styles.$padding-half defaults.$padding;
 
       &:hover {
-        background: $message-action-background-highlight;
+        background: defaults.$message-action-background-highlight;
       }
     }
   }
diff --git a/src/lib/components/controls/SearchBox.scss b/src/lib/components/controls/SearchBox.scss
index 31504046..43264092 100644
--- a/src/lib/components/controls/SearchBox.scss
+++ b/src/lib/components/controls/SearchBox.scss
@@ -1,4 +1,5 @@
-@import '../../styles';
+@use '../../styles';
+@use '../../themes/defaults';
 
 $search-size: 28px;
 $button-width: 20px;
@@ -6,14 +7,14 @@ $padding-section-left: 32px;
 $input-min-width: 50px;
 
 .jse-search-box {
-  border: $panel-border;
-  border-radius: $border-radius;
-
-  font-family: $font-family;
-  font-size: $font-size;
-  background: $panel-background;
-  color: $panel-color-readonly;
-  box-shadow: $controls-box-shadow;
+  border: defaults.$panel-border;
+  border-radius: styles.$border-radius;
+
+  font-family: defaults.$font-family;
+  font-size: defaults.$font-size;
+  background: defaults.$panel-background;
+  color: defaults.$panel-color-readonly;
+  box-shadow: defaults.$controls-box-shadow;
   display: inline-block;
   width: 400px;
   max-width: 100%;
@@ -33,26 +34,26 @@ $input-min-width: 50px;
       display: block;
       text-align: center;
       border: none;
-      padding: 0 $input-padding;
+      padding: 0 styles.$input-padding;
       margin: 0;
       cursor: pointer;
 
-      color: $panel-button-color;
-      background: $panel-button-background;
+      color: defaults.$panel-button-color;
+      background: defaults.$panel-button-background;
 
       &:hover {
-        color: $panel-button-color-highlight;
-        background: $panel-button-background-highlight;
+        color: defaults.$panel-button-color-highlight;
+        background: defaults.$panel-button-background-highlight;
       }
     }
 
     input {
-      color: $panel-color;
-      border: $input-border;
-      border-radius: $border-radius;
-      background: $input-background;
+      color: defaults.$panel-color;
+      border: defaults.$input-border;
+      border-radius: styles.$border-radius;
+      background: defaults.$input-background;
       height: $search-size;
-      padding: 0 $input-padding;
+      padding: 0 styles.$input-padding;
       margin: 0;
       flex: 1;
       width: 0;
@@ -61,17 +62,17 @@ $input-min-width: 50px;
     }
 
     .jse-replace-toggle {
-      padding: $padding $padding-half;
+      padding: defaults.$padding styles.$padding-half;
       min-width: 20px;
-      background: $panel-button-background-highlight;
+      background: defaults.$panel-button-background-highlight;
     }
 
     .jse-search-contents {
       flex: 1;
       display: flex;
       flex-direction: column;
-      padding: $padding-half;
-      gap: $padding-half;
+      padding: styles.$padding-half;
+      gap: styles.$padding-half;
 
       .jse-search-section {
         flex: 1;
@@ -96,7 +97,7 @@ $input-min-width: 50px;
           color: inherit;
           font-size: 80%;
           visibility: hidden;
-          padding: 0 $input-padding;
+          padding: 0 styles.$input-padding;
           min-width: 36px;
           text-align: center;
 
diff --git a/src/lib/components/controls/ValidationErrorsOverview.scss b/src/lib/components/controls/ValidationErrorsOverview.scss
index d57155e5..0c65897d 100644
--- a/src/lib/components/controls/ValidationErrorsOverview.scss
+++ b/src/lib/components/controls/ValidationErrorsOverview.scss
@@ -1,10 +1,11 @@
-@import '../../styles.scss';
+@use '../../styles.scss';
+@use '../../themes/defaults';
 
 .jse-validation-errors-overview {
-  font-family: $font-family-mono;
-  font-size: $font-size-mono;
+  font-family: defaults.$font-family-mono;
+  font-size: defaults.$font-size-mono;
   overflow: auto;
-  max-height: $errors-overview-max-height;
+  max-height: styles.$errors-overview-max-height;
 
   table {
     border-collapse: collapse;
@@ -14,21 +15,21 @@
       cursor: pointer;
 
       &.jse-validation-error {
-        background: $message-error-background;
-        color: $message-error-color;
+        background: defaults.$message-error-background;
+        color: defaults.$message-error-color;
       }
 
       &.jse-validation-warning {
-        background: $message-warning-background;
-        color: $message-warning-color;
+        background: defaults.$message-warning-background;
+        color: defaults.$message-warning-color;
         &:hover {
           filter: brightness(105%);
         }
       }
 
       &.jse-validation-info {
-        background: $message-info-background;
-        color: $message-info-color;
+        background: defaults.$message-info-background;
+        color: defaults.$message-info-color;
       }
 
       &:hover {
@@ -36,7 +37,7 @@
       }
 
       td {
-        padding: 4px $padding;
+        padding: 4px defaults.$padding;
         vertical-align: middle;
 
         &.jse-validation-error-icon {
@@ -50,7 +51,7 @@
           padding: 0;
 
           button.jse-validation-errors-collapse {
-            @include jsoneditor-button;
+            @include styles.jsoneditor-button;
 
             width: 36px;
             height: 26px;
diff --git a/src/lib/components/controls/contextmenu/ContextMenu.scss b/src/lib/components/controls/contextmenu/ContextMenu.scss
index 5444c462..77460842 100644
--- a/src/lib/components/controls/contextmenu/ContextMenu.scss
+++ b/src/lib/components/controls/contextmenu/ContextMenu.scss
@@ -1,12 +1,13 @@
-@import '../../../styles.scss';
+@use '../../../styles.scss';
+@use '../../../themes/defaults';
 
 .jse-contextmenu {
-  box-shadow: $controls-box-shadow;
+  box-shadow: defaults.$controls-box-shadow;
 
-  font-family: $font-family;
-  font-size: $font-size;
-  background: $context-menu-background;
-  color: $context-menu-color;
+  font-family: defaults.$font-family;
+  font-size: defaults.$font-size;
+  background: defaults.$context-menu-background;
+  color: defaults.$context-menu-color;
 
   .jse-row {
     display: flex;
@@ -17,28 +18,28 @@
     div.jse-label {
       flex: 1;
       white-space: nowrap;
-      padding: $padding;
-      color: $context-menu-color-disabled;
+      padding: defaults.$padding;
+      color: defaults.$context-menu-color-disabled;
       line-height: normal;
     }
 
     div.jse-tip {
       flex: 1;
-      background: $context-menu-tip-background;
-      color: $context-menu-tip-color;
-      margin: $padding-half;
-      padding: $padding-half $padding;
+      background: defaults.$context-menu-tip-background;
+      color: defaults.$context-menu-tip-color;
+      margin: styles.$padding-half;
+      padding: styles.$padding-half defaults.$padding;
       font-size: 80%;
       line-height: 1.3em;
 
       display: flex;
       flex-direction: row;
       align-items: flex-start;
-      gap: $padding;
-      border-radius: $border-radius;
+      gap: defaults.$padding;
+      border-radius: styles.$border-radius;
 
       div.jse-tip-icon {
-        padding-top: $padding-half;
+        padding-top: styles.$padding-half;
       }
     }
   }
@@ -50,13 +51,13 @@
     align-items: stretch;
 
     &:not(:last-child) {
-      border-right: 1px solid $context-menu-separator-color;
+      border-right: 1px solid defaults.$context-menu-separator-color;
     }
   }
 
   .jse-separator {
     width: 100%;
     height: 1px;
-    background: $context-menu-separator-color;
+    background: defaults.$context-menu-separator-color;
   }
 }
diff --git a/src/lib/components/controls/contextmenu/ContextMenuButton.scss b/src/lib/components/controls/contextmenu/ContextMenuButton.scss
index 8b4db030..4ba183f0 100644
--- a/src/lib/components/controls/contextmenu/ContextMenuButton.scss
+++ b/src/lib/components/controls/contextmenu/ContextMenuButton.scss
@@ -1,5 +1,5 @@
-@import '../../../styles.scss';
+@use '../../../styles.scss';
 
 button.jse-context-menu-button {
-  @include jsoneditor-context-menu-button;
+  @include styles.jsoneditor-context-menu-button;
 }
diff --git a/src/lib/components/controls/contextmenu/ContextMenuDropDownButton.scss b/src/lib/components/controls/contextmenu/ContextMenuDropDownButton.scss
index 8b4db030..4ba183f0 100644
--- a/src/lib/components/controls/contextmenu/ContextMenuDropDownButton.scss
+++ b/src/lib/components/controls/contextmenu/ContextMenuDropDownButton.scss
@@ -1,5 +1,5 @@
-@import '../../../styles.scss';
+@use '../../../styles.scss';
 
 button.jse-context-menu-button {
-  @include jsoneditor-context-menu-button;
+  @include styles.jsoneditor-context-menu-button;
 }
diff --git a/src/lib/components/controls/contextmenu/ContextMenuPointer.scss b/src/lib/components/controls/contextmenu/ContextMenuPointer.scss
index ac26419a..ff319326 100644
--- a/src/lib/components/controls/contextmenu/ContextMenuPointer.scss
+++ b/src/lib/components/controls/contextmenu/ContextMenuPointer.scss
@@ -1,11 +1,12 @@
-@import '../../../styles';
+@use '../../../styles';
+@use '../../../themes/defaults';
 
 .jse-context-menu-pointer {
   position: absolute;
-  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;
+  top: calc(-0.5 * defaults.$context-menu-pointer-size);
+  right: calc(-0.5 * defaults.$context-menu-pointer-size);
+  width: defaults.$context-menu-pointer-size;
+  height: defaults.$context-menu-pointer-size;
   padding: 0;
   margin: 0;
 
@@ -13,14 +14,14 @@
   background: transparent;
 
   border-radius: 2px;
-  background: $context-menu-pointer-hover-background;
-  color: $context-menu-pointer-color;
+  background: defaults.$context-menu-pointer-hover-background;
+  color: defaults.$context-menu-pointer-color;
   border: none;
-  box-shadow: $controls-box-shadow;
+  box-shadow: defaults.$controls-box-shadow;
 
   &.jse-root {
     top: 0;
-    right: calc(-2px - $context-menu-pointer-size);
+    right: calc(-2px - defaults.$context-menu-pointer-size);
   }
 
   &.jse-insert {
@@ -28,14 +29,14 @@
   }
 
   &:hover {
-    background: $context-menu-pointer-background-highlight;
+    background: defaults.$context-menu-pointer-background-highlight;
   }
 
   &.jse-selected {
-    background: $context-menu-pointer-background;
+    background: defaults.$context-menu-pointer-background;
 
     &:hover {
-      background: $context-menu-pointer-background-highlight;
+      background: defaults.$context-menu-pointer-background-highlight;
     }
   }
 }
diff --git a/src/lib/components/controls/navigationBar/NavigationBar.scss b/src/lib/components/controls/navigationBar/NavigationBar.scss
index f80ce755..df5576c8 100644
--- a/src/lib/components/controls/navigationBar/NavigationBar.scss
+++ b/src/lib/components/controls/navigationBar/NavigationBar.scss
@@ -1,23 +1,24 @@
-@import '../../../styles';
+@use '../../../styles';
+@use '../../../themes/defaults';
 
 .jse-navigation-bar {
-  font-family: $font-family-mono;
-  font-size: $font-size-mono;
-  background: $panel-background;
-  color: $panel-button-color;
+  font-family: defaults.$font-family-mono;
+  font-size: defaults.$font-size-mono;
+  background: defaults.$panel-background;
+  color: defaults.$panel-button-color;
   padding: 0;
   margin: 0;
   display: flex;
   overflow: auto;
 
-  border-left: $main-border;
-  border-right: $main-border;
+  border-left: defaults.$main-border;
+  border-right: defaults.$main-border;
 
   .jse-navigation-bar-edit {
-    font-family: $font-family-mono;
-    font-size: $font-size-mono;
-    padding: $padding-half $padding;
-    color: $panel-color-readonly;
+    font-family: defaults.$font-family-mono;
+    font-size: defaults.$font-size-mono;
+    padding: styles.$padding-half defaults.$padding;
+    color: defaults.$panel-color-readonly;
     background: transparent;
     border: none;
     display: flex;
@@ -32,8 +33,8 @@
     &:focus,
     &:hover,
     &.editing {
-      background: $panel-button-background-highlight;
-      color: $panel-button-color-highlight;
+      background: defaults.$panel-button-background-highlight;
+      color: defaults.$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 4bf6ebbf..2ba0f511 100644
--- a/src/lib/components/controls/navigationBar/NavigationBarDropdown.scss
+++ b/src/lib/components/controls/navigationBar/NavigationBarDropdown.scss
@@ -1,13 +1,14 @@
-@import '../../../styles';
+@use '../../../styles';
+@use '../../../themes/defaults';
 
 .jse-navigation-bar-dropdown {
   position: absolute;
   top: 100%;
   left: 0;
   z-index: 3; // above the floating ContextMenuButton
-  background: $navigation-bar-background;
-  color: $navigation-bar-dropdown-color;
-  box-shadow: $controls-box-shadow;
+  background: defaults.$navigation-bar-background;
+  color: defaults.$navigation-bar-dropdown-color;
+  box-shadow: defaults.$controls-box-shadow;
   display: flex;
   flex-direction: column;
   max-height: 300px;
@@ -15,8 +16,8 @@
   min-width: 80px;
 
   button.jse-navigation-bar-dropdown-item {
-    font-family: $font-family-mono;
-    font-size: $font-size-mono;
+    font-family: defaults.$font-family-mono;
+    font-size: defaults.$font-size-mono;
     border: none;
     background: transparent;
     color: inherit;
@@ -26,16 +27,16 @@
     white-space: nowrap;
     box-sizing: border-box;
     // FIXME: must align exactly with the text in the navigation bar, how to ensure that?
-    padding: $padding-half 36px;
+    padding: styles.$padding-half 36px;
 
     &:focus,
     &:hover {
-      background: $navigation-bar-background-highlight;
+      background: defaults.$navigation-bar-background-highlight;
     }
 
     &.jse-selected {
-      background: $navigation-bar-dropdown-color;
-      color: $navigation-bar-background;
+      background: defaults.$navigation-bar-dropdown-color;
+      color: defaults.$navigation-bar-background;
     }
   }
 }
diff --git a/src/lib/components/controls/navigationBar/NavigationBarItem.scss b/src/lib/components/controls/navigationBar/NavigationBarItem.scss
index 2c2d5d2a..475e7088 100644
--- a/src/lib/components/controls/navigationBar/NavigationBarItem.scss
+++ b/src/lib/components/controls/navigationBar/NavigationBarItem.scss
@@ -1,4 +1,5 @@
-@import '../../../styles';
+@use '../../../styles';
+@use '../../../themes/defaults';
 
 .jse-navigation-bar-item {
   position: relative;
@@ -7,7 +8,7 @@
   button.jse-navigation-bar-button {
     font-family: inherit;
     font-size: inherit;
-    padding: $padding-half 2px;
+    padding: styles.$padding-half 2px;
     border: none;
     background: transparent;
     color: inherit;
@@ -18,21 +19,21 @@
 
     &:focus,
     &:hover {
-      background: $panel-button-background-highlight;
-      color: $panel-button-color-highlight;
+      background: defaults.$panel-button-background-highlight;
+      color: defaults.$panel-button-color-highlight;
     }
 
     &.jse-navigation-bar-arrow {
-      padding: 2px $padding 0;
+      padding: 2px defaults.$padding 0;
 
       &.jse-open {
-        background: $navigation-bar-background;
-        color: $navigation-bar-dropdown-color;
+        background: defaults.$navigation-bar-background;
+        color: defaults.$navigation-bar-dropdown-color;
       }
     }
   }
 
   &:last-child {
-    padding-right: $padding;
+    padding-right: defaults.$padding;
   }
 }
diff --git a/src/lib/components/controls/navigationBar/NavigationBarPathEditor.scss b/src/lib/components/controls/navigationBar/NavigationBarPathEditor.scss
index 454ad9ad..41d68206 100644
--- a/src/lib/components/controls/navigationBar/NavigationBarPathEditor.scss
+++ b/src/lib/components/controls/navigationBar/NavigationBarPathEditor.scss
@@ -1,25 +1,26 @@
-@import '../../../styles';
+@use '../../../styles';
+@use '../../../themes/defaults';
 
 .jse-navigation-bar-path-editor {
   flex: 1;
   display: flex;
-  border: $edit-outline;
-  background: $background-color;
+  border: defaults.$edit-outline;
+  background: defaults.$background-color;
 
   input.jse-navigation-bar-text {
     flex: 1;
     font-family: inherit;
     font-size: inherit;
     padding: 0 5px 1px;
-    background: $background-color;
-    color: $text-color;
+    background: defaults.$background-color;
+    color: defaults.$text-color;
     border: none;
     outline: none;
   }
 
   button {
     border: none;
-    background: $background-color;
+    background: defaults.$background-color;
     cursor: pointer;
     font-family: inherit;
     font-size: 80%;
@@ -28,28 +29,28 @@
 
   button.jse-navigation-bar-copy {
     &.copied {
-      color: $message-success-background;
+      color: defaults.$message-success-background;
     }
   }
 
   button.jse-navigation-bar-validation-error {
-    color: $error-color;
+    color: defaults.$error-color;
   }
 
   &.error {
-    border-color: $error-color;
+    border-color: defaults.$error-color;
 
     input.jse-navigation-bar-text {
-      color: $error-color;
+      color: defaults.$error-color;
     }
   }
 
   .jse-copied-text {
-    background: $message-success-background;
-    color: $message-success-color;
+    background: defaults.$message-success-background;
+    color: defaults.$message-success-color;
     position: relative;
     margin: 2px;
     padding: 0 5px;
-    border-radius: $border-radius;
+    border-radius: styles.$border-radius;
   }
 }
diff --git a/src/lib/components/controls/selectQueryLanguage/SelectQueryLanguage.scss b/src/lib/components/controls/selectQueryLanguage/SelectQueryLanguage.scss
index 014c6384..d25eedce 100644
--- a/src/lib/components/controls/selectQueryLanguage/SelectQueryLanguage.scss
+++ b/src/lib/components/controls/selectQueryLanguage/SelectQueryLanguage.scss
@@ -1,4 +1,5 @@
-@import '../../../styles';
+@use '../../../styles';
+@use '../../../themes/defaults';
 
 .jse-select-query-language {
   position: relative;
@@ -10,19 +11,19 @@
     right: 0;
     display: flex;
     flex-direction: column;
-    box-shadow: $controls-box-shadow;
+    box-shadow: defaults.$controls-box-shadow;
 
     .jse-query-language {
-      @include jsoneditor-button;
+      @include styles.jsoneditor-button;
 
       text-align: left;
-      padding: $padding $padding-double;
+      padding: defaults.$padding styles.$padding-double;
       white-space: nowrap;
-      color: $context-menu-color;
-      background: $context-menu-background;
+      color: defaults.$context-menu-color;
+      background: defaults.$context-menu-background;
 
       &:hover {
-        background: $context-menu-background-highlight;
+        background: defaults.$context-menu-background-highlight;
       }
     }
   }
diff --git a/src/lib/components/controls/tooltip/Tooltip.scss b/src/lib/components/controls/tooltip/Tooltip.scss
index 59671cca..bc18a054 100644
--- a/src/lib/components/controls/tooltip/Tooltip.scss
+++ b/src/lib/components/controls/tooltip/Tooltip.scss
@@ -1,13 +1,14 @@
-@import '../../../styles';
+@use '../../../styles';
+@use '../../../themes/defaults';
 
 .jse-tooltip {
-  font-family: $font-family;
-  font-size: $font-size;
+  font-family: defaults.$font-family;
+  font-size: defaults.$font-size;
   line-height: normal;
-  padding: $padding-half $padding;
-  border-radius: $border-radius;
-  background: $context-menu-background;
-  color: $context-menu-color;
+  padding: styles.$padding-half defaults.$padding;
+  border-radius: styles.$border-radius;
+  background: defaults.$context-menu-background;
+  color: defaults.$context-menu-color;
   white-space: nowrap;
-  box-shadow: $controls-box-shadow;
+  box-shadow: defaults.$controls-box-shadow;
 }
diff --git a/src/lib/components/modals/CopyPasteModal.scss b/src/lib/components/modals/CopyPasteModal.scss
index e1caaa1e..446fa4af 100644
--- a/src/lib/components/modals/CopyPasteModal.scss
+++ b/src/lib/components/modals/CopyPasteModal.scss
@@ -1,19 +1,20 @@
-@import '../../styles';
+@use '../../styles';
+@use '../../themes/defaults';
 
 .jse-modal-contents {
-  @include jse-modal-contents;
+  @include styles.jse-modal-contents;
 }
 
 .jse-shortcuts {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
-  margin: $padding-double 0;
+  margin: styles.$padding-double 0;
 
   .jse-shortcut {
     .jse-key {
       font-size: 200%;
-      color: $theme-color;
+      color: defaults.$theme-color;
     }
   }
 }
diff --git a/src/lib/components/modals/Header.scss b/src/lib/components/modals/Header.scss
index 58f6c90e..3ca8b554 100644
--- a/src/lib/components/modals/Header.scss
+++ b/src/lib/components/modals/Header.scss
@@ -1,17 +1,18 @@
-@import '../../styles';
+@use '../../styles';
+@use '../../themes/defaults';
 
 .jse-header {
   display: flex;
-  background: $theme-color;
-  color: $menu-color;
+  background: defaults.$theme-color;
+  color: defaults.$menu-color;
 
   .jse-title {
     flex: 1;
-    padding: $input-padding;
+    padding: styles.$input-padding;
     vertical-align: middle;
   }
 
   button {
-    @include jse-modal-menu-button;
+    @include styles.jse-modal-menu-button;
   }
 }
diff --git a/src/lib/components/modals/JSONEditorModal.scss b/src/lib/components/modals/JSONEditorModal.scss
index 5acb4507..ad907079 100644
--- a/src/lib/components/modals/JSONEditorModal.scss
+++ b/src/lib/components/modals/JSONEditorModal.scss
@@ -1,4 +1,5 @@
-@import '../../styles';
+@use '../../styles';
+@use '../../themes/defaults';
 
 .jse-modal-wrapper {
   flex: 1;
@@ -8,7 +9,7 @@
   flex-direction: column;
 
   .jse-modal-contents {
-    @include jse-modal-contents;
+    @include styles.jse-modal-contents;
 
     .jse-label {
       font-weight: bold;
@@ -16,8 +17,8 @@
       box-sizing: border-box;
 
       .jse-label-inner {
-        margin-top: $padding-double;
-        margin-bottom: $padding-half;
+        margin-top: styles.$padding-double;
+        margin-bottom: styles.$padding-half;
         box-sizing: border-box;
       }
     }
@@ -29,28 +30,28 @@
       max-width: 100%;
       display: flex;
 
-      --jse-theme-color: #{$modal-editor-theme-color};
-      --jse-theme-color-highlight: #{$modal-editor-theme-color-highlight};
+      --jse-theme-color: #{defaults.$modal-editor-theme-color};
+      --jse-theme-color-highlight: #{defaults.$modal-editor-theme-color-highlight};
     }
   }
 
   .jse-actions {
-    gap: $padding;
+    gap: defaults.$padding;
     align-items: center;
 
     .jse-error {
       flex: 1;
-      color: $error-color;
+      color: defaults.$error-color;
     }
 
     button {
       &.jse-secondary {
-        @include jsoneditor-button-secondary;
+        @include styles.jsoneditor-button-secondary;
       }
     }
   }
 
   input {
-    @include modal-input-mixin;
+    @include styles.modal-input-mixin;
   }
 }
diff --git a/src/lib/components/modals/Modal.svelte b/src/lib/components/modals/Modal.svelte
index 9ef088d5..d7c5ed7b 100644
--- a/src/lib/components/modals/Modal.svelte
+++ b/src/lib/components/modals/Modal.svelte
@@ -34,11 +34,12 @@
 </dialog>
 
 <style lang="scss">
-  @import '../../styles.scss';
+  @use '../../themes/defaults.scss';
+  @use '../../styles.scss';
 
   dialog.jse-modal {
-    border-radius: $border-radius;
-    font-size: $padding; // for some reason that I don't understand, the font-size of the dialog is used as margin around the dialog
+    border-radius: styles.$border-radius;
+    font-size: defaults.$padding; // for some reason that I don't understand, the font-size of the dialog is used as margin around the dialog
     border: none;
     padding: 0;
     display: flex;
@@ -74,7 +75,7 @@
     }
 
     &::backdrop {
-      background: $modal-overlay-background;
+      background: defaults.$modal-overlay-background;
     }
 
     &[open] {
@@ -86,7 +87,7 @@
     }
 
     & .jse-modal-inner {
-      @include jse-modal-style;
+      @include styles.jse-modal-style;
     }
 
     @keyframes zoom {
@@ -110,13 +111,13 @@
     // styling for the select box, svelte-select
     // see docs: https://github.com/rob-balfre/svelte-select#css-custom-properties-variables
     :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};
+      --border: #{defaults.$svelte-select-border};
+      --item-is-active-bg: #{defaults.$svelte-select-item-is-active-bg};
+      --border-radius: #{defaults.$svelte-select-border-radius};
+      --background: #{defaults.$svelte-select-background};
+      --padding: #{defaults.$svelte-select-padding};
+      --multi-select-padding: #{defaults.$svelte-select-multi-select-padding};
+      --font-size: #{defaults.$svelte-select-font-size};
       --height: 36px;
       --multi-item-height: 28px;
       --multi-item-margin: 2px;
diff --git a/src/lib/components/modals/SortModal.scss b/src/lib/components/modals/SortModal.scss
index 12e64acb..d8b18a64 100644
--- a/src/lib/components/modals/SortModal.scss
+++ b/src/lib/components/modals/SortModal.scss
@@ -1,7 +1,8 @@
-@import '../../styles';
+@use '../../styles';
+@use '../../themes/defaults';
 
 .jse-modal-contents {
-  @include jse-modal-contents;
+  @include styles.jse-modal-contents;
 
   table {
     width: 100%;
@@ -13,7 +14,7 @@
       text-align: left;
       vertical-align: middle;
       font-weight: normal;
-      padding-bottom: $padding;
+      padding-bottom: defaults.$padding;
     }
   }
 
@@ -21,12 +22,12 @@
     width: 100%;
     box-sizing: border-box;
     padding: 5px 10px; // TODO: define variables for those props
-    border: $input-border;
-    border-radius: $input-radius;
+    border: defaults.$input-border;
+    border-radius: defaults.$input-radius;
     font-family: inherit;
     font-size: inherit;
     background: inherit;
-    background: $input-background-readonly;
+    background: defaults.$input-background-readonly;
     color: inherit;
     outline: none;
   }
@@ -39,7 +40,7 @@
     height: 200px; // Trick for the property select box dropdown to be fully visible
 
     .jse-error {
-      color: $error-color;
+      color: defaults.$error-color;
     }
   }
 }
diff --git a/src/lib/components/modals/TransformModal.scss b/src/lib/components/modals/TransformModal.scss
index 66cc2f7e..a410af06 100644
--- a/src/lib/components/modals/TransformModal.scss
+++ b/src/lib/components/modals/TransformModal.scss
@@ -1,4 +1,5 @@
-@import '../../styles';
+@use '../../styles';
+@use '../../themes/defaults';
 
 .jse-transform-modal-inner {
   flex: 1;
@@ -10,16 +11,16 @@
   .jse-modal-contents {
     color: inherit;
 
-    @include jse-modal-contents($modal-padding: 0);
+    @include styles.jse-modal-contents($modal-padding: 0);
 
     .jse-main-contents {
       flex: 1;
       display: flex;
-      gap: $padding-double;
+      gap: styles.$padding-double;
       min-height: 0;
       box-sizing: border-box;
 
-      padding: 0 $padding-double $padding;
+      padding: 0 styles.$padding-double defaults.$padding;
 
       .jse-query-contents {
         flex: 1;
@@ -28,7 +29,7 @@
 
         .jse-description {
           :global(p) {
-            margin: $padding 0;
+            margin: defaults.$padding 0;
 
             &:first-child {
               margin-top: 0;
@@ -40,14 +41,14 @@
           }
 
           :global(code) {
-            background: $modal-code-background;
-            font-family: $font-family-mono;
-            font-size: $font-size-mono;
+            background: defaults.$modal-code-background;
+            font-family: defaults.$font-family-mono;
+            font-size: defaults.$font-size-mono;
           }
         }
 
         .query-error {
-          color: $error-color;
+          color: defaults.$error-color;
         }
 
         textarea.jse-query {
@@ -61,7 +62,7 @@
         flex: 1;
         display: flex;
         flex-direction: column;
-        gap: $padding-double;
+        gap: styles.$padding-double;
 
         .jse-original-data {
           flex: 1;
@@ -92,7 +93,7 @@
     }
 
     .jse-actions {
-      padding: $padding $padding-double $padding-double;
+      padding: defaults.$padding styles.$padding-double styles.$padding-double;
     }
 
     @media screen and (max-width: 1200px) {
@@ -123,12 +124,12 @@
     box-sizing: border-box;
 
     .jse-label-inner {
-      margin-top: $padding-double;
-      margin-bottom: $padding-half;
+      margin-top: styles.$padding-double;
+      margin-bottom: styles.$padding-half;
       box-sizing: border-box;
 
       button {
-        @include jsoneditor-button;
+        @include styles.jsoneditor-button;
         font-weight: bold;
         padding: 0;
       }
@@ -137,31 +138,31 @@
 
   :global(.jse-tree-mode) {
     flex: 1;
-    background: $input-background-readonly;
+    background: defaults.$input-background-readonly;
     box-shadow: none;
     box-sizing: border-box;
 
-    --jse-main-border: #{$input-border};
+    --jse-main-border: #{defaults.$input-border};
   }
 
   input,
   textarea {
-    @include modal-input-mixin;
+    @include styles.modal-input-mixin;
   }
 
   .jse-preview.jse-error {
     flex: 1;
-    background: $input-background-readonly;
-    border: $input-border;
-    color: $error-color;
-    padding: $padding-half;
+    background: defaults.$input-background-readonly;
+    border: defaults.$input-border;
+    color: defaults.$error-color;
+    padding: styles.$padding-half;
   }
 
   :global(a) {
-    color: $a-color;
+    color: defaults.$a-color;
   }
 
   :global(a:hover) {
-    color: $a-color-highlight;
+    color: defaults.$a-color-highlight;
   }
 }
diff --git a/src/lib/components/modals/TransformModalHeader.scss b/src/lib/components/modals/TransformModalHeader.scss
index 999e31b2..f4b83118 100644
--- a/src/lib/components/modals/TransformModalHeader.scss
+++ b/src/lib/components/modals/TransformModalHeader.scss
@@ -1,7 +1,7 @@
-@import '../../styles';
+@use '../../styles';
 
 .jse-config {
-  @include jse-modal-menu-button;
+  @include styles.jse-modal-menu-button;
 
   &.hide {
     display: none;
diff --git a/src/lib/components/modals/TransformWizard.scss b/src/lib/components/modals/TransformWizard.scss
index 4a9f46c2..585c0fa7 100644
--- a/src/lib/components/modals/TransformWizard.scss
+++ b/src/lib/components/modals/TransformWizard.scss
@@ -1,4 +1,5 @@
-@import '../../styles';
+@use '../../styles';
+@use '../../themes/defaults';
 
 table.jse-transform-wizard {
   border-collapse: collapse;
@@ -22,7 +23,7 @@ table.jse-transform-wizard {
         width: 100%;
         display: flex;
         flex-direction: row;
-        margin-bottom: $padding-half;
+        margin-bottom: styles.$padding-half;
 
         // svelte-select
         // TODO: this styling should be configured globally
@@ -35,17 +36,17 @@ table.jse-transform-wizard {
 
         :global(.svelte-select.jse-filter-path) {
           flex: 4;
-          margin-right: $padding-half;
+          margin-right: styles.$padding-half;
         }
 
         :global(.svelte-select.jse-filter-relation) {
           flex: 1.5;
-          margin-right: $padding-half;
+          margin-right: styles.$padding-half;
         }
 
         :global(.svelte-select.jse-sort-path) {
           flex: 3;
-          margin-right: $padding-half;
+          margin-right: styles.$padding-half;
         }
 
         :global(.svelte-select.jse-sort-direction) {
@@ -63,14 +64,14 @@ table.jse-transform-wizard {
         .jse-filter-value {
           flex: 4;
           padding: 4px 8px;
-          border: $input-border;
-          border-radius: $input-radius;
+          border: defaults.$input-border;
+          border-radius: defaults.$input-radius;
           outline: none;
-          background: $input-background;
+          background: defaults.$input-background;
           color: inherit;
 
           &:focus {
-            border: $input-border-focus;
+            border: defaults.$input-border-focus;
           }
         }
       }
diff --git a/src/lib/components/modals/repair/JSONRepairComponent.scss b/src/lib/components/modals/repair/JSONRepairComponent.scss
index c755a826..079f71ff 100644
--- a/src/lib/components/modals/repair/JSONRepairComponent.scss
+++ b/src/lib/components/modals/repair/JSONRepairComponent.scss
@@ -1,27 +1,28 @@
-@import '../../../styles';
+@use '../../../styles';
+@use '../../../themes/defaults';
 
 .jse-json-repair-component {
   flex: 1;
   display: flex;
   flex-direction: column;
-  background: $background-color;
-  color: $text-color;
+  background: defaults.$background-color;
+  color: defaults.$text-color;
 
   .jse-info {
-    padding: $padding-half;
-    font-family: $font-family;
-    font-size: $font-size;
+    padding: styles.$padding-half;
+    font-family: defaults.$font-family;
+    font-size: defaults.$font-size;
     vertical-align: center;
   }
 
   .jse-json-text {
     flex: 1;
     border: none;
-    padding: $contents-padding;
-    font-family: $font-family-mono;
-    font-size: $font-size-mono;
-    background: $input-background;
-    color: $text-color;
+    padding: styles.$contents-padding;
+    font-family: defaults.$font-family-mono;
+    font-size: defaults.$font-size-mono;
+    background: defaults.$input-background;
+    color: defaults.$text-color;
 
     resize: none;
     outline: none;
diff --git a/src/lib/components/modes/tablemode/ColumnHeader.scss b/src/lib/components/modes/tablemode/ColumnHeader.scss
index 6be0435d..ea2931c6 100644
--- a/src/lib/components/modes/tablemode/ColumnHeader.scss
+++ b/src/lib/components/modes/tablemode/ColumnHeader.scss
@@ -1,7 +1,7 @@
-@import '../../../styles';
+@use '../../../styles';
 
 .jse-column-header {
-  @include jse-column-header-mixin;
+  @include styles.jse-column-header-mixin;
 
   span.jse-column-sort-icon {
     height: 1em;
diff --git a/src/lib/components/modes/tablemode/RefreshColumnHeader.scss b/src/lib/components/modes/tablemode/RefreshColumnHeader.scss
index f22deeb5..e8ce441b 100644
--- a/src/lib/components/modes/tablemode/RefreshColumnHeader.scss
+++ b/src/lib/components/modes/tablemode/RefreshColumnHeader.scss
@@ -1,5 +1,5 @@
-@import '../../../styles';
+@use '../../../styles';
 
 .jse-column-header {
-  @include jse-column-header-mixin;
+  @include styles.jse-column-header-mixin;
 }
diff --git a/src/lib/components/modes/tablemode/TableMode.scss b/src/lib/components/modes/tablemode/TableMode.scss
index 93926978..3f455c47 100644
--- a/src/lib/components/modes/tablemode/TableMode.scss
+++ b/src/lib/components/modes/tablemode/TableMode.scss
@@ -1,28 +1,29 @@
-@import '../../../styles';
+@use '../../../styles';
+@use '../../../themes/defaults';
 
 .jse-table-mode {
   flex: 1;
   display: flex;
   flex-direction: column;
   position: relative;
-  background: $background-color;
+  background: defaults.$background-color;
   min-width: 0;
   min-height: 0;
-  font-family: $font-family-mono;
-  font-size: $font-size-mono;
-  color: $text-color;
-  line-height: $line-height;
+  font-family: defaults.$font-family-mono;
+  font-size: defaults.$font-size-mono;
+  color: defaults.$text-color;
+  line-height: defaults.$line-height;
 
   &.no-main-menu {
-    border-top: $main-border;
+    border-top: defaults.$main-border;
   }
 
   .jse-search-box-container {
     position: relative;
     height: 0;
-    top: calc($line-height + 2 * $padding);
-    margin-right: calc($padding + 20px);
-    margin-left: $padding;
+    top: calc(defaults.$line-height + 2 * defaults.$padding);
+    margin-right: calc(defaults.$padding + 20px);
+    margin-left: defaults.$padding;
     text-align: right;
     z-index: 3; // must be above the ContextMenuButton
   }
@@ -52,11 +53,11 @@
     overflow-anchor: none; // important to prevent Chrome from adjusting the scrollTop based on changing contents (causing an infinite loop)
     scrollbar-gutter: stable;
 
-    border-left: $main-border;
-    border-right: $main-border;
+    border-left: defaults.$main-border;
+    border-right: defaults.$main-border;
 
     &:last-child {
-      border-bottom: $main-border;
+      border-bottom: defaults.$main-border;
     }
 
     table.jse-table-main {
@@ -72,32 +73,32 @@
       }
 
       .jse-search-box-background {
-        background: $table-header-background;
+        background: defaults.$table-header-background;
       }
 
       .jse-table-invisible-end-section {
         td {
-          padding-bottom: $padding;
+          padding-bottom: defaults.$padding;
         }
       }
 
       .jse-table-row {
         &:hover {
-          background-color: $table-row-odd-background;
+          background-color: defaults.$table-row-odd-background;
         }
 
         .jse-table-cell {
-          padding: 0 $padding 0 0;
+          padding: 0 defaults.$padding 0 0;
           vertical-align: top;
           white-space: nowrap;
-          height: $line-height;
+          height: defaults.$line-height;
 
           &.jse-table-cell-header,
           &.jse-table-cell-gutter {
             font-weight: normal;
             text-align: left;
-            color: $text-readonly;
-            background: $table-header-background;
+            color: defaults.$text-readonly;
+            background: defaults.$table-header-background;
           }
 
           &.jse-table-cell-header {
@@ -107,27 +108,28 @@
 
             .jse-table-root-error {
               // same padding as .jse-column-header
-              padding: $padding-half $padding $padding-half $padding-half;
+              padding: styles.$padding-half defaults.$padding styles.$padding-half
+                styles.$padding-half;
             }
 
             // FIXME: border and/or border shadow?
           }
 
           &.jse-table-cell-gutter {
-            padding: 0 $padding 0 $padding-half;
+            padding: 0 defaults.$padding 0 styles.$padding-half;
             // FIXME: border and/or border shadow?
           }
 
           .jse-value-outer {
             display: inline-block;
-            cursor: $contents-cursor;
+            cursor: defaults.$contents-cursor;
 
             &:hover {
-              background: $hover-background-color;
+              background: defaults.$hover-background-color;
             }
 
             &.jse-selected-value {
-              background: $selection-background-color;
+              background: defaults.$selection-background-color;
             }
           }
 
@@ -150,10 +152,10 @@
       .jse-loading {
         flex: 2;
         text-align: center;
-        color: $panel-color-readonly;
+        color: defaults.$panel-color-readonly;
         box-sizing: border-box;
-        font-family: $font-family;
-        font-size: $font-size;
+        font-family: defaults.$font-family;
+        font-size: defaults.$font-size;
       }
     }
   }
diff --git a/src/lib/components/modes/tablemode/TableModeWelcome.scss b/src/lib/components/modes/tablemode/TableModeWelcome.scss
index d158c8c6..74b27fe7 100644
--- a/src/lib/components/modes/tablemode/TableModeWelcome.scss
+++ b/src/lib/components/modes/tablemode/TableModeWelcome.scss
@@ -1,4 +1,5 @@
-@import '../../../styles';
+@use '../../../styles';
+@use '../../../themes/defaults';
 
 .jse-table-mode-welcome {
   flex: 1;
@@ -7,11 +8,11 @@
   overflow: auto;
   align-items: center;
 
-  border-left: $main-border;
-  border-right: $main-border;
+  border-left: defaults.$main-border;
+  border-right: defaults.$main-border;
 
   &:last-child {
-    border-bottom: $main-border;
+    border-bottom: defaults.$main-border;
   }
 
   .jse-space.jse-before {
@@ -21,24 +22,24 @@
   .jse-nested-arrays {
     display: flex;
     flex-direction: column;
-    gap: $padding;
+    gap: defaults.$padding;
     max-width: 300px;
-    margin: 2em $padding;
+    margin: 2em defaults.$padding;
 
-    font-family: $font-family;
-    font-size: $font-size;
+    font-family: defaults.$font-family;
+    font-size: defaults.$font-size;
 
     .jse-nested-arrays-title {
     }
 
     .jse-nested-arrays-info {
-      color: $panel-color-readonly;
+      color: defaults.$panel-color-readonly;
     }
 
     button.jse-nested-array-action {
       text-align: left;
 
-      @include jsoneditor-button-primary;
+      @include styles.jsoneditor-button-primary;
 
       .jse-nested-array-count {
         opacity: 0.5;
diff --git a/src/lib/components/modes/tablemode/tag/InlineValue.scss b/src/lib/components/modes/tablemode/tag/InlineValue.scss
index a01a6011..77de53e0 100644
--- a/src/lib/components/modes/tablemode/tag/InlineValue.scss
+++ b/src/lib/components/modes/tablemode/tag/InlineValue.scss
@@ -1,22 +1,23 @@
-@import '../../../../styles';
+@use '../../../../styles';
+@use '../../../../themes/defaults';
 
 .jse-inline-value {
-  font-family: $font-family-mono;
-  font-size: $font-size-mono;
-  line-height: $line-height;
+  font-family: defaults.$font-family-mono;
+  font-size: defaults.$font-size-mono;
+  line-height: defaults.$line-height;
   border: none;
-  padding: 0 $padding-half;
+  padding: 0 styles.$padding-half;
   background: transparent;
   color: inherit;
   cursor: inherit;
 
   &.jse-highlight {
-    background-color: $search-match-color;
-    outline: $search-match-outline;
+    background-color: defaults.$search-match-color;
+    outline: defaults.$search-match-outline;
 
     &.jse-active {
-      background-color: $search-match-active-color;
-      outline: $search-match-active-outline;
+      background-color: defaults.$search-match-active-color;
+      outline: defaults.$search-match-active-outline;
     }
   }
 }
diff --git a/src/lib/components/modes/textmode/StatusBar.scss b/src/lib/components/modes/textmode/StatusBar.scss
index 67ed12a1..8c36f99b 100644
--- a/src/lib/components/modes/textmode/StatusBar.scss
+++ b/src/lib/components/modes/textmode/StatusBar.scss
@@ -1,21 +1,22 @@
-@import '../../../styles';
+@use '../../../styles';
+@use '../../../themes/defaults';
 
 .jse-status-bar {
-  background: $panel-background;
-  color: $panel-color-readonly;
-  font-family: $font-family-mono;
-  font-size: $font-size-mono;
+  background: defaults.$panel-background;
+  color: defaults.$panel-color-readonly;
+  font-family: defaults.$font-family-mono;
+  font-size: defaults.$font-size-mono;
   margin: 0;
 
-  border-top: $panel-border;
-  border-left: $main-border;
-  border-right: $main-border;
+  border-top: defaults.$panel-border;
+  border-left: defaults.$main-border;
+  border-right: defaults.$main-border;
 
   display: flex;
-  gap: $padding;
+  gap: defaults.$padding;
 
   &:last-child {
-    border-bottom: $main-border;
+    border-bottom: defaults.$main-border;
   }
 
   .jse-status-bar-info {
diff --git a/src/lib/components/modes/textmode/TextMode.scss b/src/lib/components/modes/textmode/TextMode.scss
index eeb8cf93..9ee24fb6 100644
--- a/src/lib/components/modes/textmode/TextMode.scss
+++ b/src/lib/components/modes/textmode/TextMode.scss
@@ -1,19 +1,20 @@
-@import '../../../styles';
+@use '../../../styles';
+@use '../../../themes/defaults';
 
 .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};
+  --internal-key-color: #{defaults.$key-color};
+  --internal-value-color-number: #{defaults.$value-color-number};
+  --internal-value-color-boolean: #{defaults.$value-color-boolean};
+  --internal-value-color-string: #{defaults.$value-color-string};
+  --internal-value-color-null: #{defaults.$value-color-null};
   flex: 1;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  background: $background-color;
+  background: defaults.$background-color;
 
   &.no-main-menu {
-    border-top: $main-border;
+    border-top: defaults.$main-border;
   }
 
   .jse-contents {
@@ -25,11 +26,11 @@
     min-width: 0;
     min-height: 0;
 
-    border-left: $main-border;
-    border-right: $main-border;
+    border-left: defaults.$main-border;
+    border-right: defaults.$main-border;
 
     &:last-child {
-      border-bottom: $main-border;
+      border-bottom: defaults.$main-border;
     }
 
     &.jse-hidden {
@@ -47,104 +48,104 @@
       overflow: hidden;
 
       :global(.cm-scroller) {
-        font-family: $font-family-mono;
-        font-size: $font-size-mono;
-        line-height: $line-height;
-        color: $delimiter-color;
+        font-family: defaults.$font-family-mono;
+        font-size: defaults.$font-size-mono;
+        line-height: defaults.$line-height;
+        color: defaults.$delimiter-color;
       }
 
       :global(.cm-gutters) {
-        background: $panel-background;
-        color: $panel-color-readonly;
-        border-right: $panel-border;
+        background: defaults.$panel-background;
+        color: defaults.$panel-color-readonly;
+        border-right: defaults.$panel-border;
       }
 
       :global(.cm-activeLine),
       :global(.cm-activeLineGutter) {
-        background: $active-line-background-color;
+        background: defaults.$active-line-background-color;
       }
 
       :global(.cm-selectionBackground) {
-        background: $selection-background-color;
+        background: defaults.$selection-background-color;
       }
 
       :global(.cm-searchMatch) {
-        background-color: $search-match-color;
-        outline: $search-match-outline;
+        background-color: defaults.$search-match-color;
+        outline: defaults.$search-match-outline;
       }
 
       :global(.cm-searchMatch.cm-searchMatch-selected) {
-        background-color: $search-match-active-color;
-        outline: $search-match-active-outline;
+        background-color: defaults.$search-match-active-color;
+        outline: defaults.$search-match-active-outline;
       }
 
       :global(.cm-selectionMatch) {
-        background-color: $search-match-background-color;
+        background-color: defaults.$search-match-background-color;
       }
 
       :global(.cm-foldPlaceholder) {
-        background: $tag-background;
-        color: $tag-color;
+        background: defaults.$tag-background;
+        color: defaults.$tag-color;
         border: none;
-        padding: 0 $padding;
+        padding: 0 defaults.$padding;
       }
 
       :global(.cm-tooltip) {
-        font-size: $font-size;
-        font-family: $font-family;
-        color: $tooltip-color;
-        background: $tooltip-background;
-        border: $tooltip-border;
+        font-size: defaults.$font-size;
+        font-family: defaults.$font-family;
+        color: defaults.$tooltip-color;
+        background: defaults.$tooltip-background;
+        border: defaults.$tooltip-border;
       }
 
       :global(.cm-diagnosticAction) {
-        background: $tooltip-action-button-color;
-        background: $tooltip-action-button-background;
+        background: defaults.$tooltip-action-button-color;
+        background: defaults.$tooltip-action-button-background;
       }
 
       :global(.cm-panels) {
-        border-bottom: $panel-border;
+        border-bottom: defaults.$panel-border;
       }
 
       :global(.cm-search) {
-        background: $panel-background;
-        color: $panel-color;
-        font-family: $font-family;
-        font-size: $font-size;
+        background: defaults.$panel-background;
+        color: defaults.$panel-color;
+        font-family: defaults.$font-family;
+        font-size: defaults.$font-size;
       }
 
       :global(.cm-search input) {
-        font-family: $font-family;
-        font-size: $font-size-text-mode-search;
-        color: $input-color;
-        border: $input-border;
-        background: $input-background;
+        font-family: defaults.$font-family;
+        font-size: defaults.$font-size-text-mode-search;
+        color: defaults.$input-color;
+        border: defaults.$input-border;
+        background: defaults.$input-background;
         margin-right: 2px;
       }
 
       :global(.cm-search button) {
-        font-family: $font-family;
-        font-size: $font-size-text-mode-search;
+        font-family: defaults.$font-family;
+        font-size: defaults.$font-size-text-mode-search;
 
-        color: $panel-button-color;
-        background: $panel-button-background;
+        color: defaults.$panel-button-color;
+        background: defaults.$panel-button-background;
 
         border: none;
         cursor: pointer;
         text-transform: capitalize;
-        padding: $padding-half $padding;
+        padding: styles.$padding-half defaults.$padding;
         margin: 0;
 
         &:hover {
-          color: $panel-button-color-highlight;
-          background: $panel-button-background-highlight;
+          color: defaults.$panel-button-color-highlight;
+          background: defaults.$panel-button-background-highlight;
         }
       }
 
       :global(.cm-search label) {
-        font-family: $font-family;
-        font-size: $font-size-text-mode-search;
-        padding-left: $padding;
+        font-family: defaults.$font-family;
+        font-size: defaults.$font-size-text-mode-search;
+        padding-left: defaults.$padding;
       }
 
       :global(.cm-search label input) {
@@ -162,7 +163,7 @@
       }
 
       :global(.cm-cursor-primary) {
-        border-color: $text-color;
+        border-color: defaults.$text-color;
       }
     }
 
@@ -173,17 +174,17 @@
     .jse-loading {
       flex: 2;
       text-align: center;
-      color: $panel-color-readonly;
+      color: defaults.$panel-color-readonly;
       box-sizing: border-box;
-      font-family: $font-family;
-      font-size: $font-size;
+      font-family: defaults.$font-family;
+      font-size: defaults.$font-size;
     }
 
     &.jse-preview {
       flex: 1;
-      font-family: $font-family-mono;
-      font-size: $font-size-mono;
-      color: $panel-color-readonly;
+      font-family: defaults.$font-family-mono;
+      font-size: defaults.$font-size-mono;
+      color: defaults.$panel-color-readonly;
       overflow: auto;
       white-space: pre-wrap;
       word-break: break-word;
diff --git a/src/lib/components/modes/treemode/CollapsedItems.scss b/src/lib/components/modes/treemode/CollapsedItems.scss
index 4c946620..28fd0dca 100644
--- a/src/lib/components/modes/treemode/CollapsedItems.scss
+++ b/src/lib/components/modes/treemode/CollapsedItems.scss
@@ -1,21 +1,22 @@
-@import '../../../styles';
+@use '../../../styles';
+@use '../../../themes/defaults';
 
 div.jse-collapsed-items {
-  margin-left: calc(var(--level) * $indent-size);
+  margin-left: calc(var(--level) * defaults.$indent-size);
   $transparent-color: transparent;
-  $background-color: $collapsed-items-background-color;
-  $color: $collapsed-items-link-color;
+  $background-color: defaults.$collapsed-items-background-color;
+  $color: defaults.$collapsed-items-link-color;
 
-  font-family: $font-family;
-  font-size: $font-size;
+  font-family: defaults.$font-family;
+  font-size: defaults.$font-size;
   color: $color;
 
   // https://sharkcoder.com/visual/borders
   $size: 8px;
-  padding: $padding-half;
+  padding: styles.$padding-half;
   border: $size solid transparent;
   border-width: $size 0;
-  background-color: $contents-background-color;
+  background-color: defaults.$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%),
@@ -40,13 +41,13 @@ div.jse-collapsed-items {
   display: flex;
 
   &.jse-selected {
-    background-color: $selection-background-color;
-    --jse-collapsed-items-background-color: #{$collapsed-items-selected-background-color};
+    background-color: defaults.$selection-background-color;
+    --jse-collapsed-items-background-color: #{defaults.$collapsed-items-selected-background-color};
   }
 
   div.jse-text,
   button.jse-expand-items {
-    margin: 0 $padding-half;
+    margin: 0 styles.$padding-half;
   }
 
   div.jse-text {
@@ -66,7 +67,7 @@ div.jse-collapsed-items {
 
     &:hover,
     &:focus {
-      color: $collapsed-items-link-color-highlight;
+      color: defaults.$collapsed-items-link-color-highlight;
     }
   }
 }
diff --git a/src/lib/components/modes/treemode/JSONKey.scss b/src/lib/components/modes/treemode/JSONKey.scss
index f842022e..25fb5974 100644
--- a/src/lib/components/modes/treemode/JSONKey.scss
+++ b/src/lib/components/modes/treemode/JSONKey.scss
@@ -1,14 +1,15 @@
-@import '../../../styles';
+@use '../../../styles';
+@use '../../../themes/defaults';
 
 .jse-key {
   display: inline-block;
   min-width: 2em;
-  padding: 0 $input-padding;
+  padding: 0 styles.$input-padding;
   box-sizing: border-box;
   outline: none;
   border-radius: 1px;
   vertical-align: top;
-  color: $key-color;
+  color: defaults.$key-color;
 
   word-break: normal;
   overflow-wrap: normal; // not anywhere as for JSONValue
@@ -16,12 +17,12 @@
 
   &.jse-empty {
     min-width: 3em;
-    outline: 1px dotted $tag-background;
+    outline: 1px dotted defaults.$tag-background;
     -moz-outline-radius: 2px;
 
     &::after {
       pointer-events: none;
-      color: $tag-background;
+      color: defaults.$tag-background;
       content: 'key';
     }
   }
diff --git a/src/lib/components/modes/treemode/JSONNode.scss b/src/lib/components/modes/treemode/JSONNode.scss
index 2d3584eb..66077f8b 100644
--- a/src/lib/components/modes/treemode/JSONNode.scss
+++ b/src/lib/components/modes/treemode/JSONNode.scss
@@ -1,15 +1,16 @@
-@import '../../../styles';
+@use '../../../styles';
+@use '../../../themes/defaults';
 
 .jse-expand {
-  width: $indent-size;
+  width: defaults.$indent-size;
   padding: 0;
   margin: 0;
   border: none;
   cursor: pointer;
   background: transparent;
-  color: $delimiter-color;
-  font-size: $font-size-mono;
-  height: $line-height;
+  color: defaults.$delimiter-color;
+  font-size: defaults.$font-size-mono;
+  height: defaults.$line-height;
 
   &:hover {
     opacity: 0.8;
@@ -21,27 +22,27 @@
 .jse-index,
 .jse-bracket {
   vertical-align: top;
-  color: $delimiter-color;
+  color: defaults.$delimiter-color;
 }
 
 .jse-index {
-  padding: 0 $padding-half;
+  padding: 0 styles.$padding-half;
 }
 
 .jse-bracket {
   padding: 0 2px;
 
   &.jse-expanded {
-    padding-right: $padding;
+    padding-right: defaults.$padding;
   }
 }
 
 .jse-tag {
   border: none;
   font-size: 80%;
-  font-family: $font-family;
-  color: $tag-color;
-  background: $tag-background;
+  font-family: defaults.$font-family;
+  color: defaults.$tag-color;
+  background: defaults.$tag-background;
   border-radius: 2px;
   cursor: pointer;
   //position: relative;
@@ -67,11 +68,11 @@
 
 .jse-json-node {
   position: relative;
-  color: $text-color;
+  color: defaults.$text-color;
 
   &.jse-root {
     min-height: 100%;
-    padding-bottom: $contents-padding;
+    padding-bottom: styles.$contents-padding;
     box-sizing: border-box;
 
     > .jse-contents-outer > .jse-contents {
@@ -89,7 +90,7 @@
   .jse-header-outer,
   .jse-footer-outer {
     display: flex;
-    margin-left: calc(var(--level) * $indent-size);
+    margin-left: calc(var(--level) * defaults.$indent-size);
   }
 
   .jse-header {
@@ -105,7 +106,7 @@
 
   .jse-contents-outer {
     display: flex;
-    margin-left: calc(var(--level) * $indent-size);
+    margin-left: calc(var(--level) * defaults.$indent-size);
   }
 
   .jse-header,
@@ -116,8 +117,8 @@
   }
 
   .jse-contents {
-    padding-left: $indent-size;
-    cursor: $contents-cursor;
+    padding-left: defaults.$indent-size;
+    cursor: defaults.$contents-cursor;
 
     .jse-value-outer {
       display: inline-flex;
@@ -126,17 +127,17 @@
 
   .jse-footer {
     display: inline-flex;
-    padding-left: calc($indent-size + $input-padding);
+    padding-left: calc(defaults.$indent-size + styles.$input-padding);
   }
 
   .jse-header,
   .jse-contents,
   .jse-footer {
-    background: $contents-background-color;
+    background: defaults.$contents-background-color;
   }
 
   .jse-insert-selection-area {
-    padding: 0 $padding-half;
+    padding: 0 styles.$padding-half;
     flex: 1; // must fill all left over space at the right side of the editor, so you can click there
 
     &.jse-inside {
@@ -161,16 +162,16 @@
     display: flex;
     position: relative;
     z-index: 1; // prevent the next line half-overlapping the pointer
-    margin-left: calc(var(--level) * $indent-size);
+    margin-left: calc(var(--level) * defaults.$indent-size);
 
     max-width: 250px;
     min-width: 100px;
     height: 0;
-    margin-right: $padding-half;
+    margin-right: styles.$padding-half;
     outline: $height-half solid; // color depends on hovered/selected/inactive+selected
 
     &.jse-hovered {
-      outline-color: $context-menu-pointer-hover-background;
+      outline-color: defaults.$context-menu-pointer-hover-background;
     }
   }
 
@@ -183,8 +184,8 @@
   .jse-meta,
   .jse-footer {
     &:hover {
-      background: $hover-background-color;
-      cursor: $contents-cursor;
+      background: defaults.$hover-background-color;
+      cursor: defaults.$contents-cursor;
     }
   }
 
@@ -196,8 +197,8 @@
     .jse-props .jse-header,
     .jse-props .jse-contents,
     .jse-footer {
-      background: $hover-background-color;
-      cursor: $contents-cursor;
+      background: defaults.$hover-background-color;
+      cursor: defaults.$contents-cursor;
 
       .jse-value-outer,
       .jse-meta {
@@ -213,8 +214,8 @@
     .jse-header,
     .jse-contents,
     .jse-footer {
-      background: $selection-background-color;
-      cursor: $contents-selected-cursor;
+      background: defaults.$selection-background-color;
+      cursor: defaults.$contents-selected-cursor;
     }
 
     .jse-key-outer,
@@ -230,8 +231,8 @@
 
   // key selected
   .jse-key-outer.jse-selected-key {
-    background: $selection-background-color;
-    cursor: $contents-selected-cursor;
+    background: defaults.$selection-background-color;
+    cursor: defaults.$contents-selected-cursor;
   }
 
   // value selected
@@ -243,8 +244,8 @@
     .jse-props .jse-header,
     .jse-props .jse-contents,
     .jse-footer {
-      background: $selection-background-color;
-      cursor: $contents-selected-cursor;
+      background: defaults.$selection-background-color;
+      cursor: defaults.$contents-selected-cursor;
 
       .jse-key-outer {
         &:hover {
@@ -261,7 +262,7 @@
 
   .jse-insert-area {
     &.jse-selected {
-      outline-color: $context-menu-pointer-background;
+      outline-color: defaults.$context-menu-pointer-background;
     }
   }
 }
diff --git a/src/lib/components/modes/treemode/TreeMode.scss b/src/lib/components/modes/treemode/TreeMode.scss
index 0fe9846d..537f470f 100644
--- a/src/lib/components/modes/treemode/TreeMode.scss
+++ b/src/lib/components/modes/treemode/TreeMode.scss
@@ -1,17 +1,18 @@
-@import '../../../styles';
+@use '../../../styles';
+@use '../../../themes/defaults';
 
 .jse-tree-mode {
   flex: 1;
   display: flex;
   flex-direction: column;
   position: relative;
-  background: $background-color;
+  background: defaults.$background-color;
   min-width: 0;
   min-height: 0;
-  font-family: $font-family-mono;
-  font-size: $font-size-mono;
-  color: $text-color;
-  line-height: $line-height;
+  font-family: defaults.$font-family-mono;
+  font-size: defaults.$font-size-mono;
+  color: defaults.$text-color;
+  line-height: defaults.$line-height;
 
   .jse-hidden-input-label {
     .jse-hidden-input {
@@ -28,15 +29,15 @@
   }
 
   &.no-main-menu {
-    border-top: $main-border;
+    border-top: defaults.$main-border;
   }
 
   .jse-search-box-container {
     position: relative;
     height: 0;
-    top: $padding;
-    margin-right: calc($padding + 20px);
-    margin-left: $padding;
+    top: defaults.$padding;
+    margin-right: calc(defaults.$padding + 20px);
+    margin-left: defaults.$padding;
     text-align: right;
     z-index: 3; // must be above the ContextMenuButton
   }
@@ -45,14 +46,14 @@
     flex: 1;
     overflow: auto;
     position: relative;
-    padding: $contents-padding;
+    padding: styles.$contents-padding;
     display: flex;
     flex-direction: column;
-    border-left: $main-border;
-    border-right: $main-border;
+    border-left: defaults.$main-border;
+    border-right: defaults.$main-border;
 
     &:last-child {
-      border-bottom: $main-border;
+      border-bottom: defaults.$main-border;
     }
 
     .jse-loading-space {
@@ -62,17 +63,17 @@
     .jse-loading {
       flex: 2;
       text-align: center;
-      color: $panel-color-readonly;
+      color: defaults.$panel-color-readonly;
       box-sizing: border-box;
-      font-family: $font-family;
-      font-size: $font-size;
+      font-family: defaults.$font-family;
+      font-size: defaults.$font-size;
     }
 
     .jse-search-box-background {
       $search-box-height: 100px;
-      border: calc($search-box-height / 2) solid $modal-background;
-      margin: -$contents-padding;
-      margin-bottom: $contents-padding;
+      border: calc($search-box-height / 2) solid defaults.$modal-background;
+      margin: -(styles.$contents-padding);
+      margin-bottom: styles.$contents-padding;
       display: inline-block;
     }
   }
diff --git a/src/lib/components/modes/treemode/ValidationErrorIcon.scss b/src/lib/components/modes/treemode/ValidationErrorIcon.scss
index 99f47977..bf35ba7a 100644
--- a/src/lib/components/modes/treemode/ValidationErrorIcon.scss
+++ b/src/lib/components/modes/treemode/ValidationErrorIcon.scss
@@ -1,35 +1,36 @@
-@import '../../../styles';
+@use '../../../styles';
+@use '../../../themes/defaults';
 
 // TODO: create a class shared by .expand and .validation-error buttons
 button.jse-validation-error {
-  @include jsoneditor-button;
+  @include styles.jsoneditor-button;
 
   padding: 0;
   margin: 0;
   vertical-align: top;
   display: inline-flex;
 
-  color: $error-color;
+  color: defaults.$error-color;
 }
 
 button.jse-validation-info {
-  @include jsoneditor-button;
+  @include styles.jsoneditor-button;
 
   padding: 0;
   margin: 0;
   vertical-align: top;
   display: inline-flex;
 
-  color: $info-color;
+  color: defaults.$info-color;
 }
 
 button.jse-validation-warning {
-  @include jsoneditor-button;
+  @include styles.jsoneditor-button;
 
   padding: 0;
   margin: 0;
   vertical-align: top;
   display: inline-flex;
 
-  color: $warning-color;
+  color: defaults.$warning-color;
 }
diff --git a/src/lib/components/modes/treemode/Welcome.scss b/src/lib/components/modes/treemode/Welcome.scss
index 1a3ca2b3..826d9c85 100644
--- a/src/lib/components/modes/treemode/Welcome.scss
+++ b/src/lib/components/modes/treemode/Welcome.scss
@@ -1,20 +1,21 @@
-@import '../../../styles';
+@use '../../../styles';
+@use '../../../themes/defaults';
 
 .jse-welcome {
   flex: 1;
   overflow: auto;
-  font-family: $font-family;
-  font-size: $font-size;
+  font-family: defaults.$font-family;
+  font-size: defaults.$font-size;
 
   display: flex;
   flex-direction: column;
   align-items: center;
 
-  border-left: $main-border;
-  border-right: $main-border;
+  border-left: defaults.$main-border;
+  border-right: defaults.$main-border;
 
   &:last-child {
-    border-bottom: $main-border;
+    border-bottom: defaults.$main-border;
   }
 
   .jse-space.jse-before {
@@ -29,18 +30,18 @@
     display: flex;
     flex-direction: column;
     max-width: 300px;
-    margin: 2em $padding;
-    gap: $padding;
+    margin: 2em defaults.$padding;
+    gap: defaults.$padding;
 
     .jse-welcome-title {
     }
 
     .jse-welcome-info {
-      color: $panel-color-readonly;
+      color: defaults.$panel-color-readonly;
     }
 
     button {
-      @include jsoneditor-button-primary;
+      @include styles.jsoneditor-button-primary;
     }
   }
 }
diff --git a/src/lib/components/modes/treemode/highlight/SearchResultHighlighter.scss b/src/lib/components/modes/treemode/highlight/SearchResultHighlighter.scss
index e1e04e26..b5ccf552 100644
--- a/src/lib/components/modes/treemode/highlight/SearchResultHighlighter.scss
+++ b/src/lib/components/modes/treemode/highlight/SearchResultHighlighter.scss
@@ -1,11 +1,12 @@
-@import '../../../../styles';
+@use '../../../../styles';
+@use '../../../../themes/defaults';
 
 .jse-highlight {
-  background-color: $search-match-color;
-  outline: $search-match-outline;
+  background-color: defaults.$search-match-color;
+  outline: defaults.$search-match-outline;
 
   &.jse-active {
-    background-color: $search-match-active-color;
-    outline: $search-match-active-outline;
+    background-color: defaults.$search-match-active-color;
+    outline: defaults.$search-match-active-outline;
   }
 }
diff --git a/src/lib/plugins/value/components/BooleanToggle.scss b/src/lib/plugins/value/components/BooleanToggle.scss
index 558eff6f..e564701d 100644
--- a/src/lib/plugins/value/components/BooleanToggle.scss
+++ b/src/lib/plugins/value/components/BooleanToggle.scss
@@ -1,4 +1,5 @@
-@import '../../../styles';
+@use '../../../styles';
+@use '../../../themes/defaults';
 
 .jse-boolean-toggle {
   padding: 0;
@@ -6,7 +7,7 @@
   vertical-align: top;
   display: inline-flex;
 
-  color: $value-color-boolean;
+  color: defaults.$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 01eede97..c9beb2a9 100644
--- a/src/lib/plugins/value/components/ColorPicker.scss
+++ b/src/lib/plugins/value/components/ColorPicker.scss
@@ -1,17 +1,18 @@
-@import '../../../styles';
+@use '../../../styles';
+@use '../../../themes/defaults';
 
 .jse-color-picker-button {
-  font-size: $font-size-mono;
+  font-size: defaults.$font-size-mono;
 
-  width: $color-picker-button-size;
-  height: $color-picker-button-size;
+  width: defaults.$color-picker-button-size;
+  height: defaults.$color-picker-button-size;
   box-sizing: border-box;
   padding: 0;
-  margin: 2px 0 0 $padding-half;
+  margin: 2px 0 0 styles.$padding-half;
   display: inline-flex;
   vertical-align: top;
 
-  border: 1px solid $text-color;
+  border: 1px solid defaults.$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 11fd7945..c7b8a1de 100644
--- a/src/lib/plugins/value/components/EnumValue.scss
+++ b/src/lib/plugins/value/components/EnumValue.scss
@@ -1,8 +1,9 @@
-@import '../../../styles';
-@import '../../../components/controls/EditableDivShared';
+@use '../../../styles';
+@use '../../../components/controls/EditableDivShared';
+@use '../../../themes/defaults';
 
 .jse-enum-value {
-  background: $hover-background-color;
+  background: defaults.$hover-background-color;
   border: none;
   padding: 0;
 
@@ -13,12 +14,12 @@
   outline: none;
 
   &.jse-selected {
-    background: $selection-background-color;
+    background: defaults.$selection-background-color;
     color: inherit;
   }
 
   &.jse-value:focus {
     // override the color to black when editing
-    color: $text-color;
+    color: defaults.$text-color;
   }
 }
diff --git a/src/lib/plugins/value/components/ReadonlyValue.scss b/src/lib/plugins/value/components/ReadonlyValue.scss
index 0b70734d..4c239a0f 100644
--- a/src/lib/plugins/value/components/ReadonlyValue.scss
+++ b/src/lib/plugins/value/components/ReadonlyValue.scss
@@ -1,11 +1,12 @@
-@import '../../../styles';
-@import '../../../components/controls/EditableDivShared';
+@use '../../../styles';
+@use '../../../components/controls/EditableDivShared';
+@use '../../../themes/defaults';
 
 // TODO: also share most of the following styling with EditableDiv
 .jse-value {
   display: inline-block;
   min-width: 2em;
-  padding: 0 $input-padding;
+  padding: 0 styles.$input-padding;
   box-sizing: border-box;
   outline: none;
   border-radius: 1px;
@@ -22,12 +23,12 @@
 
   &.jse-empty {
     min-width: 4em;
-    outline: 1px dotted $tag-background;
+    outline: 1px dotted defaults.$tag-background;
     -moz-outline-radius: 2px;
 
     &::after {
       pointer-events: none;
-      color: $tag-background;
+      color: defaults.$tag-background;
       content: 'value';
     }
   }
diff --git a/src/lib/plugins/value/components/TimestampTag.scss b/src/lib/plugins/value/components/TimestampTag.scss
index 583f66fd..e4ae9206 100644
--- a/src/lib/plugins/value/components/TimestampTag.scss
+++ b/src/lib/plugins/value/components/TimestampTag.scss
@@ -1,4 +1,5 @@
-@import '../../../styles';
+@use '../../../styles';
+@use '../../../themes/defaults';
 
 .jse-timestamp {
   padding: 0;
@@ -6,5 +7,5 @@
   vertical-align: middle;
   display: inline-flex;
 
-  color: $value-color-number;
+  color: defaults.$value-color-number;
 }
diff --git a/src/lib/styles.scss b/src/lib/styles.scss
index 04905543..9d560020 100644
--- a/src/lib/styles.scss
+++ b/src/lib/styles.scss
@@ -1,4 +1,4 @@
-@import 'themes/defaults.scss';
+@use 'themes/defaults.scss';
 
 $pressed-button-margin: 2px;
 $input-padding: 5px;
@@ -7,8 +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-half: calc(0.5 * $padding);
-$padding-double: calc(2 * $padding);
+$padding-half: calc(0.5 * defaults.$padding);
+$padding-double: calc(2 * defaults.$padding);
 $menu-padding: 5px;
 $bottom-height: 5px;
 $contents-padding: 2px;
@@ -20,8 +20,8 @@ $errors-overview-max-height: 25%;
   background: transparent;
   color: inherit;
   cursor: pointer;
-  font-family: $font-family;
-  font-size: $font-size;
+  font-family: defaults.$font-family;
+  font-size: defaults.$font-size;
   padding: $menu-padding;
   margin: 0;
 }
@@ -31,20 +31,20 @@ $errors-overview-max-height: 25%;
 
   flex: 1;
   white-space: nowrap;
-  padding: $padding;
+  padding: defaults.$padding;
   color: inherit;
 
   &:hover {
-    background: $context-menu-background-highlight;
+    background: defaults.$context-menu-background-highlight;
   }
 
   &:focus {
-    background: $context-menu-background-highlight;
+    background: defaults.$context-menu-background-highlight;
     z-index: 1;
   }
 
   &:disabled {
-    color: $context-menu-color-disabled;
+    color: defaults.$context-menu-color-disabled;
     background: unset;
   }
 
@@ -60,53 +60,53 @@ $errors-overview-max-height: 25%;
 @mixin jsoneditor-button-primary {
   @include jsoneditor-button;
 
-  background: $button-primary-background;
-  color: $button-primary-color;
-  padding: $padding $padding-double;
+  background: defaults.$button-primary-background;
+  color: defaults.$button-primary-color;
+  padding: defaults.$padding $padding-double;
   border-radius: $border-radius;
 
   &:hover {
-    background: $button-primary-background-highlight;
+    background: defaults.$button-primary-background-highlight;
   }
 
   &:disabled {
-    background: $button-primary-background-disabled;
+    background: defaults.$button-primary-background-disabled;
   }
 }
 
 @mixin jsoneditor-button-secondary {
   @include jsoneditor-button;
 
-  background: $button-secondary-background;
-  color: $button-secondary-color;
-  padding: $padding $padding-double;
+  background: defaults.$button-secondary-background;
+  color: defaults.$button-secondary-color;
+  padding: defaults.$padding $padding-double;
   border-radius: $border-radius;
 
   &:hover {
-    background: $button-secondary-background-highlight;
+    background: defaults.$button-secondary-background-highlight;
   }
 
   &:disabled {
-    background: $button-secondary-background-disabled;
+    background: defaults.$button-secondary-background-disabled;
   }
 }
 
 @mixin modal-input-mixin {
-  border: $input-border;
+  border: defaults.$input-border;
   outline: none;
   box-sizing: border-box;
   padding: $padding-half;
-  font-family: $font-family-mono;
-  font-size: $font-size-mono;
+  font-family: defaults.$font-family-mono;
+  font-size: defaults.$font-size-mono;
   color: inherit;
-  background: $input-background;
+  background: defaults.$input-background;
 
   &:focus {
-    border: $input-border-focus;
+    border: defaults.$input-border-focus;
   }
 
   &:read-only {
-    background: $input-background-readonly;
+    background: defaults.$input-background-readonly;
   }
 }
 
@@ -129,12 +129,12 @@ $errors-overview-max-height: 25%;
   font-size: inherit;
   color: inherit;
   display: flex;
-  gap: $padding;
-  padding: $padding-half $padding $padding-half $padding-half;
+  gap: defaults.$padding;
+  padding: $padding-half defaults.$padding $padding-half $padding-half;
   width: 100%;
 
   &:hover {
-    background: $table-header-background-highlight;
+    background: defaults.$table-header-background-highlight;
   }
 
   &:not(&.jse-readonly) {
@@ -150,11 +150,11 @@ $errors-overview-max-height: 25%;
   min-height: 0;
   padding: 0;
 
-  font-family: $font-family;
-  font-size: $font-size;
+  font-family: defaults.$font-family;
+  font-size: defaults.$font-size;
   line-height: normal;
-  background: $modal-background;
-  color: $text-color;
+  background: defaults.$modal-background;
+  color: defaults.$text-color;
 }
 
 @mixin jse-modal-contents($modal-padding: 20px) {
@@ -171,7 +171,7 @@ $errors-overview-max-height: 25%;
     flex-direction: row;
     justify-content: flex-end;
 
-    padding-top: $padding;
+    padding-top: defaults.$padding;
 
     button {
       &.jse-primary {