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 (flat rows separated by hairlines; formerly the "Lines" theme)
• Classic (the boxed task cards that were the default before)
• Arc
• Catppuccin Mocha
• Cybr (Cyberpunk)
• Dark Base
• Dracula
• Everforest
• Glass
• 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.

Task multi-selection uses a thin outline in the same primary color as the detail panel. The focused row has a thicker outline so the keyboard target remains visible within a multi-selection. Focus and multi-selection do not add a background tint. The task whose details are open uses a background highlight instead of a selection outline. Custom themes can provide their own task surfaces.

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.

Scheduled-date Badge Colors

Scheduled-date/time icons and their text badges in task rows turn red (the theme's --c-warn color) once a task is overdue. All other dates and completed tasks keep the default color. Timed dates turn red when their scheduled time is reached, using the shared one-second clock and refreshing when the app becomes active again. Tracking a task removes the red color; stopping tracking restores it. Custom CSS themes change this color through --c-warn.

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.