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

Fix dark mode with apps smaller than window size (#1926)

Browse Source 
* changes

* changes
This commit is contained in:
aliabid94 2022-08-01 21:15:41 -04:00 committed by GitHub
parent bccf7c4006
commit 95cb8a78b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/packages/app/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" style="margin: 0; padding: 0">
<html lang="en" style="margin: 0; padding: 0; min-height: 100%">
<head>
<meta charset="utf-8" />
<meta
@ -54,14 +54,8 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
</head>
<body style="width: 100%; margin: 0; padding: 0">
<gradio-app
><div
id="root"
style="display: flex; flex-direction: column; flex-grow: 1"
></div
></gradio-app>
<body style="width: 100%; margin: 0; padding: 0; height: 100%">
<gradio-app></gradio-app>
<script>
const ce = document.getElementsByTagName("gradio-app");
if (ce[0]) {

20
ui/packages/app/src/Blocks.svelte
View File

@ -31,6 +31,7 @@
export let target: HTMLElement;
export let id: number = 0;
export let autoscroll: boolean = false;
let app_mode = window.__gradio_mode__ === "app";
$: app_state.update((s) => ({ ...s, autoscroll }));
@ -366,13 +367,13 @@
if (color_mode !== null) {
if (color_mode === "dark") {
target.classList.add("dark");
darkmode();
} else if (color_mode === "system") {
use_system_theme();
}
// light is default, so we don't need to do anything else
} else if (url.searchParams.get("__dark-theme") === "true") {
target.classList.add("dark");
darkmode();
} else {
use_system_theme();
}
@ -388,7 +389,16 @@
const is_dark =
window?.matchMedia?.("(prefers-color-scheme: dark)").matches ?? null;
if (is_dark) target.classList.add("dark");
if (is_dark) {
darkmode();
}
}
}
function darkmode() {
target.classList.add("dark");
if (app_mode) {
document.body.style.backgroundColor = "rgb(11, 15, 25)"; // bg-gray-950 for scrolling outside the body
}
}
@ -407,10 +417,10 @@
{/if}
</svelte:head>
<div class="w-full flex flex-col">
<div class="w-full flex flex-col" class:min-h-screen={app_mode}>
<div
class="mx-auto container px-4 py-6 dark:bg-gray-950"
class:flex-grow={window.__gradio_mode__ === "app"}
class:flex-grow={app_mode}
>
{#if api_docs_visible}
<ApiDocs {components} {dependencies} {root} />