Bring your own color themes to the Todoist desktop app (Windows). Custom themes show up as native cards in Settings -> Theme -> "Your themes", right next to the built‑in ones, and switch instantly. Ships with light and dark themes.
⚠️ Unofficial project, not affiliated with Doist. It modifies Todoist’s local app files on your machine, so use at your own risk. You’ll need to re‑run the installer after Todoist updates itself. Everything stays local - nothing is sent anywhere.
| Theme | Mode |
|---|---|
| Nord | dark |
| Dracula | dark |
| Catppuccin Mocha | dark |
| Ayu Dark | dark |
| Aura | dark |
| Rosé Pine | dark |
| Catppuccin Latte | light |
| Ayu Light | light |
| Rosé Pine Dawn | light |
| Solarized Light | light |
| GitHub Light | light |
- The Todoist desktop app - Windows
- Node.js (used once to unpack/repack
app.asarvia@electron/asar)
Download or clone this repo, then fully close Todoist (quit it from the tray / menu bar, not just the window) and run the installer for your OS from the repo folder.
powershell -ExecutionPolicy Bypass -File .\patch-todoist-themes.ps1Then start Todoist → Settings -> Theme → pick a theme under "Your themes."
The installer backs up app.asar to app.asar.bak (next to it) and writes a small
config pointing at this repo’s themes/ folder, in Todoist’s user‑data folder %APPDATA%\Todoist\custom-themes-config.json
Drop a <Name>.css file into themes/ and restart Todoist - it appears as a card
automatically. The file name is the theme name; an optional header tunes the card:
/* @name: My Theme display name (defaults to the file name)
@base: dark dark or light - which built‑in theme it overlays
@accent: #2d7d9a the accent color used in the preview swatch */
:root {
--product-library-background-base-primary: #1e1e1e;
--reactist-content-primary: #dcddde;
--product-library-actionable-primary-idle-fill: #2d7d9a;
/* …see any file in themes/ for the full token set… */
}Semantic colors (task priorities, project colors, due‑date colors) are intentionally left to the base theme so the app stays readable. Use any included theme as a template.
See Modify.md for a step‑by‑step theming guide, the token groups that
matter, the scrollbar tokens, and the full token reference (misc/todoist-tokens.txt).
Todoist applies a theme by putting a theme_<name> class on <html> and storing the
choice in localStorage. A small loader is prepended to the app’s Electron main
process inside app.asar. On each window load it:
- reads the
<name>.cssfiles fromthemes/; - injects a card per theme into the native "Your themes" picker by cloning a real theme button (so cards match Todoist exactly and keep working across app updates);
- applies the selected theme as a scoped
theme_ct<id>override class plus a base class (theme_dark/theme_todoist), so switching back to a built‑in theme still works.
Selection is kept in localStorage (__ct_selected, mirrored to CurrentTheme).
App updates overwrite app.asar, which removes the loader. Just re‑run the installer
after an update - it rebuilds cleanly from the backup and never stacks.
Close Todoist and restore the backup that sits next to app.asar:
copy /Y "%LOCALAPPDATA%\Programs\todoist\resources\app.asar.bak" "%LOCALAPPDATA%\Programs\todoist\resources\app.asar"- Add support for Linux
- Add support for MacOS