red
, a hex code, or an RGB value to apply to the attribute.bubblegum
class to make a pink, rotated component and makes the header font color for CoreSection h3
elements yellow.
Add the `.css` file to your project
.css
file in your project or upload an existing one via the Code tab.This example creates a new file named theme.css
in the static
directory with the following content:static
, prepend the directory name to the beginning of the filename. For example, static/theme.css
.Import the CSS file in your agent's code
import_stylesheet
method in main.py
. The code below imports the stylesheet named theme
from the static
directory.import_stylesheet
method from the state
object. See Switch stylesheets during runtime for more information.Apply CSS classes to components
bubblegum
class to a Section
component so that the component’s background is pink and rotated 5 degrees. The CoreSection h3
styling applies to the header for any Section
components, making the header text yellow.
Core
that you can use when defining CSS rules.
For example, the Text
component has the class name CoreText
. You can use this class name to style all Text
components with the following CSS rule:
!important
flag is essential when targeting attributes that are configurable via the component’s configuration menu, such as text and background colors. Without the !important
flag, the styles you define in CSS will be overridden by the component’s configuration menu styling, because the configuration menu styling is of higher specificity.import_stylesheet
method. To replace the current stylesheet with a new one, use the same stylesheet name but a different path to a new stylesheet.
The example below switches the stylesheet named theme
to a different file when the handle_cyberpunk
or handle_minimalist
functions are called.