mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2024-12-09 02:00:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Dark text (#1049)

Browse Source 
* fix(ui): Apply dark bg when dark theme set

* fix(ui): Increase contrast for dark theme text

* Fix formatting
This commit is contained in:
Ron Au 2022-04-27 00:03:03 +10:00 committed by GitHub
parent 9ecb5e8a49
commit 73ac1e1389
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -206,7 +206,7 @@
}
</script>
<div class="mx-auto container space-y-4 px-4 py-6">
<div class="mx-auto container space-y-4 px-4 py-6 dark:bg-gray-950">
{#if tree}
{#each tree as { component, id, props, children, has_modes }}
<Render
@ -230,7 +230,7 @@
class="gradio-page container mx-auto flex flex-col box-border flex-grow text-gray-700 dark:text-gray-50"
>
<div
class="footer flex-shrink-0 inline-flex gap-2.5 items-center text-gray-600 justify-center py-2"
class="footer flex-shrink-0 inline-flex gap-2.5 items-center text-gray-600 dark:text-gray-300 justify-center py-2"
>
<a href="https://gradio.app" target="_blank" rel="noreferrer">
{$_("interface.built_with_Gradio")}

6
ui/packages/app/tailwind.config.js
View File

@ -9,7 +9,11 @@ module.exports = {
darkMode: "class",
theme: {
extend: {},
extend: {
colors: {
"gray-950": "#0B0F19"
}
},
fontFamily: {
mono: ["monospace"],
sans: ["IBM Plex Sans", "system-ui"]

9
ui/packages/markdown/src/typography.css
View File

@ -1075,6 +1075,15 @@
.prose-pink a code {
color: #db2777;
}
.dark .prose {
color: #daddd8;
}
.dark .prose a {
color: #ffffff;
}
.dark :is(h1, h2, h3, h4) {
color: #ffffff;
}
@media (min-width: 640px) {
.sm\:prose {
color: #374151;