diff --git a/package-lock.json b/package-lock.json
index af245fbf3..cb7993dff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -136,7 +136,6 @@
         "mini-css-extract-plugin": "^2.7.6",
         "ncp": "^2.0.0",
         "node-loader": "^2.0.0",
-        "node-sass": "^9.0.0",
         "postcss": "^8.4.31",
         "postcss-import": "^15.1.0",
         "postcss-loader": "^7.3.3",
@@ -146,6 +145,7 @@
         "react-svg-loader": "^3.0.3",
         "remote-redux-devtools": "^0.5.16",
         "rimraf": "^5.0.5",
+        "sass": "^1.69.5",
         "sass-loader": "^13.3.2",
         "style-loader": "^3.3.3",
         "stylelint": "^15.11.0",
@@ -6660,6 +6660,8 @@
       "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
       "integrity": "sha512-VUeSMD8nEGBWaZK4lizI1sf3yEC7pnAQ/mrI7pC2fBz2s/tq5jWWEngTwaf0Gruu/OoXRGLGg1XFqpYBiGTYJA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": "*"
       }
@@ -7882,6 +7884,8 @@
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
       "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "camelcase": "^5.3.1",
         "map-obj": "^4.0.0",
@@ -7899,6 +7903,8 @@
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
       "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -13182,6 +13188,8 @@
       "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
       "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "globule": "^1.0.0"
       },
@@ -13248,6 +13256,8 @@
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
       "integrity": "sha512-F5aQMywwJ2n85s4hJPTT9RPxGmubonuB10MNYo17/xph174n2MIR33HRguhzVag10O/npM7SPk73LMZNP+FaWw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13588,6 +13598,8 @@
       "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.4.tgz",
       "integrity": "sha512-OPTIfhMBh7JbBYDpa5b+Q5ptmMWKwcNcFSR/0c6t8V4f3ZAVBEsKNY37QdVqmLRYSMhOUGYrY0QhSoEpzGr/Eg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "glob": "~7.1.1",
         "lodash": "^4.17.21",
@@ -13602,6 +13614,8 @@
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
       "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -13622,6 +13636,8 @@
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz",
       "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -18798,6 +18814,8 @@
       "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
       "integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@types/minimist": "^1.2.0",
         "camelcase-keys": "^6.2.2",
@@ -19339,7 +19357,9 @@
       "version": "2.18.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.18.0.tgz",
       "integrity": "sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/nanoid": {
       "version": "5.0.3",
@@ -19711,6 +19731,8 @@
       "integrity": "sha512-yltEuuLrfH6M7Pq2gAj5B6Zm7m+gdZoG66wTqG6mIZV/zijq3M2OO2HswtT6oBspPyFhHDcaxWpsBm0fRNDHPg==",
       "dev": true,
       "hasInstallScript": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "async-foreach": "^0.1.3",
         "chalk": "^4.1.2",
@@ -19739,6 +19761,8 @@
       "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz",
       "integrity": "sha512-8KG5RD0GVP4ydEzRn/I4BNDuxDtqVbOdm8675T49OIG/NGhaK0pjPX7ZcDlvKYbA+ulvVK3ztfcF4uBdOxuJbQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@gar/promisify": "^1.0.1",
         "semver": "^7.3.5"
@@ -19750,6 +19774,8 @@
       "integrity": "sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==",
       "deprecated": "This functionality has been moved to @npmcli/fs",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "mkdirp": "^1.0.4",
         "rimraf": "^3.0.2"
@@ -19763,6 +19789,8 @@
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
       "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">= 6"
       }
@@ -19772,6 +19800,8 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -19787,6 +19817,8 @@
       "resolved": "https://registry.npmjs.org/cacache/-/cacache-15.3.0.tgz",
       "integrity": "sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@npmcli/fs": "^1.0.0",
         "@npmcli/move-file": "^1.0.1",
@@ -19816,6 +19848,8 @@
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -19832,6 +19866,8 @@
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -19843,13 +19879,17 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/node-sass/node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -19870,6 +19910,8 @@
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -19879,6 +19921,8 @@
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
       "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@tootallnate/once": "1",
         "agent-base": "6",
@@ -19893,6 +19937,8 @@
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -19905,6 +19951,8 @@
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
       "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -19917,6 +19965,8 @@
       "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-1.4.1.tgz",
       "integrity": "sha512-CGH1eblLq26Y15+Azk7ey4xh0J/XfJfrCox5LDJiKqI2Q2iwOLOKrlmIaODiSQS8d18jalF6y2K2ePUm0CmShw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "minipass": "^3.1.0",
         "minipass-sized": "^1.0.3",
@@ -19934,6 +19984,8 @@
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "bin": {
         "mkdirp": "bin/cmd.js"
       },
@@ -19946,6 +19998,8 @@
       "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-8.4.1.tgz",
       "integrity": "sha512-olTJRgUtAb/hOXG0E93wZDs5YiJlgbXxTwQAFHyNlRsXQnYzUaF2aGgujZbw+hR8aF4ZG/rST57bWMWD16jr9w==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "env-paths": "^2.2.0",
         "glob": "^7.1.4",
@@ -19970,6 +20024,8 @@
       "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-9.1.0.tgz",
       "integrity": "sha512-+zopwDy7DNknmwPQplem5lAZX/eCOzSvSNNcSKm5eVwTkOBzoktEfXsa9L23J/GIRhxRsaxzkPEhrJEpE2F4Gg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "agentkeepalive": "^4.1.3",
         "cacache": "^15.2.0",
@@ -19997,6 +20053,8 @@
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
       "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "abbrev": "1"
       },
@@ -20012,6 +20070,8 @@
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -20027,6 +20087,8 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
       "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -20042,6 +20104,8 @@
       "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-6.2.1.tgz",
       "integrity": "sha512-a6KW9G+6B3nWZ1yB8G7pJwL3ggLy1uTzKAgCb7ttblwqdz9fMGJUuTy3uFzEP48FAs9FLILlmzDlE2JJhVQaXQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "agent-base": "^6.0.2",
         "debug": "^4.3.3",
@@ -20056,6 +20120,8 @@
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
       "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "minipass": "^3.1.1"
       },
@@ -20068,6 +20134,8 @@
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -20080,6 +20148,8 @@
       "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
       "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "unique-slug": "^2.0.0"
       }
@@ -20089,6 +20159,8 @@
       "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz",
       "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "imurmurhash": "^0.1.4"
       }
@@ -20097,7 +20169,9 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/node-stream-zip": {
       "version": "1.15.0",
@@ -22852,6 +22926,8 @@
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
       "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@types/normalize-package-data": "^2.4.0",
         "normalize-package-data": "^2.5.0",
@@ -22867,6 +22943,8 @@
       "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
       "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "find-up": "^4.1.0",
         "read-pkg": "^5.2.0",
@@ -22884,6 +22962,8 @@
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
       "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "locate-path": "^5.0.0",
         "path-exists": "^4.0.0"
@@ -22897,6 +22977,8 @@
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
       "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "p-locate": "^4.1.0"
       },
@@ -22909,6 +22991,8 @@
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "p-try": "^2.0.0"
       },
@@ -22924,6 +23008,8 @@
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
       "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "p-limit": "^2.2.0"
       },
@@ -22936,6 +23022,8 @@
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
       "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -22944,13 +23032,17 @@
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
       "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/read-pkg/node_modules/normalize-package-data": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
       "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "hosted-git-info": "^2.1.4",
         "resolve": "^1.10.0",
@@ -22963,6 +23055,8 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
       "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "bin": {
         "semver": "bin/semver"
       }
@@ -22972,6 +23066,8 @@
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
       "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -23029,6 +23125,8 @@
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
       "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "indent-string": "^4.0.0",
         "strip-indent": "^3.0.0"
@@ -23775,11 +23873,30 @@
         "truncate-utf8-bytes": "^1.0.0"
       }
     },
+    "node_modules/sass": {
+      "version": "1.69.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
+      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/sass-graph": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-4.0.1.tgz",
       "integrity": "sha512-5YCfmGBmxoIRYHnKK2AKzrAkCoQ8ozO+iumT8K4tXJXRVCPf+7s1/9KxTSW3Rbvf+7Y7b4FR3mWyLnQr3PHocA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "glob": "^7.0.0",
         "lodash": "^4.17.11",
@@ -23798,6 +23915,8 @@
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -23953,6 +24072,8 @@
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.4.3.tgz",
       "integrity": "sha512-raKLgf1LI5QMQnG+RxHz6oK0sL3x3I4FN2UDLqgLOGO8hodECNnNh5BXn7fAyBxrA8zVzdQizQ6XjNJQ+uBwMw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "js-base64": "^2.4.9",
         "source-map": "^0.7.3"
@@ -23963,6 +24084,8 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
       "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">= 8"
       }
@@ -25057,6 +25180,8 @@
       "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
       "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "readable-stream": "^2.0.1"
       }
@@ -25306,6 +25431,8 @@
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
       "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "min-indent": "^1.0.0"
       },
@@ -27130,6 +27257,8 @@
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
       "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -27138,7 +27267,9 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-2.2.1.tgz",
       "integrity": "sha512-0z3j8R7MCjy10kc/g+qg7Ln3alJTodw9aDuVWZa3uiWqfuBMKeAeP2ocWcxoyM3D73yz3Jt/Pu4qPr4wHSdB/Q==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/true-myth": {
       "version": "4.1.1",
@@ -27626,6 +27757,8 @@
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
       "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
diff --git a/package.json b/package.json
index 4de300e05..59a315869 100644
--- a/package.json
+++ b/package.json
@@ -377,7 +377,6 @@
     "mini-css-extract-plugin": "^2.7.6",
     "ncp": "^2.0.0",
     "node-loader": "^2.0.0",
-    "node-sass": "^9.0.0",
     "postcss": "^8.4.31",
     "postcss-import": "^15.1.0",
     "postcss-loader": "^7.3.3",
@@ -387,6 +386,7 @@
     "react-svg-loader": "^3.0.3",
     "remote-redux-devtools": "^0.5.16",
     "rimraf": "^5.0.5",
+    "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",
     "stylelint": "^15.11.0",
@@ -410,7 +410,7 @@
   },
   "overrides": {
     "typed-scss-modules": {
-      "node-sass": "$node-sass"
+      "node-sass": "^9.0.0"
     }
   }
 }
diff --git a/src/renderer/assets/styles/global.css b/src/renderer/assets/styles/global.css
index aafb53c63..522573d09 100644
--- a/src/renderer/assets/styles/global.css
+++ b/src/renderer/assets/styles/global.css
@@ -1,8 +1,3 @@
-/*
-=-=-= global.css => './partials/variables.css'
-*/
-@import url('./partials/variables.scss');
-
 /*
 =-=-= global.css => './partials/mixins.css'
 */
diff --git a/src/renderer/assets/styles/global.scss b/src/renderer/assets/styles/global.scss
new file mode 100644
index 000000000..5e8506940
--- /dev/null
+++ b/src/renderer/assets/styles/global.scss
@@ -0,0 +1,3 @@
+.__LOAD_FILE_SELECTOR_NOT_USED_JUST_TO_TRIGGER_WEBPACK_SCSS_FILE__ {
+    display: none;
+}
\ No newline at end of file
diff --git a/src/renderer/assets/styles/global.scss.d.ts b/src/renderer/assets/styles/global.scss.d.ts
new file mode 100644
index 000000000..7bd8fa498
--- /dev/null
+++ b/src/renderer/assets/styles/global.scss.d.ts
@@ -0,0 +1 @@
+export declare const __LOAD_FILE_SELECTOR_NOT_USED_JUST_TO_TRIGGER_WEBPACK_SCSS_FILE__: string;
diff --git a/src/renderer/assets/styles/partials/variables.scss b/src/renderer/assets/styles/partials/variables.scss
index 8a9988b90..abcb95395 100644
--- a/src/renderer/assets/styles/partials/variables.scss
+++ b/src/renderer/assets/styles/partials/variables.scss
@@ -1,39 +1,80 @@
 /*
 =-=-= partials/variables.css
+=-=-= globally imported by sass-loader with : { additionalData: `@import "./src/renderer/assets/styles/partials/variables.scss";` }
 */
+
+@use "sass:map";
+
+$color-palette: (
+  light: (
+    --color-primary: #4d4d4d,
+    --color-secondary: #fff,
+    --color-tertiary: #67a3e0,
+    --color-disabled: #040303,
+    --color-light-grey: #f1f1f1,
+    --color-medium-grey: #e5e5e5,
+    --color-accent: rgb(0, 188, 212),
+    --color-accent-contrast: #fff,
+    --reader-fontColor: #000,
+    --color-button-primary: rgba(16, 83, 200, 1),
+    --color-button-secondary: rgba(16, 83, 200, 0.05),
+    --color-bg-tab: rgba(246, 246, 246, 0.84),
+    --setting-btn-primary: #3a00e5,
+    --setting-btn-secondary: #f7f5ff,
+  ),
+  dark: (
+    --color-primary: #fff,
+    --color-secondary: #4d4d4d,
+    --color-tertiary: #67a3e0,
+    --color-disabled: #b7b7b7,
+    --color-light-grey: #f1f1f1,
+    --color-medium-grey: #e5e5e5,
+    --color-accent: rgb(0, 188, 212),
+    --color-accent-contrast: #fff,
+    --reader-fontColor: #fff,
+    --color-button-primary: rgba(16, 83, 200, 1),
+    --color-button-secondary: rgba(16, 83, 200, 0.05),
+    --color-bg-tab: rgba(16, 18, 22, 0.6),
+    --setting-btn-primary: #fff,
+    --setting-btn-secondary: var(--color-secondary),
+  ),
+);
+
+@function color($color, $value) {
+  @return map-get(map-get($color-palette, $color), $value);
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     /* Colors */
-    --color-primary: #4d4d4d;
-    --color-secondary: #fff;
-    --color-tertiary: #67a3e0;
-    --color-disabled: #b7b7b7;
-    --color-light-grey: #f1f1f1;
-    --color-medium-grey: #e5e5e5;
-    --color-accent: rgb(0, 188, 212);
-    --color-accent-contrast: #fff;
-    --reader-fontColor: #000;
-    --color-button-primary: rgba(16, 83, 200, 1);
-    --color-button-secondary: rgba(16, 83, 200, 0.05);
+    @each $key, $value in map-get($color-palette, light) {
+      #{$key}: color(light, #{$key});
+    }
   }
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     /* Colors */
-    --color-primary: #fff;
-    --color-secondary: #4d4d4d;
-    --color-tertiary: #67a3e0;
-    --color-disabled: #b7b7b7;
-    --color-light-grey: #f1f1f1;
-    --color-medium-grey: #e5e5e5;
-    --color-accent: rgb(0, 188, 212);
-    --color-accent-contrast: #fff;
-    --reader-fontColor: #fff;
-    --color-button-primary: rgba(16, 83, 200, 1);
-    --color-button-secondary: rgba(16, 83, 200, 0.05);
+    @each $key, $value in map-get($color-palette, dark) {
+      #{$key}: color(dark, #{$key});
+    }
+  }
+}
+
+[data-theme="light"] {
+
+  /* Colors */
+  @each $key, $value in map-get($color-palette, light) {
+    #{$key}: color(light, #{$key});
+  }
+}
 
+[data-theme="dark"] {
 
+  /* Colors */
+  @each $key, $value in map-get($color-palette, dark) {
+    #{$key}: color(dark, #{$key});
   }
 }
 
diff --git a/src/renderer/library/components/App.tsx b/src/renderer/library/components/App.tsx
index 8662813f7..2b04cf760 100644
--- a/src/renderer/library/components/App.tsx
+++ b/src/renderer/library/components/App.tsx
@@ -23,7 +23,6 @@ import { apiAction } from "readium-desktop/renderer/library/apiAction";
 import DialogManager from "readium-desktop/renderer/library/components/dialog/DialogManager";
 import PageManager from "readium-desktop/renderer/library/components/PageManager";
 import { diLibraryGet } from "readium-desktop/renderer/library/di";
-
 import DownloadsPanel from "./DownloadsPanel";
 import LoaderMainLoad from "./LoaderMainLoad";
 import { toastActions } from "readium-desktop/common/redux/actions";
@@ -32,6 +31,9 @@ import { ToastType } from "readium-desktop/common/models/toast";
 import { acceptedExtensionArray } from "readium-desktop/common/extension";
 import Nunito from "readium-desktop/renderer/assets/fonts/nunito.ttf";
 
+import * as globalScssStyle from "readium-desktop/renderer/assets/styles/global.scss";
+globalScssStyle.__LOAD_FILE_SELECTOR_NOT_USED_JUST_TO_TRIGGER_WEBPACK_SCSS_FILE__;
+
 export default class App extends React.Component<{}, undefined> {
 
     constructor(props: {}) {
diff --git a/webpack.config.renderer-library.js b/webpack.config.renderer-library.js
index 1fc7ba0bd..e50a008cc 100644
--- a/webpack.config.renderer-library.js
+++ b/webpack.config.renderer-library.js
@@ -208,7 +208,15 @@ const scssLoaderConfig = [
             esModule: false,
         },
     },
-    "sass-loader",
+    {
+        loader: "sass-loader",
+        options: {
+            // Prefer `dart-sass`
+            implementation: require("sass"),
+            additionalData: `@import "./src/renderer/assets/styles/partials/variables.scss";`,
+            warnRuleAsWarning: true,
+        },
+    },
 ];
 
 let config = Object.assign(