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
Plainspace
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) — download and copy into your user data folder.
Create your own: super-productivity-themes — repo with info and examples for building custom themes.

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

1.00-Quickstarts

2.00-How_To

Using Super-Productivity

Contributing to Super-Productivity

3.00-Reference

4.00-Concepts

Data-and-Integrations

Organizing

Planning

Doing

Reviewing

If you have further questions, please refer to the discussions page.