> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chainlit.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme

Chainlit's theme is based on CSS variables.

To modify the CSS variables, create a `theme.json` file under `/public` with the following content.

You can check [Shadcn's documentation](https://ui.shadcn.com/docs/theming#list-of-variables) to learn about the role of each variable.

<Note>If the UI is not updated, try to empty your browser cache.</Note>

```json theme.json theme={null}
{
    "custom_fonts": [],
    "variables": {
        "light": {
            "--font-sans": "'Inter', sans-serif",
            "--font-mono": "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace",
            "--background": "0 0% 100%",
            "--foreground": "0 0% 5%",
            "--card": "0 0% 100%",
            "--card-foreground": "0 0% 5%",
            "--popover": "0 0% 100%",
            "--popover-foreground": "0 0% 5%",
            "--primary": "340 92% 52%",
            "--primary-foreground": "0 0% 100%",
            "--secondary": "210 40% 96.1%",
            "--secondary-foreground": "222.2 47.4% 11.2%",
            "--muted": "0 0% 90%",
            "--muted-foreground": "0 0% 36%",
            "--accent": "0 0% 95%",
            "--accent-foreground": "222.2 47.4% 11.2%",
            "--destructive": "0 84.2% 60.2%",
            "--destructive-foreground": "210 40% 98%",
            "--border": "0 0% 90%",
            "--input": "0 0% 90%",
            "--ring": "340 92% 52%",
            "--radius": "0.75rem",
            "--sidebar-background": "0 0% 98%",
            "--sidebar-foreground": "240 5.3% 26.1%",
            "--sidebar-primary": "240 5.9% 10%",
            "--sidebar-primary-foreground": "0 0% 98%",
            "--sidebar-accent": "240 4.8% 95.9%",
            "--sidebar-accent-foreground": "240 5.9% 10%",
            "--sidebar-border": "220 13% 91%",
            "--sidebar-ring": "217.2 91.2% 59.8%"
        },
        "dark": {
            "--font-sans": "'Inter', sans-serif",
            "--font-mono": "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace",
            "--background": "0 0% 13%",
            "--foreground": "0 0% 93%",
            "--card": "0 0% 18%",
            "--card-foreground": "210 40% 98%",
            "--popover": "0 0% 18%",
            "--popover-foreground": "210 40% 98%",
            "--primary": "340 92% 52%",
            "--primary-foreground": "0 0% 100%",
            "--secondary": "0 0% 19%",
            "--secondary-foreground": "210 40% 98%",
            "--muted": "0 1% 26%",
            "--muted-foreground": "0 0% 71%",
            "--accent": "0 0% 26%",
            "--accent-foreground": "210 40% 98%",
            "--destructive": "0 62.8% 30.6%",
            "--destructive-foreground": "210 40% 98%",
            "--border": "0 1% 26%",
            "--input": "0 1% 26%",
            "--ring": "340 92% 52%",
            "--sidebar-background": "0 0% 9%",
            "--sidebar-foreground": "240 4.8% 95.9%",
            "--sidebar-primary": "224.3 76.3% 48%",
            "--sidebar-primary-foreground": "0 0% 100%",
            "--sidebar-accent": "0 0% 13%",
            "--sidebar-accent-foreground": "240 4.8% 95.9%",
            "--sidebar-border": "240 3.7% 15.9%",
            "--sidebar-ring": "217.2 91.2% 59.8%"
        }
    }
}
```

As you may have noticed, the colors are not expressed in Hexadecimal but rather in HSL. This is mandatory.
You can easily [convert any color to HSL](https://www.google.com/search?q=hex+to+hsl).

The `custom_fonts` array can receive URLs (typically from google fonts) like:

```json theme={null}
custom_fonts: ["https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"]
```