Looking to refresh your app’s appearance? You can easily alter the default theme colors in your config.toml file.

Currently, you have the freedom to modify:

  • Background color: This option allows you to change the color of the app’s background.
  • Paper color: This alters the color of the ‘paper’ elements within the app, such as the navbar, widgets, etc.
  • Primary color: This encompasses three shades - main, dark, and light. These colors are primarily used for interactive interface elements.

If you started your Chainlit app with -w (file watcher), it will refresh every time you update the theme!

​
Default Theme

To set the default theme, navigate to the [UI.theme] section in your config.toml file and update the default value.

config.toml
[UI.theme]
    default = "dark"

​
Light Theme Modification

To modify the light theme, find or create the [UI.theme.light] section and update the colors as per your preference.

config.toml
[UI.theme.light]
    background = "#110061"
    paper = "#FFFFFF"

    [UI.theme.light.primary]
        main = "#110061"
        dark = "#180039"
        light = "#FFE7EB"

​
Dark Theme Modification

To alter the dark theme, the section begins with [UI.theme.dark].

config.toml
[UI.theme.dark]
    background = "#FAFAFA"
    paper = "#FFFFFF"

    [UI.theme.dark.primary]
        main = "#A80061"
        dark = "#380039"
        light = "#FFE7EB"

Was this page helpful?

Logo and FaviconJS