skills.rest
gradio-app
gradio-appOFFICIAL
Explore all skills by this author →
WebsiteGitHub

gradio-themes

Create and customize Python-based Gradio themes controlling colors, typography, spacing, and dark mode.

43.4k|3.6k|Updated Dec 19, 2018
Search Tags:#CSS#Python#theme#Gradio#Typography#UI Design#Dark mode
One-click install
npx skills add https://github.com/gradio-app/gradio --skill gradio-themes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gradio-themes
Source: https://github.com/gradio-app/gradio/tree/main/.agents/skills/gradio-themes
Command: npx skills add https://github.com/gradio-app/gradio --skill gradio-themes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gradio.

What problem does it solve?

Building a visually distinctive Gradio app requires overriding hundreds of CSS variables correctly across light and dark modes, and mistakes in contrast, font weights, or shadow DOM scoping produce unreadable or generic-looking interfaces.

Core Features & Use Cases

  • Theme Class Construction: Build themes inheriting from gradio.themes.Base with constructor parameters for hues, sizes, and fonts, overriding variables via super().set().
  • Dark Mode & Contrast Guidance: Independently design _dark variables and audit every text/background pair for readability before shipping.
  • Custom CSS & Publishing: Bundle custom_css for effects variables cannot express, then publish themes to the Hugging Face Hub with push_to_hub.
  • Use Case: A developer wants a warm editorial theme for a data dashboard app; use this Skill to define the palette, typography, button variants, and dark mode, then publish it as a reusable Hub theme.

Quick Start

Create a Gradio theme class with a warm amber accent, serif headings, and a fully designed dark mode, then show me how to preview it with gr.themes.builder().

Frequently Asked Questions about gradio-themes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a custom Gradio theme in Python?▼

Create a class inheriting from gradio.themes.Base, pass hue, size, and font parameters to super().__init__(), set self.name, then override variables with super().set(). Preview it interactively with gr.themes.builder().

How do I add dark mode support to a Gradio theme?▼

Append _dark to any variable name, such as body_background_fill_dark, and design those values independently rather than inverting light values. When referencing other variables in dark values, use the base name without a _dark suffix.

Why does custom CSS targeting body not work in a Gradio theme?▼

Theme CSS is injected inside the <gradio-app> shadow DOM, so selectors for html or body never match. Use the body_background_fill variable instead, which Gradio applies to the real page body.

How do I publish a Gradio theme to the Hugging Face Hub?▼

Call theme.push_to_hub() with repo_name, org_name, version, and description. The bundled custom_css ships automatically, and others can load it with gr.themes.Theme.from_hub("org/name@version").

Why do Gradio theme fonts render with fake bold weights?▼

Browsers synthesize missing font weights, which looks distorted. Always declare weights explicitly on GoogleFont, for example fonts.GoogleFont("Instrument Sans", weights=(400, 500, 600, 700)), since the default only loads 400 and 600.

Related Skills

Explore More Design & Creative Skills→
yanochka11yanochka11

huggingface-gradio

Build interactive machine learning demo interfaces with Gradio components.

Community
Advanced
Andrew-GirgisAndrew-Girgis

huggingface-spaces

Build, deploy, and maintain Hugging Face Spaces with Gradio, Docker, or Static SDKs.

Community
Advanced
alfadocsalfadocs

alfadocs-accessibility-review

Audit AlfaDocs interfaces for WCAG compliance and accessibility defects.

Official
Advanced
discoursediscourse
47.8k

discourse-writing-html-css

Write and repair HTML, CSS, and SCSS for Discourse core, plugins, themes, and theme components.

Official
Advanced