diff --git a/docs/package.json b/docs/package.json
index 7aead3cdfa9..aae609e17a2 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -8,9 +8,9 @@
     "license": "ISC",
     "scripts": {
         "images": "imagemin '_site/assets/images' --out-dir='_site/assets/images'",
-        "watch:sass": "node-sass --watch src/assets/scss -o src/assets/css",
+        "watch:sass": "sass --watch --poll src/assets/scss:src/assets/css",
         "watch:eleventy": "eleventy --serve --port=2023",
-        "build:sass": "node-sass src/assets/scss -o src/assets/css",
+        "build:sass": "sass --style=compressed src/assets/scss:src/assets/css --no-source-map",
         "build:eleventy": "npx @11ty/eleventy",
         "start": "npm-run-all build:sass --parallel watch:*  --parallel images",
         "build": "npm-run-all build:sass --parallel build:*   --parallel images"
@@ -31,10 +31,9 @@
         "markdown-it": "^12.2.0",
         "markdown-it-anchor": "^8.1.2",
         "netlify-cli": "^10.3.1",
-        "node-sass": "^6.0.1",
         "npm-run-all": "^4.1.5",
         "rimraf": "^3.0.2",
-        "sass": "^1.38.0",
+        "sass": "^1.52.1",
         "slugify": "^1.6.3"
     }
 }
diff --git a/docs/src/assets/scss/tokens/themes.scss b/docs/src/assets/scss/tokens/themes.scss
index 1a262e020c0..f6c3b05ced3 100644
--- a/docs/src/assets/scss/tokens/themes.scss
+++ b/docs/src/assets/scss/tokens/themes.scss
@@ -93,6 +93,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
+    html{
     --secondary-button-background-color: var(--color-neutral-700);
     --secondary-button-hover-color: var(--color-neutral-800);
     --secondary-button-text-color: var(--body-text-color);
@@ -113,6 +114,7 @@
     --hero-background-color: var(--color-neutral-800);
     --footer-background-color: var(--color-neutral-800);
     --outline-color: #fff;
+    }
 }