add background color based on the OS mode (#7117)

* add background color based on the OS mode

* add changeset

* use static css instead

* format

* changes

* changes

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: pngwn <hello@pngwn.io>
Co-authored-by: Ali Abid <aliabid@Alis-MacBook-Pro.local>

.changeset/lucky-tips-occur.md

@@ -0,0 +1,6 @@
+---
+"@gradio/app": patch
+"gradio": patch
+---
+
+fix:add background color based on the OS mode

gradio/blocks.py

@@ -1612,6 +1612,18 @@ Received outputs:
             "stylesheets": self.stylesheets,
             "theme": self.theme.name,
             "protocol": "sse_v1",
+            "body_css": {
+                "body_background_fill": self.theme._get_computed_value(
+                    "body_background_fill"
+                ),
+                "body_text_color": self.theme._get_computed_value("body_text_color"),
+                "body_background_fill_dark": self.theme._get_computed_value(
+                    "body_background_fill_dark"
+                ),
+                "body_text_color_dark": self.theme._get_computed_value(
+                    "body_text_color_dark"
+                ),
+            },
         }
 
         def get_layout(block):

gradio/themes/base.py

@@ -6,6 +6,7 @@ import tempfile
 import textwrap
 from pathlib import Path
 from typing import Iterable
+import warnings
 
 import huggingface_hub
 import semantic_version as semver
@@ -93,6 +94,30 @@ class ThemeClass:
 
         return f"{css_code}\n{dark_css_code}"
 
+    def _get_computed_value(self, property: str, depth=0) -> str:
+        MAX_DEPTH = 100
+        if depth > MAX_DEPTH:
+            warnings.warn(f"Cannot resolve '{property}' - circular reference detected.")
+            return ""
+        is_dark = property.endswith("_dark")
+        if is_dark:
+            set_value = getattr(
+                self, property, getattr(self, property[:-5], "")
+            )  # if dark mode value is unavailable, use light mode value
+        else:
+            set_value = getattr(self, property, "")
+        pattern = r"(\*)([\w_]+)(\b)"
+
+        def repl_func(match, depth):
+            word = match.group(2)
+            dark_suffix = "_dark" if property.endswith("_dark") else ""
+            return self._get_computed_value(word + dark_suffix, depth + 1)
+
+        computed_value = re.sub(
+            pattern, lambda match: repl_func(match, depth), set_value
+        )
+        return computed_value
+
     def to_dict(self):
         """Convert the theme into a python dictionary."""
         schema = {"theme": {}}

js/app/index.html

@@ -16,6 +16,29 @@
 			content="width=device-width, initial-scale=1, shrink-to-fit=no"
 		/>
 
+		<style>
+			:root {
+				--bg: {{ config.get('body_css', {}).get('body_background_fill', 'white') }};
+				--col:   {{ config.get('body_css', {}).get('body_text_color', '#1f2937') }};
+				--bg-dark: {{ config.get('body_css', {}).get('body_background_fill_dark', '#0b0f19') }};
+				--col-dark: {{ config.get('body_css', {}).get('body_text_color_dark', '#f3f4f6') }};
+			}
+
+
+			body {
+				background: var(--bg);
+				color: var(--col);
+				font-family: Arial, Helvetica, sans-serif;
+			}
+
+			@media (prefers-color-scheme: dark) {
+				body {
+					background: var(--bg-dark);
+					color: var(--col-dark);
+				}
+			}
+		</style>
+
 		<script type="module" src="./src/main.ts"></script>
 		<meta property="og:url" content="https://gradio.app/" />
 		<meta property="og:type" content="website" />
@@ -74,6 +97,7 @@
 		</gradio-app>
 		<script>
 			const ce = document.getElementsByTagName("gradio-app");
+
 			if (ce[0]) {
 				ce[0].addEventListener("domchange", () => {
 					document.body.style.padding = "0";

js/app/vite.config.ts

@@ -115,6 +115,7 @@ export default defineConfig(({ mode }) => {
 							} else if (
 								selector.indexOf(":root") > -1 ||
 								selector.indexOf("dark") > -1 ||
+								selector.indexOf("body") > -1 ||
 								fileName.indexOf(".svelte") > -1
 							) {
 								return selector;