Looking to refresh your app’s appearance? You can easily alter the default theme colors in your
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!
Light Theme Modification
To modify the light theme, find or create the
[UI.theme.light] section and update the colors as per your preference.
[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] background = "#FAFAFA" paper = "#FFFFFF" [UI.theme.dark.primary] main = "#A80061" dark = "#380039" light = "#FFE7EB"