Theming

Super Productivity includes built-in themes and can install local CSS theme files. Themes change presentation only; they do not change or sync task data.

Built-in Themes

The app ships with these themes, selectable under Settings → General → Theme:

• Default
• Arc
• Catppuccin Mocha
• Cybr (Cyberpunk)
• Dark Base
• Dracula
• Everforest
• Glass
• Lines
• Liquid Glass
• Nord Polar Night
• Nord Snow Storm
• Plainspace
• Rainbow
• Velvet
• Zen

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

• Select Install theme… and choose a .css file. Installed themes are stored locally in IndexedDB and appear in the same theme list as the built-ins.
• A theme should define at least --surface-1, --surface-2, --ink, and --ink-on-channel. Missing tokens produce a warning and inherit the app defaults.
• Themes installed through Settings cannot load remote or bundled assets. Remote URLs, relative URLs, data: URLs, @import, src(), and files larger than 500 KB are rejected.
• Only install themes from sources you trust. CSS cannot execute scripts, but it can hide or visually rearrange information.

Electron also retains the legacy optional styles.css file in the user data folder. It is unvalidated trusted-local CSS and can load resources, so use only CSS you control. See [[3.06-User-Data]] for its location. The in-app installer is preferred because installed themes can be selected and removed from Settings.

Resources

• Ready-made themes: super-productivity-themes (dist) — download a .css file and install it from Settings → General → Theme.
• 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.