add background color based on the OS mode #7117

aileenvl · 2024-01-23T06:50:04Z

Description

There is no background applied to the body and it defaults to white with a function to detect the users os mode we can change that background before gradio loads. there might be a better way to implement but just a draft idea.

Closes: #5392

🎯 PRs Should Target Issues

Before your create a PR, please check to see if there is an existing issue for this change. If not, please create an issue before you create this PR, unless the fix is very small.

Not adhering to this guideline will result in the PR being closed.

Tests

PRs will only be merged if tests pass on CI. To run the tests locally, please set up your Gradio environment locally and run the tests: bash scripts/run_all_tests.sh
You may need to run the linters: bash scripts/format_backend.sh and bash scripts/format_frontend.sh

gradio-pr-bot · 2024-01-23T06:50:43Z

🪼 branch checks and previews

•	Name	Status	URL
	Storybook	ready!	Storybook preview
	Visual tests	all good!	Build review
🦄	Changes	detected!	Details

gradio-pr-bot · 2024-01-23T06:50:51Z

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
`@gradio/app`	`patch`
`gradio`	`patch`

Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

add background color based on the OS mode

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

Maintainers can change the version label to modify the version bump.
If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

pngwn · 2024-01-25T19:35:28Z

Hey @aileenvl! Thanks for this PR; this is a great idea!

I have just tweaked it a little so instead of using JS to set the color, we use static CSS instead. This way we can guarantee we never have any flashes by putting it right at the top of the head. This did require some changes to the build config but seems to be working now. I also added a default font until our custom fonts load in.

There is no flashing now and the font switch is pretty subtle.

Thanks again!

pngwn · 2024-01-25T19:38:26Z

js/app/index.html

+			body {
+				background: white;
+				color: black;
+				font-family: Arial, Helvetica, sans-serif;


Prevents the janky switch from a default serif to our sans-serif.

pngwn · 2024-01-25T19:38:46Z

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 ||


We don't want to add a prefix to body selectors, that breaks them.

aliabid94 · 2024-01-25T22:03:57Z

Is there any we we can use the theme variables, --body-background-fill --body-background-fill-dark, body-text-color, etc?

pngwn · 2024-01-25T22:11:51Z

We can but we would have to define it right alongside the definition (which seems pointless to me at least) because the styles where we define those things haven't loaded yet, they get loaded in by the gradio app and this flash happens because of that delay.

aliabid94 · 2024-01-25T22:17:09Z

but now there will be a flash if those colors differ, correct?
would it be overkill to pass those theme colors directly to the index.html template at render time so there's no flash at all?

aliabid94 · 2024-01-25T22:20:37Z

e.g.

		<style>
			body {
				background: {{ config['theme-bg'] }};
				color: {{ config['theme-color'] }};
				font-family: Arial, Helvetica, sans-serif;
			}

			@media (prefers-color-scheme: dark) {
				body {
    		         		background: {{ config['theme-bg-dark'] }};
			        	color: {{ config['theme-color-dark'] }};
				}
			}
		</style>

pngwn · 2024-01-25T22:31:09Z

but now there will be a flash if those colors differ, correct?

Yes, if they get out of sync.

would it be overkill to pass those theme colors directly to the index.html template at render time so there's no flash at all?

No, i think that makes perfect sense, would be ideal.

Will take a look!

aliabid94 · 2024-01-25T22:39:57Z

I can take a crack at it if its late and you can review in the morning?

pngwn · 2024-01-25T22:54:53Z

@aliabid94 Sounds good! Thansk!

pngwn · 2024-01-25T22:56:29Z

Feel free to merge if you get it working and want to get the release out. The best way to test is just to add some network throttling with the network tab open and there should be no color changes. You'll know where the color flash should come in because you'll see the font change (it is subtle in this branch), it tends to happen around the same time.

aliabid94 · 2024-01-26T08:12:29Z

I couldn't figure out how to pass the config values to the CSS, because:

		<style>
			body {
				background: {{ config['body_css']['body_background_fill'] }};
				color: {{ config['body_css']['body_text_color'] }};
				font-family: Arial, Helvetica, sans-serif;
			}

			@media (prefers-color-scheme: dark) {
				body {
					background: {{ config['body_css']['body_background_fill_dark'] }};
					color: {{ config['body_css']['body_text_color_dark'] }};
				}
			}
		</style>

would cause the compiler to fail parsing the CSS. Can't figure out how to embed the tempate tags in CSS since they're not quote enclosed

pngwn · 2024-01-26T11:40:30Z

@aliabid94 which compiler? The vite build or the templating compiler?

aliabid94 · 2024-01-26T19:08:24Z

vite

11:07:36 AM [vite-plugin-svelte] you are building for production but compilerOptions.dev is true, forcing it to false
vite v4.3.9 building for production...
✓ 2 modules transformed.
✓ built in 53ms
[vite:css] [postcss] /Users/aliabid/Desktop/gradio/js/app/index.html?html-proxy&inline-css&index=0.css:3:20: Unknown word
file: /Users/aliabid/Desktop/gradio/js/app/index.html?html-proxy&inline-css&index=0.css:3:20
error during build:
CssSyntaxError: [postcss] /Users/aliabid/Desktop/gradio/js/app/index.html?html-proxy&inline-css&index=0.css:3:20: Unknown word
    at Input.error (/Users/aliabid/Desktop/gradio/node_modules/.pnpm/postcss@8.4.27/node_modules/postcss/lib/input.js:106:16)
    at Parser.unknownWord (/Users/aliabid/Desktop/gradio/node_modules/.pnpm/postcss@8.4.27/node_modules/postcss/lib/parser.js:587:22)
    at Parser.other (/Users/aliabid/Desktop/gradio/node_modules/.pnpm/postcss@8.4.27/node_modules/postcss/lib/parser.js:429:12)
    at Parser.parse (/Users/aliabid/Desktop/gradio/node_modules/.pnpm/postcss@8.4.27/node_modules/postcss/lib/parser.js:464:16)
    at parse (/Users/aliabid/Desktop/gradio/node_modules/.pnpm/postcss@8.4.27/node_modules/postcss/lib/parse.js:11:12)
    at new LazyResult (/Users/aliabid/Desktop/gradio/node_modules/.pnpm/postcss@8.4.27/node_modules/postcss/lib/lazy-result.js:133:16)
    at Processor.process (/Users/aliabid/Desktop/gradio/node_modules/.pnpm/postcss@8.4.27/node_modules/postcss/lib/processor.js:53:14)
    at compileCSS (file:///Users/aliabid/Desktop/gradio/node_modules/.pnpm/vite@4.3.9_@types+node@20.3.2_less@4.2.0/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:38481:63)
    at async Object.transform (file:///Users/aliabid/Desktop/gradio/node_modules/.pnpm/vite@4.3.9_@types+node@20.3.2_less@4.2.0/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:37917:56)
    at async transform (file:///Users/aliabid/Desktop/gradio/node_modules/.pnpm/rollup@3.29.4/node_modules/rollup/dist/es/shared/node-entry.js:24449:16)
/Users/aliabid/Desktop/gradio/js/app:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL

aliabid94 · 2024-01-29T21:43:36Z

ready for review

aliabid94 · 2024-01-29T21:44:40Z

gradio/themes/base.py

@@ -93,6 +94,30 @@ def repl_func(match):

        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:


don't want to raise an exception in case there were "broken" themes with circular references before. They didn't error out before and don't want a breaking change.

abidlabs · 2024-01-30T00:50:01Z

Tested locally and works great! Thanks everyone ❤️

pngwn

Looks (and works) great! Thanks @aileenvl @aliabid94!

abidlabs · 2024-01-30T19:40:17Z

@aliabid94 re: the tests, I ran them all locally and they passed, so I'll go ahead and merge this in.

cc @gary149

gary149 · 2024-03-07T18:10:34Z

fyi there's still a white background while loading on Spaces in dark mode:

abidlabs · 2024-03-07T18:12:38Z

Yup seeing it too -- will reopen the issue

add background color based on the OS mode

c7c6171

add changeset

14ce2a5

Merge branch 'main' into avl/issue-5392-white-background-dark-mode

d45ec57

abidlabs requested a review from aliabid94 January 25, 2024 00:50

pngwn added 2 commits January 25, 2024 19:32

use static css instead

b047ee9

Merge branch 'main' into avl/issue-5392-white-background-dark-mode

abb601b

pngwn reviewed Jan 25, 2024

View reviewed changes

format

bf666cb

Ali Abid added 2 commits January 29, 2024 13:31

changes

c1e671d

changes

1beca25

aliabid94 requested review from abidlabs and freddyaboulton January 29, 2024 21:43

aliabid94 reviewed Jan 29, 2024

View reviewed changes

Merge branch 'main' into avl/issue-5392-white-background-dark-mode

fb22d4c

abidlabs approved these changes Jan 30, 2024

View reviewed changes

pngwn approved these changes Jan 30, 2024

View reviewed changes

freddyaboulton approved these changes Jan 30, 2024

View reviewed changes

abidlabs merged commit 24157a3 into gradio-app:main Jan 30, 2024
8 of 13 checks passed

pngwn mentioned this pull request Jan 30, 2024

chore: update versions #7177

Merged

abidlabs mentioned this pull request Mar 7, 2024

White background appears while a Gradio app is loading even in dark mode #5392

Open

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add background color based on the OS mode #7117

add background color based on the OS mode #7117

aileenvl commented Jan 23, 2024

gradio-pr-bot commented Jan 23, 2024 •

edited

gradio-pr-bot commented Jan 23, 2024 •

edited

Something isn't right?

pngwn commented Jan 25, 2024

pngwn Jan 25, 2024

pngwn Jan 25, 2024

aliabid94 commented Jan 25, 2024

pngwn commented Jan 25, 2024

aliabid94 commented Jan 25, 2024 •

edited

aliabid94 commented Jan 25, 2024 •

edited

pngwn commented Jan 25, 2024

aliabid94 commented Jan 25, 2024

pngwn commented Jan 25, 2024

pngwn commented Jan 25, 2024

aliabid94 commented Jan 26, 2024

pngwn commented Jan 26, 2024

aliabid94 commented Jan 26, 2024

aliabid94 commented Jan 29, 2024

aliabid94 Jan 29, 2024

abidlabs commented Jan 30, 2024

pngwn left a comment

abidlabs commented Jan 30, 2024

gary149 commented Mar 7, 2024

abidlabs commented Mar 7, 2024

add background color based on the OS mode #7117

add background color based on the OS mode #7117

Conversation

aileenvl commented Jan 23, 2024

Description

🎯 PRs Should Target Issues

Tests

gradio-pr-bot commented Jan 23, 2024 • edited

🪼 branch checks and previews

gradio-pr-bot commented Jan 23, 2024 • edited

🦄 change detected

This Pull Request includes changes to the following packages.

With the following changelog entry.

Something isn't right?

pngwn commented Jan 25, 2024

pngwn Jan 25, 2024

Choose a reason for hiding this comment

pngwn Jan 25, 2024

Choose a reason for hiding this comment

aliabid94 commented Jan 25, 2024

pngwn commented Jan 25, 2024

aliabid94 commented Jan 25, 2024 • edited

aliabid94 commented Jan 25, 2024 • edited

pngwn commented Jan 25, 2024

aliabid94 commented Jan 25, 2024

pngwn commented Jan 25, 2024

pngwn commented Jan 25, 2024

aliabid94 commented Jan 26, 2024

pngwn commented Jan 26, 2024

aliabid94 commented Jan 26, 2024

aliabid94 commented Jan 29, 2024

aliabid94 Jan 29, 2024

Choose a reason for hiding this comment

abidlabs commented Jan 30, 2024

pngwn left a comment

Choose a reason for hiding this comment

abidlabs commented Jan 30, 2024

gary149 commented Mar 7, 2024

abidlabs commented Mar 7, 2024

gradio-pr-bot commented Jan 23, 2024 •

edited

gradio-pr-bot commented Jan 23, 2024 •

edited

aliabid94 commented Jan 25, 2024 •

edited

aliabid94 commented Jan 25, 2024 •

edited