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

# Themes and QuickCSS

> Use QuickCSS, local themes, and theme links in Illegalcord.

Illegalcord theme support is built around CSS. The source code stores theme state through `@api/Settings` and loads CSS through `src/api/Themes.ts`.

## Theme surfaces

| Surface                | Use it for                                                                                 |
| ---------------------- | ------------------------------------------------------------------------------------------ |
| QuickCSS               | Small local CSS changes edited from **Illegalcord > Edit QuickCSS** or the **Themes** tab. |
| Local themes           | Theme files stored in the local themes folder exposed by the native client.                |
| Theme links            | Remote CSS links stored in `Settings.themeLinks` and enabled through theme settings.       |
| Theme activation modes | Per-theme rules such as always, light theme only, or dark theme only.                      |

## Edit QuickCSS

<Steps>
  <Step title="Open the editor">
    Open **Illegalcord Settings > Illegalcord** and choose **Edit QuickCSS**, or open the **Themes** tab.
  </Step>

  <Step title="Write CSS">
    Add small CSS changes and save. QuickCSS reloads without rebuilding the client.
  </Step>

  <Step title="Back up your work">
    Export QuickCSS from **Backup & Restore** before large edits.
  </Step>
</Steps>

```css theme={null}
:root {
  --background-primary: #1e1f24;
  --background-secondary: #17181d;
  --text-normal: #f2f3f5;
}
```

## Add theme files

Use the **Themes** tab to open the themes folder when the native target supports it. Add `.css` files there, then reload themes from the UI.

<Tip>
  Local files are easier to debug than long remote stylesheets. Start locally, then move to a hosted link when the theme is stable.
</Tip>

## Use theme links

Theme links are useful for CSS hosted on GitHub, a personal site, or another trusted source. Add only links you trust. CSS can hide UI, imitate prompts, or make the client hard to use.

## Build-friendly CSS advice

* Prefer Discord CSS variables for broad styling.
* Avoid relying on generated class name fragments in long-lived themes.
* Keep QuickCSS small and use local theme files for larger work.
* Use **Backup & Restore > Export QuickCSS** before experimenting.

<Warning>
  A broken theme can make Discord hard to navigate. If that happens, remove the theme file, disable QuickCSS from settings data, or restore a known-good backup.
</Warning>