mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-03-31 12:20:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

[HF Spaces] Darktheme from URL params ()

Browse Source 
* [HF Spaces] Darktheme from URL params

* white text for dark theme title, description, and article

Co-authored-by: Ali Abid <ali.abid@gradio.app>
This commit is contained in:
Charles Bensimon 2021-10-21 00:16:09 +02:00 committed by GitHub
parent 79a34636f8
commit f26f2142ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 4 deletions

5
demo/kitchen_sink.py

@ -73,7 +73,10 @@ iface = gr.Interface(
gr.outputs.Carousel("image"),
gr.outputs.Timeseries(x="time", y="value")
],
theme="huggingface"
theme="huggingface",
title="Kitchen Sink",
description="Try out all the components!",
article="Learn more about [Gradio](http://gradio.app)"
)
if __name__ == "__main__":

4
frontend/src/index.jsx

@ -81,11 +81,15 @@ function load_config(config) {
head.appendChild(style);
style.appendChild(document.createTextNode(config.css));
}
let url = new URL(window.location.toString());
let target = document.getElementById(config.target || "root");
if (config.theme !== null && config.theme.startsWith("dark")) {
target.classList.add("dark");
config.theme = config.theme.substring(4);
}
else if (url.searchParams.get("__dark-theme") === "true") {
target.classList.add("dark");
}
ReactDOM.render(
<GradioPage
{...config}

6
frontend/src/themes/defaults.scss

@ -5,13 +5,13 @@
.gradio_page {
@apply container h-full mx-auto pt-4 px-4 flex flex-col box-border flex-grow;
.title {
@apply text-center p-4 text-4xl;
@apply text-center p-4 text-4xl dark:text-gray-50;
}
.description {
@apply pb-4;
@apply pb-4 dark:text-gray-50;
}
.article {
@apply pt-8 pb-4 max-w-none;
@apply pt-8 pb-4 max-w-none dark:text-gray-50;
}
.content {
@apply flex-grow flex-shrink-0;