Select a base theme below you would like to build off of. Note: when you click 'Load Theme', all variable values in other tabs will be overwritten!
Set the three hues of the theme: primary_hue, secondary_hue, and neutral_hue.
Each of these is a palette ranging from 50 to 950 in brightness. Pick a preset palette - optionally, open the accordion to overwrite specific values.
Note that these variables do not affect elements directly, but are referenced by other variables with asterisks, such as *primary_200 or *neutral_950.
Set the sizing of the theme via: text_size, spacing_size, and radius_size.
Each of these is set to a collection of sizes ranging from xxs to xxl. Pick a preset size collection - optionally, open the accordion to overwrite specific values.
Note that these variables do not affect elements directly, but are referenced by other variables with asterisks, such as *spacing_xl or *text_sm.
Set the main font and the monospace font_mono here.
Set up to 4 values for each (fallbacks in case a font is not available).
Check "Google Font" if font should be loaded from Google Fonts.
Main Font
Monospace Font
These set set the values for the entire body of the app. You can set these to one of the dropdown values, or clear the dropdown to set a custom value.
The background of the entire app.
The background of the entire app in dark mode.
The default text color.
The default text color in dark mode.
The default text size.
The text color used for softer, less important text.
The text color used for softer, less important text in dark mode.
The default text weight.
The corner radius used for embedding when the app is embedded within a page.
These set the colors for common elements. You can set these to one of the dropdown values, or clear the dropdown to set a custom value.
The background primarily used for items placed directly on the page.
The background primarily used for items placed directly on the page in dark mode.
The background primarily used for items placed on top of another item.
The background primarily used for items placed on top of another item in dark mode.
The border color used for accented items.
The border color used for accented items in dark mode.
The subdued border color for accented items.
The subdued border color for accented items in dark mode.
The border color primarily used for items placed directly on the page.
The border color primarily used for items placed directly on the page in dark mode.
The color used for accented items.
The softer color used for accented items.
The softer color used for accented items in dark mode.
This sets the text styling for text elements. You can set these to one of the dropdown values, or clear the dropdown to set a custom value.
The text color used for links.
The text color used for links in dark mode.
The text color used for links when they are active.
The text color used for links when they are active in dark mode.
The text color used for links when they are hovered over.
The text color used for links when they are hovered over in dark mode.
The text color used for links when they have been visited.
The text color used for links when they have been visited in dark mode.
The text size used for markdown and other prose.
The text weight used for markdown and other prose.
The text weight of a header used for markdown and other prose.
The background color of code blocks.
The background color of code blocks in dark mode.
These set the high-level shadow rendering styles. These variables are often referenced by other component-specific shadow variables. You can set these to one of the dropdown values, or clear the dropdown to set a custom value.
Drop shadow used by other shadowed items.
Larger drop shadow used by other shadowed items.
Inset shadow used by other shadowed items.
Size of shadow spread used by shadowed items.
Size of shadow spread used by shadowed items in dark mode.
These set the style for common layout elements, such as the blocks that wrap components. You can set these to one of the dropdown values, or clear the dropdown to set a custom value.
The background around an item.
The background around an item in dark mode.
The border color around an item.
The border color around an item in dark mode.
The border width around an item.
The border width around an item in dark mode.
The color of the info text.
The color of the info text in dark mode.
The size of the info text.
The weight of the info text.
The background of the title label of a media element (e.g. image).
The background of the title label of a media element (e.g. image) in dark mode.
The border color of the title label of a media element (e.g. image).
The border color of the title label of a media element (e.g. image) in dark mode.
The border width of the title label of a media element (e.g. image).
The border width of the title label of a media element (e.g. image) in dark mode.
The shadow of the title label of a media element (e.g. image).
The text color of the title label of a media element (e.g. image).
The text color of the title label of a media element (e.g. image) in dark mode.
The margin of the title label of a media element (e.g. image) from its surrounding container.
The padding of the title label of a media element (e.g. image).
The corner radius of the title label of a media element (e.g. image).
The corner radius of a right-aligned helper label.
The text size of the title label of a media element (e.g. image).
The text weight of the title label of a media element (e.g. image).
The padding around an item.
The corner radius around an item.
The shadow under an item.
The shadow under an item in dark mode.
The background of the title of a form element (e.g. textbox).
The background of the title of a form element (e.g. textbox) in dark mode.
The border color of the title of a form element (e.g. textbox).
The border color of the title of a form element (e.g. textbox) in dark mode.
The border width of the title of a form element (e.g. textbox).
The border width of the title of a form element (e.g. textbox) in dark mode.
The text color of the title of a form element (e.g. textbox).
The text color of the title of a form element (e.g. textbox) in dark mode.
The padding of the title of a form element (e.g. textbox).
The corner radius of the title of a form element (e.g. textbox).
The text size of the title of a form element (e.g. textbox).
The text weight of the title of a form element (e.g. textbox).
The corner radius of a layout component that holds other content.
The border gap between form elements, (e.g. consecutive textboxes).
The gap between items within a row or column.
The background of a panel.
The background of a panel in dark mode.
The border color of a panel.
The border color of a panel in dark mode.
The border width of a panel.
The border width of a panel in dark mode.
The text size of a section header (e.g. tab name).
The text weight of a section header (e.g. tab name).
These set the style for elements within components. You can set these to one of the dropdown values, or clear the dropdown to set a custom value.
The body text color in the accordion.
The body text color in the accordion in dark mode.
The body text color in the table.
The body text color in the table in dark mode.
The background of a checkbox square or radio circle.
The text size of the chatbot text.
The background of a checkbox square or radio circle in dark mode.
The background of a checkbox square or radio circle when focused.
The background of a checkbox square or radio circle when focused in dark mode.
The background of a checkbox square or radio circle when hovered over.
The background of a checkbox square or radio circle when hovered over in dark mode.
The background of a checkbox square or radio circle when selected.
The background of a checkbox square or radio circle when selected in dark mode.
The border color of a checkbox square or radio circle.
The border color of a checkbox square or radio circle in dark mode.
The border color of a checkbox square or radio circle when focused.
The border color of a checkbox square or radio circle when focused in dark mode.
The border color of a checkbox square or radio circle when hovered over.
The border color of a checkbox square or radio circle when hovered over in dark mode.
The border color of a checkbox square or radio circle when selected.
The border color of a checkbox square or radio circle when selected in dark mode.
The corner radius of a checkbox square.
The border width of a checkbox square or radio circle.
The border width of a checkbox square or radio circle in dark mode.
The checkmark visual of a checkbox square.
The circle visual of a radio circle.
The shadow of a checkbox square or radio circle.
The background of the surrounding button of a checkbox or radio element.
The background of the surrounding button of a checkbox or radio element in dark mode.
The background of the surrounding button of a checkbox or radio element when hovered over.
The background of the surrounding button of a checkbox or radio element when hovered over in dark mode.
The background of the surrounding button of a checkbox or radio element when selected.
The background of the surrounding button of a checkbox or radio element when selected in dark mode.
The border color of the surrounding button of a checkbox or radio element.
The border color of the surrounding button of a checkbox or radio element in dark mode.
The border color of the surrounding button of a checkbox or radio element when hovered over.
The border color of the surrounding button of a checkbox or radio element when hovered over in dark mode.
The border color of the surrounding button of a checkbox or radio element when selected.
The border color of the surrounding button of a checkbox or radio element when selected in dark mode.
The border width of the surrounding button of a checkbox or radio element.
The border width of the surrounding button of a checkbox or radio element in dark mode.
The gap consecutive checkbox or radio elements.
The padding of the surrounding button of a checkbox or radio element.
The shadow of the surrounding button of a checkbox or radio element.
The text size of the label accompanying a checkbox or radio element.
The text weight of the label accompanying a checkbox or radio element.
The text color of the label accompanying a checkbox or radio element.
The text color of the label accompanying a checkbox or radio element in dark mode.
The text color of the label accompanying a checkbox or radio element when selected.
The text color of the label accompanying a checkbox or radio element when selected in dark mode.
The background of an error message.
The background of an error message in dark mode.
The border color of an error message.
The border color of an error message in dark mode.
The border width of an error message.
The border width of an error message in dark mode.
The text color of an error message.
The text color of an error message in dark mode.
The background of an input field.
The background of an input field in dark mode.
The background of an input field when focused.
The background of an input field when focused in dark mode.
The background of an input field when hovered over.
The background of an input field when hovered over in dark mode.
The border color of an input field.
The border color of an input field in dark mode.
The border color of an input field when focused.
The border color of an input field when focused in dark mode.
The border color of an input field when hovered over.
The border color of an input field when hovered over in dark mode.
The border width of an input field.
The border width of an input field in dark mode.
The padding of an input field.
The placeholder text color of an input field.
The placeholder text color of an input field in dark mode.
The corner radius of an input field.
The shadow of an input field.
The shadow of an input field in dark mode.
The shadow of an input field when focused.
The shadow of an input field when focused in dark mode.
The text size of an input field.
The text weight of an input field.
The color of the loading animation while a request is pending.
The color of the loading animation while a request is pending in dark mode.
The color of the slider in a range element.
The color of the slider in a range element in dark mode.
The background used for stats visuals (e.g. confidence bars in label).
The background used for stats visuals (e.g. confidence bars in label) in dark mode.
The border color of a table.
The border color of a table in dark mode.
The background of even rows in a table.
The background of even rows in a table in dark mode.
The background of odd rows in a table.
The background of odd rows in a table in dark mode.
The corner radius of a table.
The background of a focused row in a table.
The background of a focused row in a table in dark mode.
These set the style for buttons. You can set these to one of the dropdown values, or clear the dropdown to set a custom value.
The border width of a button.
The border width of a button in dark mode.
The transform animation of a button on hover.
The transform animation of a button when pressed.
The transition animation duration of a button between regular, hover, and focused states.
The padding of a button with the default "large" size.
The corner radius of a button with the default "large" size.
The text size of a button with the default "large" size.
The text weight of a button with the default "large" size.
The padding of a button set to "small" size.
The corner radius of a button set to "small" size.
The text size of a button set to "small" size.
The text weight of a button set to "small" size.
The padding of a button set to "medium" size.
The corner radius of a button set to "medium" size.
The text size of a button set to "medium" size.
The text weight of a button set to "medium" size.
The background of a button of "primary" variant.
The background of a button of "primary" variant in dark mode.
The background of a button of "primary" variant when hovered over.
The background of a button of "primary" variant when hovered over in dark mode.
The border color of a button of "primary" variant.
The border color of a button of "primary" variant in dark mode.
The border color of a button of "primary" variant when hovered over.
The border color of a button of "primary" variant when hovered over in dark mode.
The text color of a button of "primary" variant.
The text color of a button of "primary" variant in dark mode.
The text color of a button of "primary" variant when hovered over.
The text color of a button of "primary" variant when hovered over in dark mode.
The shadow under a primary button.
The shadow under a primary button when hovered over.
The shadow under a primary button when pressed.
The shadow under a primary button in dark mode.
The shadow under a primary button when hovered over in dark mode.
The shadow under a primary button when pressed in dark mode.
The background of a button of default "secondary" variant.
The background of a button of default "secondary" variant in dark mode.
The background of a button of default "secondary" variant when hovered over.
The background of a button of default "secondary" variant when hovered over in dark mode.
The border color of a button of default "secondary" variant.
The border color of a button of default "secondary" variant in dark mode.
The border color of a button of default "secondary" variant when hovered over.
The border color of a button of default "secondary" variant when hovered over in dark mode.
The text color of a button of default "secondary" variant.
The text color of a button of default "secondary" variant in dark mode.
The text color of a button of default "secondary" variant when hovered over.
The text color of a button of default "secondary" variant when hovered over in dark mode.
The shadow under a secondary button.
The shadow under a secondary button when hovered over.
The shadow under a secondary button when pressed.
The shadow under a secondary button in dark mode.
The shadow under a secondary button when hovered over in dark mode.
The shadow under a secondary button when pressed in dark mode.
The background of a button of "cancel" variant.
The background of a button of "cancel" variant in dark mode.
The background of a button of "cancel" variant when hovered over.
The background of a button of "cancel" variant when hovered over in dark mode.
The border color of a button of "cancel" variant.
The border color of a button of "cancel" variant in dark mode.
The border color of a button of "cancel" variant when hovered over.
The border color of a button of "cancel" variant when hovered over in dark mode.
The text color of a button of "cancel" variant.
The text color of a button of "cancel" variant in dark mode.
The text color of a button of "cancel" variant when hovered over.
The text color of a button of "cancel" variant when hovered over in dark mode.
Theme Builder
Welcome to the theme builder. The left panel is where you create the theme. The different aspects of the theme are broken down into different tabs. Here's how to navigate them:
- First, set the "Source Theme". This will set the default values that you can override.
- Set the "Core Colors", "Core Sizing" and "Core Fonts". These are the core variables that are used to build the rest of the theme.
- The rest of the tabs set specific CSS theme variables. These control finer aspects of the UI. Within these theme variables, you can reference the core variables and other theme variables using the variable name preceded by an asterisk, e.g.
*primary_50or*body_text_color. Clear the dropdown to set a custom value. - Once you have finished your theme, click on "View Code" below to see how you can integrate the theme into your app. You can also click on "Upload to Hub" to upload your theme to the Hugging Face Hub, where others can download and use your theme.
Below this panel is a dummy app to demo your theme.
| Radio | Dropdown | Go |
|---|
Dataframe
1 | 2 | 3 |
|---|---|---|
1 | 2 | 3 |
cat
Hello
Hi
Hello