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) — download and copy into your user data folder.
• Create your own: 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.