📔️ Soothing pastel theme for Joplin

  • By Catppuccin
  • Last update: Dec 22, 2022
  • Comments: 6

Catppuccin for Joplin


  1. Download the files userchrome.css and userstyle.css from your preferred flavour from the src/ directory.
  2. Move these files to the Joplin configuration directory:
    Linux/macOS: ~/.config/joplin/
    Windows: C:\Users\%USERNAME%\.config\joplin\
  3. You need the Rich Markdown Plugin and need to enable extra CSS options by going into Options -> Rich Markdown -> Add additional CSS classes for enhanced customization.
  4. Enable the dark theme from Appearance to use the theme.


  • Q: "My font looks bad" A: The theme uses Noto Sans and Roboto Mono fonts along with Font Awesome 5 for icons. You need to install those fonts for the font to render correctly.
  • Q: "How to change the colours/fonts?" A: The colours/fonts are defined inside the two .css files. Change the colours and fonts from these files to suit your needs.

💝 Thanks to

  • stysebae for the initial vsc-type themes on which this theme is based.
  • ghostx31


Copyright © 2021-present Catppuccin Org




  • 1

    Markdown bar in note editor incomplete and covers first line of note

    Expected Behavior

    The markdown bar should have all the icons like this:


    (This is unthemed dark mode)

    Current Behavior

    The markdown bar does not show most of the icons and blocks the top line of the note: 2022-09-21-172304_1019x104_scrot

    Steps to Reproduce

    1. Copy userchrome.css and userstyle.css into Joplin config
    2. Install Rich Markdown plugin
    3. Enable dark theme


    OS: Arch Linux x86_64 v5.19.9-arch1-1 WM: i3 v.4.20.1 Joplin Desktop: v2.8.8 installed from AUR package (https://aur.archlinux.org/packages/joplin-desktop) GTK theme: Catppuccin-Frappe-Peach

    The theme from this repo that I am using is Frappe but I also tried it with Mocha and had the same issue.

  • 2

    The command palette is not themed.

    Recently opened the command palette Ctrl+Shift+P and seems like its not themed. Adding a screenshot as well. Screenshot from 2022-09-04 12-22-16

    I am quite busy right now with University projects as well as catppuccin/cli among other things. I'd love for the CSS wizards out there (or on our server as well) to maybe take out some time and correct this out and make a PR because I didn't understand the parent child relationship on this one. For starters, the CSS selector for this is div.modal-dialog.

  • 3

    Cursor block does not render in normal mode when using vim mode in code blocks.

    Description of the bug

    • The cursor block does not render inside a code block when using the vim mode and the cursor is in nornal mode.
    • The issue presents itself only when in normal mode inside a code block.

    Expected behaviour

    • The cursor block should render the same way it renders in insert mode or visual mode.

    Acceptance criteria

    • The cursor block should render with the rosewater colour.
  • 4

    fix: show chonky cursor in code block


    • [x] change class for code block so it isn't blocking highlight and cursor


    Related issue: #7


  • 5

    Joplin theme as a plugin

    Suggestion to make this a Joplin plugin using [Joplin Plugin API]. (https://joplinapp.org/api/references/plugin_api/classes/joplin.html).

    • Have access to official js Plugin API
    • Ability to package icons/fonts along with the stylesheets.
    • Change theme variants from within the app as a setting.
    • Get listed in the community Joplin plugins list.

    Reference: https://github.com/andrejilderda/joplin-macos-native-theme

  • 6

    Change Latte config over to Light theme in-app.


    Currently, the latte theme expects the dark theme to be enabled in the Joplin app. Since Latte is a light theme, having to enable dark theme seems counter-intuitive. I feel that refactoring should be done to the latte css file so that we can use latte by enabling the light theme from within the app.

    How it renders when light theme enabled in-app


    • The biggest inconsistency is the difference of colour between the panel and the editor window.

    How it should render


    • Obviously, there are other issues as well and it'd be better to fix them as a QoL fixes.

    Acceptance criteria

    Feel free to fork and PR the changes.