Skip to content

improve preview and metadata for community themes #13211

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
hannahblair wants to merge 6 commits into
base: main
Choose a base branch
from
+376 −118
Draft

improve preview and metadata for community themes #13211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ed9a109
improve preview and metadata for community themes
hannahblair Apr 7, 2026
3a6738a
add changeset
gradio-pr-bot Apr 7, 2026
88112ec
cleanup
hannahblair Apr 7, 2026
4b4d20f
Merge branch 'community-theme-metadata' of github.com:gradio-app/grad…
hannahblair Apr 7, 2026
6e45006
fix theme card text in base themes
hannahblair Apr 7, 2026
5bb2101
Merge branch 'main' into community-theme-metadata
freddyaboulton Apr 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/great-mammals-run.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"website": minor
---

feat:improve preview and metadata for community themes
84 changes: 29 additions & 55 deletions js/_website/src/routes/themes/gallery/ThemeCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,19 @@
<script lang="ts">
import type { ThemeData } from "./types";
import { is_color_dark } from "./utils";

export let theme: ThemeData;
export let on_click: () => void;
export let dark: boolean = false;

$: current_bg = dark ? theme.colors.background_dark : theme.colors.background;
$: is_dark = is_color_dark(current_bg);

function is_color_dark(hex: string): boolean {
const rgb = hex_to_rgb(hex);
if (!rgb) return false;
const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
return luminance < 0.5;
}

function hex_to_rgb(hex: string): { r: number; g: number; b: number } | null {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result
? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
}
: null;
}

function adjust_color(hex: string, amount: number): string {
const rgb = hex_to_rgb(hex);
if (!rgb) return hex;
const clamp = (n: number) => Math.min(255, Math.max(0, Math.round(n)));
const toHex = (c: number) => c.toString(16).padStart(2, "0");
return `#${toHex(clamp(rgb.r + amount))}${toHex(clamp(rgb.g + amount))}${toHex(clamp(rgb.b + amount))}`;
}
$: is_btn_dark = is_color_dark(theme.colors.button_primary);
$: is_block_dark = is_color_dark(theme.colors.block_background);
$: card_text = is_dark ? "#ffffff" : theme.colors.text_color;
$: block_text = is_block_dark ? "#ffffff" : theme.colors.text_color;
$: label_color = is_block_dark ? "rgba(255,255,255,0.6)" : "rgba(0,0,0,0.45)";
$: track_color = is_block_dark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)";

function mix_color(hex: string, opacity: number): string {
return `${hex}${Math.round(opacity * 255)
Expand Down Expand Up @@ -63,7 +44,7 @@
<div class="p-2.5">
<div
class="text-[11px] font-semibold truncate mb-2"
style="color: {is_dark ? '#ffffff' : '#1f2937'};"
style="color: {card_text}; font-family: '{theme.fonts.main}', sans-serif;"
>
{theme.name}
</div>
Expand All @@ -73,21 +54,19 @@
<div
class="rounded p-1.5 border"
style="
background: {is_dark ? adjust_color(current_bg, 15) : '#ffffff'};
border-color: {is_dark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'};
background: {theme.colors.block_background};
border-color: {theme.colors.block_border};
"
>
<div
class="text-[8px] font-medium mb-0.5"
style="color: {is_dark ? '#a0a0a0' : '#6b7280'};"
style="color: {label_color};"
>
Prompt
</div>
<div
class="text-[9px] leading-tight"
style="color: {is_dark
? '#e0e0e0'
: '#374151'}; font-family: '{theme.fonts.main}', sans-serif;"
style="color: {block_text}; font-family: '{theme.fonts.main}', sans-serif;"
>
A serene mountain...
</div>
Expand All @@ -96,14 +75,14 @@
<div
class="rounded p-1.5 border"
style="
background: {is_dark ? adjust_color(current_bg, 15) : '#ffffff'};
border-color: {is_dark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'};
background: {theme.colors.block_background};
border-color: {theme.colors.block_border};
"
>
<div class="flex justify-between items-center mb-1">
<span
class="text-[8px] font-medium"
style="color: {is_dark ? '#a0a0a0' : '#6b7280'};"
style="color: {label_color};"
>
Steps
</span>
Expand All @@ -116,9 +95,7 @@
</div>
<div
class="h-1 rounded-full relative"
style="background: {is_dark
? 'rgba(255,255,255,0.1)'
: 'rgba(0,0,0,0.1)'};"
style="background: {track_color};"
>
<div
class="absolute left-0 top-0 h-full rounded-full"
Expand All @@ -130,8 +107,8 @@
<button
class="w-full py-1 rounded text-[9px] font-semibold"
style="
background: {theme.colors.primary};
color: {is_color_dark(theme.colors.primary) ? '#ffffff' : '#000000'};
background: {theme.colors.button_primary};
color: {is_btn_dark ? '#ffffff' : '#000000'};
"
>
Generate
Expand All @@ -142,21 +119,19 @@
<div
class="rounded p-1.5 border"
style="
background: {is_dark ? adjust_color(current_bg, 15) : '#ffffff'};
border-color: {is_dark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'};
background: {theme.colors.block_background};
border-color: {theme.colors.block_border};
"
>
<div
class="text-[7px] mb-0.5"
style="color: {is_dark ? '#a0a0a0' : '#6b7280'};"
style="color: {label_color};"
>
Font
</div>
<div
class="text-[10px] font-medium leading-tight"
style="color: {is_dark
? '#e0e0e0'
: '#374151'}; font-family: '{theme.fonts.main}', sans-serif;"
style="color: {block_text}; font-family: '{theme.fonts.main}', sans-serif;"
>
{theme.fonts.main}
</div>
Expand All @@ -165,8 +140,8 @@
<div
class="rounded p-1.5 border flex items-center gap-1.5"
style="
background: {is_dark ? adjust_color(current_bg, 15) : '#ffffff'};
border-color: {is_dark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'};
background: {theme.colors.block_background};
border-color: {theme.colors.block_border};
"
>
<div
Expand All @@ -189,16 +164,16 @@
</div>
<span
class="text-[8px]"
style="color: {is_dark ? '#e0e0e0' : '#374151'};">Enabled</span
style="color: {block_text};">Enabled</span
>
</div>

<button
class="w-full py-1 rounded text-[8px] font-medium border"
style="
background: transparent;
border-color: {theme.colors.neutral};
color: {theme.colors.neutral};
border-color: {theme.colors.button_secondary_border};
color: {theme.colors.button_secondary_text};
"
>
Secondary
Expand Down Expand Up @@ -227,7 +202,7 @@
{:else if theme.likes > 0}
<span
class="flex items-center gap-0.5 text-[8px]"
style="color: {is_dark ? '#a0a0a0' : '#6b7280'};"
style="color: {label_color};"
>
<svg class="w-2 h-2" fill="currentColor" viewBox="0 0 20 20">
<path
Expand All @@ -243,8 +218,7 @@
<div class="flex items-center gap-1">
<div
class="w-2.5 h-2.5 rounded-full"
style="background: {theme.colors
.primary}; box-shadow: 0 0 0 1px {is_dark
style="background: {theme.colors.button_primary}; box-shadow: 0 0 0 1px {is_dark
? 'rgba(255,255,255,0.1)'
: 'rgba(0,0,0,0.1)'};"
></div>
Expand Down
14 changes: 2 additions & 12 deletions js/_website/src/routes/themes/gallery/ThemeDetailModal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
import type { ThemeData } from "./types";
import { clickOutside } from "./utils";
import { clickOutside, is_color_dark } from "./utils";

export let theme: ThemeData;
export let on_close: () => void;
Expand Down Expand Up @@ -39,16 +39,6 @@ with gr.Blocks(theme=gr.Theme.from_hub("${theme.id}")) as demo:
}, 1500);
});
}

function is_color_dark(hex: string): boolean {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if (!result) return false;
const r = parseInt(result[1], 16);
const g = parseInt(result[2], 16);
const b = parseInt(result[3], 16);
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
return luminance < 0.5;
}
</script>

<svelte:window on:keydown={(e) => e.key === "Escape" && on_close()} />
Expand Down Expand Up @@ -144,7 +134,7 @@ with gr.Blocks(theme=gr.Theme.from_hub("${theme.id}")) as demo:
Colors
</h3>
<div class="flex gap-2">
{#each [{ label: "Primary", color: theme.colors.primary }, { label: "Accent", color: theme.colors.secondary }, { label: "Neutral", color: theme.colors.neutral }, { label: "Bg", color: theme.colors.background }, { label: "Bg Dark", color: theme.colors.background_dark }] as { label, color }}
{#each [{ label: "Primary", color: theme.colors.primary }, { label: "Accent", color: theme.colors.secondary }, { label: "Neutral", color: theme.colors.neutral }, { label: "Background", color: theme.colors.background }, { label: "Background Dark", color: theme.colors.background_dark }] as { label, color }}
<div class="flex-1 flex flex-col">
<div
class="h-10 rounded-md border border-gray-200 dark:border-gray-700 flex items-end justify-start p-1"
Expand Down
6 changes: 6 additions & 0 deletions js/_website/src/routes/themes/gallery/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,12 @@ export type ThemeData = {
neutral: string;
background: string;
background_dark: string;
block_background: string;
block_border: string;
text_color: string;
button_primary: string;
button_secondary_border: string;
button_secondary_text: string;
};
fonts: {
main: string;
Expand Down
Loading
Loading