Mirrors/super-productivity
1
0
Fork 0
mirror of https://github.com/johannesjo/super-productivity.git synced 2026-07-29 10:40:12 +00:00
Code Issues Projects Releases Wiki Activity
super-productivity/docs/wiki/3.09-Theming.md
Johannes Millan 0ec8c207a8 feat(theme): add Plainspace built-in theme 
A warm paper theme ported from plainspace.org: cream surfaces, a
terracotta primary and a teal accent, in light and dark. Registered in
BUILT_IN_THEMES (requiredMode: system) and listed in the theming docs.

Surfaces/ink primitives drive the semantic tokens; the primary/accent
palette ramps recolor the brand. Dark-mode Category-B tokens (subtasks,
notes, selected rows, schedule events) are re-derived from the warm
surface ladder so nothing leaks the base cold-grey ramp.

Signature paper touches:
- squared graph-paper backdrop (reuses the body::before layer)
- hand-drawn terracotta underlines on headings and collapsible headers
- a hand-drawn rule under each board column header in place of a panel box
- warm soft paper shadows (--card-shadow split per mode) and tighter
  3/6/8px radii

The ambient primary-tinted gradient wash is removed (repurposed to the
grid); remaining gradients are contextual and left untouched.
2026-06-15 14:06:21 +02:00

1.7 KiB
Raw Permalink Blame History

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

Related

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