# Theming

Custom theming is supported on **desktop (Electron)** only. You load a single custom CSS file that overrides or extends the app's styles.

## Built-in Themes

The app ships with several built-in themes that you can select from the settings:

- Arc
- Catppuccin Mocha
- Cyberpunk
- Dark Base
- Dracula
- Everforest
- Glass
- Nord Polar Night
- Nord Snow Storm
- Rainbow

You can also color-code individual projects and tags with custom primary, accent, and warn colors.

Project, tag, Today, and Inbox theme settings can also use separate background
images for light and dark mode. The **Darken/lighten background image for better
contrast** slider and the **Blur background image** slider are shown when at
least one background image is set. The blur slider defaults to `0px`. The
**Disable colored background tint** setting is shown when at least one mode has no
background image and still uses the app's tinted background.

## Custom CSS Themes

- Place a file named **`styles.css`** in your user data folder (not in a subfolder). The app loads it at startup and injects it into the renderer.
- Where that folder is and how to find it: [[3.06-User-Data]]. Invalid CSS may fail to load and is logged.

## Resources

- **Ready-made themes:** [super-productivity-themes (dist)](https://github.com/super-productivity/super-productivity-themes/tree/main/dist) — download and copy into your user data folder.
- **Create your own:** [super-productivity-themes](https://github.com/super-productivity/super-productivity-themes) — repo with info and examples for building custom themes.

## Related

- [[3.06-User-Data]] — User data folder location and `styles.css` behavior.
