Spaces:
Running on Zero
Running on Zero
File size: 4,000 Bytes
f7c2cb2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | """The Diffu Studio Gradio theme — the warm archival look of the ``diffusion_intuition`` guide.
Gradio 6 dropped the ``theme=`` kwarg from ``gr.Blocks``; it now lives on ``.launch()`` (verified against the
installed 6.18). So the launch sites (``__main__`` locally, ``app.py`` on the Space) pass ``diffu_theme()``.
Palette is lifted straight from the guide's ``:root`` tokens: teal ``#0e7c66`` primary, amber accent, warm
paper ``#f7f6f2`` canvas, Space Grotesk / JetBrains Mono. The ``*_dark`` variants are pinned to the SAME light
values so the paper aesthetic holds whether the browser requests light or dark — the guide is light-only.
"""
from __future__ import annotations
import gradio as gr
from gradio.themes.utils import colors, fonts, sizes
# guide :root tokens
_TEAL = "#0e7c66"
_TEAL_HOVER = "#0c6c58"
_PAPER = "#f7f6f2"
_PANEL = "#ffffff"
_PANEL2 = "#fbfaf7"
_INPUT = "#fdfcf9"
_BORDER = "#e6e1d6"
_BORDER2 = "#cfc8ba"
_INK = "#1f2733"
_MUTED = "#5c6675"
def diffu_theme() -> gr.Theme:
"""A ``gr.themes.Base`` tuned to the guide's palette + fonts. Pass to ``demo.launch(theme=...)``."""
return gr.themes.Base(
primary_hue=colors.emerald, # teal #0e7c66 ≈ emerald 700 — drives buttons, sliders, the loader
secondary_hue=colors.amber,
neutral_hue=colors.stone, # warm gray to match the #e6e1d6 borders / #f7f6f2 paper
radius_size=sizes.radius_lg,
text_size=sizes.text_md,
spacing_size=sizes.spacing_md,
font=(fonts.GoogleFont("Space Grotesk"), "system-ui", "-apple-system", "sans-serif"),
font_mono=(fonts.GoogleFont("JetBrains Mono"), "ui-monospace", "Menlo", "monospace"),
).set(
# canvas + text
body_background_fill=_PAPER,
body_background_fill_dark=_PAPER,
body_text_color=_INK,
body_text_color_dark=_INK,
body_text_color_subdued=_MUTED,
body_text_color_subdued_dark=_MUTED,
# panels / blocks
background_fill_primary=_PANEL,
background_fill_primary_dark=_PANEL,
background_fill_secondary=_PANEL2,
background_fill_secondary_dark=_PANEL2,
block_background_fill=_PANEL,
block_background_fill_dark=_PANEL,
block_border_color=_BORDER,
block_border_color_dark=_BORDER,
block_border_width="1px",
block_label_background_fill=_PANEL2,
block_label_background_fill_dark=_PANEL2,
block_label_text_color=_MUTED,
block_label_text_color_dark=_MUTED,
block_title_text_color=_INK,
block_title_text_color_dark=_INK,
block_shadow="0 1px 3px rgba(31,39,51,.06)",
border_color_primary=_BORDER,
border_color_primary_dark=_BORDER,
border_color_accent=_TEAL,
color_accent_soft="rgba(14,124,102,.08)",
# inputs
input_background_fill=_INPUT,
input_background_fill_dark=_INPUT,
input_border_color=_BORDER,
input_border_color_dark=_BORDER,
input_border_color_focus=_TEAL,
input_border_color_focus_dark=_TEAL,
# primary (teal) + secondary (warm paper) buttons
button_primary_background_fill=_TEAL,
button_primary_background_fill_dark=_TEAL,
button_primary_background_fill_hover=_TEAL_HOVER,
button_primary_background_fill_hover_dark=_TEAL_HOVER,
button_primary_border_color=_TEAL,
button_primary_text_color="#ffffff",
button_primary_text_color_dark="#ffffff",
button_secondary_background_fill=_PANEL,
button_secondary_background_fill_dark=_PANEL,
button_secondary_background_fill_hover=_PANEL2,
button_secondary_border_color=_BORDER2,
button_secondary_border_color_dark=_BORDER2,
button_secondary_text_color=_INK,
button_secondary_text_color_dark=_INK,
# sliders / loader pick up primary_hue automatically; pin the slider track to the exact teal
slider_color=_TEAL,
slider_color_dark=_TEAL,
)
|