diff --git a/docs/src/assets/scss/no-js.scss b/docs/src/assets/scss/no-js.scss
new file mode 100644
index 00000000000..d9a7f1aa485
--- /dev/null
+++ b/docs/src/assets/scss/no-js.scss
@@ -0,0 +1,76 @@
+@media (prefers-color-scheme: dark) {
+    .no-js {
+        pre[class*="language-"] {
+            color: var(--color-neutral-100);
+        }
+
+        .token {
+            &.comment,
+            .prolog,
+            .doctype,
+            .cdata {
+                color: #8e9fae;
+            }
+        }
+
+        .logo-component {
+            fill: #fff;
+        }
+
+        #logo-center {
+            opacity: 0.6;
+        }
+
+        .rule__categories,
+        .rule__status {
+            background: var(--body-background-color);
+        }
+
+        .alert {
+            &.alert--warning {
+                color: var(--color-rose-300);
+                background-color: var(--color-rose-900);
+                border: 1px solid var(--color-rose-300);
+
+                .alert__type {
+                    color: var(--color-rose-200);
+                }
+            }
+
+            &.alert--important {
+                color: var(--color-warning-300);
+                background-color: var(--color-warning-900);
+                border: 1px solid var(--color-warning-300);
+
+                .alert__type {
+                    color: var(--color-warning-200);
+                }
+            }
+
+            &.alert--tip {
+                color: var(--color-success-300);
+                background-color: var(--color-success-900);
+                border: 1px solid var(--color-success-300);
+
+                .alert__type {
+                    color: var(--color-success-200);
+                }
+            }
+        }
+
+        .alert__type,
+        .alert__learn-more {
+            .alert--warning & {
+                color: var(--color-rose-200);
+            }
+
+            .alert--important & {
+                color: var(--color-warning-200);
+            }
+
+            .alert--tip & {
+                color: var(--color-success-200);
+            }
+        }
+    }
+}
diff --git a/docs/src/assets/scss/styles.scss b/docs/src/assets/scss/styles.scss
index 8907a6c4bf9..19bf05987ac 100644
--- a/docs/src/assets/scss/styles.scss
+++ b/docs/src/assets/scss/styles.scss
@@ -33,3 +33,5 @@
 @import "carbon-ads";
 
 @import "utilities";
+
+@import "no-js";
diff --git a/docs/src/assets/scss/tokens/themes.scss b/docs/src/assets/scss/tokens/themes.scss
index a8104a5b346..9c350be3b96 100644
--- a/docs/src/assets/scss/tokens/themes.scss
+++ b/docs/src/assets/scss/tokens/themes.scss
@@ -110,6 +110,7 @@
         --hero-background-color: var(--color-neutral-800);
         --footer-background-color: var(--color-neutral-800);
         --outline-color: #fff;
+        --img-background-color: var(--color-neutral-300);
     }
 }