chore: tweak scrollbar color with theme

AUTOMATIC1111#16153
bluelovers · Jul 9, 2024 · 2ee5833 · 2ee5833
1 parent 372c841
commit 2ee5833
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git 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
@@ -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) {