diff --git a/modules/ui_gradio_extensions.py b/modules/ui_gradio_extensions.py
index ed57c1e9896..9c9bc68cebd 100644
--- a/modules/ui_gradio_extensions.py
+++ b/modules/ui_gradio_extensions.py
@@ -46,6 +46,10 @@ def stylesheet(fn):
     dark = resolve_var('background_fill_primary_dark')
     head += f'<style>html {{ background-color: {light}; }} @media (prefers-color-scheme: dark) {{ html {{background-color:  {dark}; }} }}</style>'
 
+    light_text = resolve_var('body_text_color')
+    dark_text = resolve_var('body_text_color_dark')
+    head += f'<style>html {{ --body-background-fill: {light}; --body-text-color: {light_text}; }} html:has(body.dark) {{ --body-background-fill: {dark}; --body-text-color: {dark_text}; }}</style>'
+
     return head
 
 
diff --git a/style.css b/style.css
index 26e80c4cfac..cb6fb114b70 100644
--- a/style.css
+++ b/style.css
@@ -20,16 +20,13 @@ div.gradio-image button[aria-label="Edit"] {
 }
 
 
-html:has(body.dark) {
-    /**
-     * The CSS variables --body-background-fill and --body-text-color are not apply to the HTML element with the dark theme
-     */
-    /* scrollbar-color: var(--body-text-color) var(--body-background-fill) */
-    scrollbar-color: #f3f4f6 #0b0f19;
+html {
+    scrollbar-color: var(--body-text-color) var(--body-background-fill)
 }
 
 body {
-    background: var(--body-background-fill, #0b0f19);
+    background: var(--body-background-fill);
+    color: var(--body-text-color);
 }
 
 .block.padded:not(.gradio-accordion) {