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.

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.