标签：主题
Gradio 具有内置主题引擎，可让你自定义应用程序的外观。 你可以从各种主题中进行选择，也可以创建自己的主题。 为此，将 theme= kwarg 传递给 Blocks 或 Interface 构造函数。 例如：
Gradio features a built-in theming engine that lets you customize the look and feel of your app. You can choose from a variety of themes, or create your own. To do so, pass the theme= kwarg to the Blocks or Interface constructor. For example:
with gr.Blocks(theme=gr.themes.Soft()) as demo:
...
Gradio 带有一组预构建的主题，你可以从 gr.themes.* 加载这些主题。 这些都是：
Gradio comes with a set of prebuilt themes which you can load from gr.themes.*. These are:
gr.themes.Base()gr.themes.Default()gr.themes.Glass()gr.themes.Monochrome()gr.themes.Soft()这些主题中的每一个都为数百个 CSS 变量设置了值。 你可以使用预建主题作为你自己的自定义主题的起点，或者你可以从头开始创建你自己的主题。 让我们来看看每种方法。
Each of these themes set values for hundreds of CSS variables. You can use prebuilt themes as a starting point for your own custom themes, or you can create your own themes from scratch. Let's take a look at each approach.
构建主题最简单的方法是使用 Theme Builder。 要在本地启动 Theme Builder，请运行以下代码：
The easiest way to build a theme is using the Theme Builder. To launch the Theme Builder locally, run the following code:
import gradio as gr
gr.themes.builder()
你可以使用在上面的 Spaces 上运行的 Theme Builder，尽管当你通过 gr.themes.builder() 在本地启动它时它运行得更快。
You can use the Theme Builder running on Spaces above, though it runs much faster when you launch it locally via gr.themes.builder().
当你在 Theme Builder 中编辑值时，该应用程序将实时预览更新。 你可以下载代码来生成你创建的主题，这样你就可以在任何 Gradio 应用程序中使用它。
As you edit the values in the Theme Builder, the app will preview updates in real time. You can download the code to generate the theme you've created so you can use it in any Gradio app.
在本指南的其余部分，我们将介绍以编程方式构建主题。
In the rest of the guide, we will cover building themes programmatically.
尽管每个主题都有数百个 CSS 变量，但大多数这些变量的值都来自 8 个核心变量，可以通过每个预建主题的构造函数进行设置。 修改这 8 个参数可以让你快速更改应用程序的外观。
Although each theme has hundreds of CSS variables, the values for most these variables are drawn from 8 core variables which can be set through the constructor of each prebuilt theme. Modifying these 8 arguments allows you to quickly change the look and feel of your app.
前 3 个构造函数参数设置主题的颜色并且是 gradio.themes.Color 对象。 在内部，这些 Color 对象保存单一色调调色板的亮度值，范围从 50、100、200...、800、900、950。其他 CSS 变量源自这 3 种颜色。
The first 3 constructor arguments set the colors of the theme and are gradio.themes.Color objects. Internally, these Color objects hold brightness values for the palette of a single hue, ranging from 50, 100, 200..., 800, 900, 950. Other CSS variables are derived from these 3 colors.
3 个颜色构造函数参数是：
The 3 color constructor arguments are:
primary_hue ：这是在你的主题中引起注意的颜色。 在默认主题中，这被设置为 gradio.themes.colors.orange 。
primary_hue: This is the color draws attention in your theme. In the default theme, this is set to gradio.themes.colors.orange.
secondary_hue ：这是用于主题中次要元素的颜色。 在默认主题中，这被设置为 gradio.themes.colors.blue 。
secondary_hue: This is the color that is used for secondary elements in your theme. In the default theme, this is set to gradio.themes.colors.blue.
neutral_hue ：这是用于主题中文本和其他中性元素的颜色。 在默认主题中，这被设置为 gradio.themes.colors.gray 。
neutral_hue: This is the color that is used for text and other neutral elements in your theme. In the default theme, this is set to gradio.themes.colors.gray.
你可以使用它们的字符串快捷方式修改这些值，例如
You could modify these values using their string shortcuts, such as
with gr.Blocks(theme=gr.themes.Default(primary_hue="red", secondary_hue="pink")) as demo:
...
或者你可以直接使用 Color 对象，如下所示：
or you could use the Color objects directly, like this:
with gr.Blocks(theme=gr.themes.Default(primary_hue=gr.themes.colors.red, secondary_hue=gr.themes.colors.pink)) as demo:
...
预定义的颜色是：
Predefined colors are:
slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose你还可以创建自己的自定义 Color 对象并将它们传入。
You could also create your own custom Color objects and pass them in.
接下来的 3 个构造函数参数设置主题的大小并且是 gradio.themes.Size 对象。 在内部，这些 Size 对象包含范围从 xxs 到 xxl 的像素大小值。 其他 CSS 变量源自这 3 种尺寸。
The next 3 constructor arguments set the sizing of the theme and are gradio.themes.Size objects. Internally, these Size objects hold pixel size values that range from xxs to xxl. Other CSS variables are derived from these 3 sizes.
spacing_size ：设置元素内的填充和元素之间的间距。 在默认主题中，这被设置为 gradio.themes.sizes.spacing_md 。
spacing_size: This sets the padding within and spacing between elements. In the default theme, this is set to gradio.themes.sizes.spacing_md.
radius_size ：设置元素角的圆度。 在默认主题中，这被设置为 gradio.themes.sizes.radius_md 。
radius_size: This sets the roundedness of corners of elements. In the default theme, this is set to gradio.themes.sizes.radius_md.
text_size ：设置文本的字体大小。 在默认主题中，这被设置为 gradio.themes.sizes.text_md 。
text_size: This sets the font size of text. In the default theme, this is set to gradio.themes.sizes.text_md.
你可以使用它们的字符串快捷方式修改这些值，例如
You could modify these values using their string shortcuts, such as
with gr.Blocks(theme=gr.themes.Default(spacing_size="sm", radius_size="none")) as demo:
...
或者你可以直接使用 Size 对象，如下所示：
or you could use the Size objects directly, like this:
with gr.Blocks(theme=gr.themes.Default(spacing_size=gr.themes.sizes.spacing_sm, radius_size=gr.themes.sizes.radius_none)) as demo:
...
预定义大小的对象是：
The predefined size objects are:
radius_noneradius_smradius_mdradius_lgspacing_smspacing_mdspacing_lgtext_smtext_mdtext_lg你还可以创建自己的自定义 Size 对象并将它们传入。
You could also create your own custom Size objects and pass them in.
最后 2 个构造函数参数设置主题的字体。 你可以将字体列表传递给这些参数中的每一个以指定回退。 如果你提供一个字符串，它将作为系统字体加载。 如果你提供 gradio.themes.GoogleFont ，字体将从 Google Fonts 加载。
The final 2 constructor arguments set the fonts of the theme. You can pass a list of fonts to each of these arguments to specify fallbacks. If you provide a string, it will be loaded as a system font. If you provide a gradio.themes.GoogleFont, the font will be loaded from Google Fonts.
font ：设置主题的主要字体。 在默认主题中，它被设置为 gradio.themes.GoogleFont("Source Sans Pro") 。
font: This sets the primary font of the theme. In the default theme, this is set to gradio.themes.GoogleFont("Source Sans Pro").
font_mono ：设置主题的等宽字体。 在默认主题中，这被设置为 gradio.themes.GoogleFont("IBM Plex Mono") 。
font_mono: This sets the monospace font of the theme. In the default theme, this is set to gradio.themes.GoogleFont("IBM Plex Mono").
你可以修改这些值，例如：
You could modify these values such as the following:
with gr.Blocks(theme=gr.themes.Default(font=[gr.themes.GoogleFont("Inconsolata"), "Arial", "sans-serif"])) as demo:
...
.set() 扩展主题你还可以在加载主题后修改 CSS 变量的值。 为此，请使用主题对象的 .set() 方法来访问 CSS 变量。 例如：
You can also modify the values of CSS variables after the theme has been loaded. To do so, use the .set() method of the theme object to get access to the CSS variables. For example:
theme = gr.themes.Default(primary_hue="blue").set(
loader_color="#FF0000",
slider_color="#FF0000",
)
with gr.Blocks(theme=theme) as demo:
...
在上面的示例中，我们将 loader_color 和 slider_color 变量设置为 #FF0000 ，尽管整体 primary_color 使用蓝色调色板。 你可以通过这种方式设置主题中定义的任何 CSS 变量。
In the example above, we've set the loader_color and slider_color variables to #FF0000, despite the overall primary_color using the blue color palette. You can set any CSS variable that is defined in the theme in this manner.
你的 IDE 类型提示应该可以帮助你导航这些变量。 既然 CSS 变量那么多，那我们就来看看这些变量是如何命名和组织的。
Your IDE type hinting should help you navigate these variables. Since there are so many CSS variables, let's take a look at how these variables are named and organized.
CSS 变量名可以变得很长，比如 button_primary_background_fill_hover_dark ！ 然而，它们遵循一个通用的命名约定，这使得理解它们的作用以及找到你要查找的变量变得容易。 下划线分隔，变量名由以下部分组成：
CSS variable names can get quite long, like button_primary_background_fill_hover_dark! However they follow a common naming convention that makes it easy to understand what they do and to find the variable you're looking for. Separated by underscores, the variable name is made up of:
目标元素，例如 button 、 slider 或 block 。
The target element, such as button, slider, or block.
目标元素类型或子元素，例如 button_primary 或 block_label 。
The target element type or sub-element, such as button_primary, or block_label.
属性，例如 button_primary_background_fill 或 block_label_border_width 。
The property, such as button_primary_background_fill, or block_label_border_width.
任何相关状态，例如 button_primary_background_fill_hover 。
Any relevant state, such as button_primary_background_fill_hover.
如果在暗模式下该值不同，则后缀 _dark 。 例如， input_border_color_focus_dark 。
If the value is different in dark mode, the suffix _dark. For example, input_border_color_focus_dark.
当然，很多 CSS 变量名都比这个短，比如 table_border_color 或 input_shadow 。
Of course, many CSS variable names are shorter than this, such as table_border_color, or input_shadow.
尽管有数百个 CSS 变量，但它们并不都必须具有单独的值。 它们通过引用一组核心变量并相互引用来得出它们的值。 这使我们只需修改几个变量即可更改整个主题的外观和感觉，同时还可以更好地控制我们可能想要修改的单个元素。
Though there are hundreds of CSS variables, they do not all have to have individual values. They draw their values by referencing a set of core variables and referencing each other. This allows us to only have to modify a few variables to change the look and feel of the entire theme, while also getting finer control of individual elements that we may want to modify.
要引用核心构造函数变量之一，请在变量名称前加上星号。 要引用核心颜色，请使用 *primary_ 、 *secondary_ 或 *neutral_ 前缀，后跟亮度值。 例如：
To reference one of the core constructor variables, precede the variable name with an asterisk. To reference a core color, use the *primary_, *secondary_, or *neutral_ prefix, followed by the brightness value. For example:
theme = gr.themes.Default(primary_hue="blue").set(
button_primary_background_fill="*primary_200",
button_primary_background_fill_hover="*primary_300",
)
在上面的示例中，我们将 button_primary_background_fill 和 button_primary_background_fill_hover 变量设置为 *primary_200 和 *primary_300 。 这些变量将分别设置为蓝色主调色板的 200 和 300 亮度值。
In the example above, we've set the button_primary_background_fill and button_primary_background_fill_hover variables to *primary_200 and *primary_300. These variables will be set to the 200 and 300 brightness values of the blue primary color palette, respectively.
同样，要引用核心尺寸，请使用 *spacing_ 、 *radius_ 或 *text_ 前缀，后跟尺寸值。 例如：
Similarly, to reference a core size, use the *spacing_, *radius_, or *text_ prefix, followed by the size value. For example:
theme = gr.themes.Default(radius_size="md").set(
button_primary_border_radius="*radius_xl",
)
在上面的示例中，我们将 button_primary_border_radius 变量设置为 *radius_xl 。 此变量将设置为中等半径尺寸范围的 xl 设置。
In the example above, we've set the button_primary_border_radius variable to *radius_xl. This variable will be set to the xl setting of the medium radius size range.
变量也可以相互引用。 例如，看下面的例子：
Variables can also reference each other. For example, look at the example below:
theme = gr.themes.Default().set(
button_primary_background_fill="#FF0000",
button_primary_background_fill_hover="#FF0000",
button_primary_border="#FF0000",
)
必须将这些值设置为通用颜色有点乏味。 相反，我们可以使用 * 前缀在 button_primary_background_fill_hover 和 button_primary_border 变量中引用 button_primary_background_fill 变量。
Having to set these values to a common color is a bit tedious. Instead, we can reference the button_primary_background_fill variable in the button_primary_background_fill_hover and button_primary_border variables, using a * prefix.
theme = gr.themes.Default().set(
button_primary_background_fill="#FF0000",
button_primary_background_fill_hover="*button_primary_background_fill",
button_primary_border="*button_primary_background_fill",
)
现在，如果我们更改 button_primary_background_fill 变量， button_primary_background_fill_hover 和 button_primary_border 变量也会自动更新。
Now, if we change the button_primary_background_fill variable, the button_primary_background_fill_hover and button_primary_border variables will automatically update as well.
如果你打算共享你的主题，这将特别有用 - 它可以轻松修改主题而无需更改每个变量。
This is particularly useful if you intend to share your theme - it makes it easy to modify the theme without having to change every variable.
请注意，暗模式变量会自动相互引用。 例如：
Note that dark mode variables automatically reference each other. For example:
theme = gr.themes.Default().set(
button_primary_background_fill="#FF0000",
button_primary_background_fill_dark="#AAAAAA",
button_primary_border="*button_primary_background_fill",
button_primary_border_dark="*button_primary_background_fill_dark",
)
button_primary_border_dark 将从 button_primary_background_fill_dark 中提取它的值，因为深色模式总是从变量的深色版本中提取。
button_primary_border_dark will draw its value from button_primary_background_fill_dark, because dark mode always draw from the dark version of the variable.
假设你想从头开始创建一个主题！ 我们将逐步完成它 - 你还可以在 gradio 源代码库中查看预构建主题的源代码以供参考 -这是单色主题的源代码。
Let's say you want to create a theme from scratch! We'll go through it step by step - you can also see the source of prebuilt themes in the gradio source repo for reference - here's the source for the Monochrome theme.
我们的新主题类将从 gradio.themes.Base 继承，该主题设置了许多方便的默认值。 让我们做一个简单的演示，创建一个名为 Seafoam 的虚拟主题，并制作一个使用它的简单应用程序。
Our new theme class will inherit from gradio.themes.Base, a theme that sets a lot of convenient defaults. Let's make a simple demo that creates a dummy theme called Seafoam, and make a simple app that uses it.
import gradio as gr
from gradio.themes.base import Base
import time
class Seafoam(Base):
pass
seafoam = Seafoam()
with gr.Blocks(theme=seafoam) as demo:
textbox = gr.Textbox(label="Name")
slider = gr.Slider(label="Count", minimum=0, maximum=100, step=1)
with gr.Row():
button = gr.Button("Submit", variant="primary")
clear = gr.Button("Clear")
output = gr.Textbox(label="Output")
def repeat(name, count):
time.sleep(3)
return name * count
button.click(repeat, [textbox, slider], output)
demo.launch()基本主题非常准系统，并使用 gr.themes.Blue 作为其主要颜色 - 你会注意到主要按钮和加载动画因此都是蓝色的。 让我们更改应用程序的默认核心参数。 我们将覆盖构造函数并为核心构造函数参数传递新的默认值。
The Base theme is very barebones, and uses gr.themes.Blue as it primary color - you'll note the primary button and the loading animation are both blue as a result. Let's change the defaults core arguments of our app. We'll overwrite the constructor and pass new defaults for the core constructor arguments.
我们将使用 gr.themes.Emerald 作为我们的主要颜色，并将次要和中性色调设置为 gr.themes.Blue 。 我们将使用 text_lg 使文本变大。 我们将使用从 Google Fonts 加载的 Quicksand 作为默认字体。
We'll use gr.themes.Emerald as our primary color, and set secondary and neutral hues to gr.themes.Blue. We'll make our text larger using text_lg. We'll use Quicksand as our default font, loaded from Google Fonts.
from __future__ import annotations
from typing import Iterable
import gradio as gr
from gradio.themes.base import Base
from gradio.themes.utils import colors, fonts, sizes
import time
class Seafoam(Base):
def __init__(
self,
*,
primary_hue: colors.Color | str = colors.emerald,
secondary_hue: colors.Color | str = colors.blue,
neutral_hue: colors.Color | str = colors.gray,
spacing_size: sizes.Size | str = sizes.spacing_md,
radius_size: sizes.Size | str = sizes.radius_md,
text_size: sizes.Size | str = sizes.text_lg,
font: fonts.Font
| str
| Iterable[fonts.Font | str] = (
fonts.GoogleFont("Quicksand"),
"ui-sans-serif",
"sans-serif",
),
font_mono: fonts.Font
| str
| Iterable[fonts.Font | str] = (
fonts.GoogleFont("IBM Plex Mono"),
"ui-monospace",
"monospace",
),
):
super().__init__(
primary_hue=primary_hue,
secondary_hue=secondary_hue,
neutral_hue=neutral_hue,
spacing_size=spacing_size,
radius_size=radius_size,
text_size=text_size,
font=font,
font_mono=font_mono,
)
seafoam = Seafoam()
with gr.Blocks(theme=seafoam) as demo:
textbox = gr.Textbox(label="Name")
slider = gr.Slider(label="Count", minimum=0, maximum=100, step=1)
with gr.Row():
button = gr.Button("Submit", variant="primary")
clear = gr.Button("Clear")
output = gr.Textbox(label="Output")
def repeat(name, count):
time.sleep(3)
return name * count
button.click(repeat, [textbox, slider], output)
demo.launch()
看到主按钮和加载动画现在是如何变绿的了吗？ 这些 CSS 变量与 primary_hue 变量相关联。
See how the primary button and the loading animation are now green? These CSS variables are tied to the primary_hue variable.
让我们更直接地修改主题。 我们将调用 set() 方法来显式覆盖 CSS 变量值。 我们可以使用任何 CSS 逻辑，并使用 * 前缀引用我们的核心构造函数参数。
Let's modify the theme a bit more directly. We'll call the set() method to overwrite CSS variable values explicitly. We can use any CSS logic, and reference our core constructor arguments using the * prefix.
from __future__ import annotations
from typing import Iterable
import gradio as gr
from gradio.themes.base import Base
from gradio.themes.utils import colors, fonts, sizes
import time
class Seafoam(Base):
def __init__(
self,
*,
primary_hue: colors.Color | str = colors.emerald,
secondary_hue: colors.Color | str = colors.blue,
neutral_hue: colors.Color | str = colors.blue,
spacing_size: sizes.Size | str = sizes.spacing_md,
radius_size: sizes.Size | str = sizes.radius_md,
text_size: sizes.Size | str = sizes.text_lg,
font: fonts.Font
| str
| Iterable[fonts.Font | str] = (
fonts.GoogleFont("Quicksand"),
"ui-sans-serif",
"sans-serif",
),
font_mono: fonts.Font
| str
| Iterable[fonts.Font | str] = (
fonts.GoogleFont("IBM Plex Mono"),
"ui-monospace",
"monospace",
),
):
super().__init__(
primary_hue=primary_hue,
secondary_hue=secondary_hue,
neutral_hue=neutral_hue,
spacing_size=spacing_size,
radius_size=radius_size,
text_size=text_size,
font=font,
font_mono=font_mono,
)
super().set(
body_background_fill="repeating-linear-gradient(45deg, *primary_200, *primary_200 10px, *primary_50 10px, *primary_50 20px)",
body_background_fill_dark="repeating-linear-gradient(45deg, *primary_800, *primary_800 10px, *primary_900 10px, *primary_900 20px)",
button_primary_background_fill="linear-gradient(90deg, *primary_300, *secondary_400)",
button_primary_background_fill_hover="linear-gradient(90deg, *primary_200, *secondary_300)",
button_primary_text_color="white",
button_primary_background_fill_dark="linear-gradient(90deg, *primary_600, *secondary_800)",
slider_color="*secondary_300",
slider_color_dark="*secondary_600",
block_title_text_weight="600",
block_border_width="3px",
block_shadow="*shadow_drop_lg",
button_shadow="*shadow_drop_lg",
button_large_padding="32px",
)
seafoam = Seafoam()
with gr.Blocks(theme=seafoam) as demo:
textbox = gr.Textbox(label="Name")
slider = gr.Slider(label="Count", minimum=0, maximum=100, step=1)
with gr.Row():
button = gr.Button("Submit", variant="primary")
clear = gr.Button("Clear")
output = gr.Textbox(label="Output")
def repeat(name, count):
time.sleep(3)
return name * count
button.click(repeat, [textbox, slider], output)
demo.launch()
看看我们的主题现在看起来多有趣！ 只需进行一些变量更改，我们的主题看起来就完全不同了。
Look how fun our theme looks now! With just a few variable changes, our theme looks completely different.
你可能会发现探索其他预建主题的源代码以了解它们如何修改基本主题很有帮助。 你还可以发现浏览器的检查器对于从 UI 中选择元素以及查看样式面板中使用了哪些 CSS 变量很有用。
You may find it helpful to explore the source code of the other prebuilt themes to see how they modified the base theme. You can also find your browser's Inspector useful to select elements from the UI and see what CSS variables are being used in the styles panel.
创建主题后，你可以将其上传到 HuggingFace Hub，让其他人查看、使用和构建主题！
Once you have created a theme, you can upload it to the HuggingFace Hub to let others view it, use it, and build off of it!
通过主题类实例或命令行上传主题有两种方法。 我们将使用之前创建的 seafoam 主题覆盖它们。
There are two ways to upload a theme, via the theme class instance or the command line. We will cover both of them with the previously created seafoam theme.
通过类实例
Via the class instance
每个主题实例都有一个名为 push_to_hub 的方法，我们可以使用它来将主题上传到 HuggingFace hub。
Each theme instance has a method called push_to_hub we can use to upload a theme to the HuggingFace hub.
seafoam.push_to_hub(repo_name="seafoam",
version="0.0.1",
hf_token="")
通过命令行
Via the command line
首先将主题保存到磁盘
First save the theme to disk
seafoam.dump(filename="seafoam.json")
然后使用 upload_theme 命令：
Then use the upload_theme command:
upload_theme\
"seafoam.json"\
"seafoam"\
--version "0.0.1"\
--hf_token ""
为了上传主题，你必须拥有一个 HuggingFace 帐户并将你的访问令牌作为 hf_token 参数传递。 但是，如果你通过HuggingFace 命令行（随 gradio 安装）登录，则可以省略 hf_token 参数。
In order to upload a theme, you must have a HuggingFace account and pass your Access Token
as the hf_token argument. However, if you log in via the HuggingFace command line (which comes installed with gradio),
you can omit the hf_token argument.
version 参数允许你为主题指定一个有效的语义版本字符串。 这样你的用户就可以指定他们想在他们的应用程序中使用哪个版本的主题。 这还可以让你发布主题更新，而不必担心更改以前创建的应用程序的外观。 version 参数是可选的。 如果省略，将自动应用下一个补丁版本。
The version argument lets you specify a valid semantic version string for your theme.
That way your users are able to specify which version of your theme they want to use in their apps. This also lets you publish updates to your theme without worrying
about changing how previously created apps look. The version argument is optional. If omitted, the next patch version is automatically applied.
通过调用 push_to_hub 或 upload_theme ，主题资产将存储在HuggingFace 空间中。
By calling push_to_hub or upload_theme, the theme assets will be stored in a HuggingFace space.
我们的 Seafoam 主题的主题预览在这里： Seafoam 预览。
The theme preview for our seafoam theme is here: seafoam preview.
The Theme Gallery显示了所有公共渐变主题。 发布主题后，它会在几分钟后自动显示在主题库中。
The Theme Gallery shows all the public gradio themes. After publishing your theme, it will automatically show up in the theme gallery after a couple of minutes.
你可以按空间上的点赞数对主题进行排序，从最近创建的到最近创建的，以及在明暗模式之间切换主题。
You can sort the themes by the number of likes on the space and from most to least recently created as well as toggling themes between light and dark mode.
要使用中心的主题，请使用 ThemeClass 上的 from_hub 方法并将其传递给你的应用程序：
To use a theme from the hub, use the from_hub method on the ThemeClass and pass it to your app:
my_theme = gr.Theme.from_hub("gradio/seafoam")
with gr.Blocks(theme=my_theme) as demo:
....
你还可以将主题字符串直接传递给 Blocks 或 Interface ( gr.Blocks(theme="gradio/seafoam")
You can also pass the theme string directly to Blocks or Interface (gr.Blocks(theme="gradio/seafoam"))
你可以使用语义版本控制表达式将你的应用固定到上游主题版本。
You can pin your app to an upstream theme version by using semantic versioning expressions.
例如，以下将确保我们从 seafoam 存储库加载的主题在版本 0.0.1 和 0.1.0 之间：
For example, the following would ensure the theme we load from the seafoam repo was between versions 0.0.1 and 0.1.0:
with gr.Blocks(theme="gradio/seafoam@>=0.0.1,<0.1.0") as demo:
....
享受创建自己的主题！ 如果你制作了一款你引以为豪的产品，请将其上传到中心与全世界分享！ 如果你在Twitter上标记我们，我们可以大声疾呼你的主题！
Enjoy creating your own themes! If you make one you're proud of, please share it with the world by uploading it to the hub! If you tag us on Twitter we can give your theme a shout out!