📔️ Soothing pastel theme for Joplin

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

Logo
Catppuccin for Joplin

Usage

  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.

🙋 FAQ

  • 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

Github

https://github.com/catppuccin/joplin

Comments(6)

  • 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:

    2022-09-21-172156_1019x99_scrot

    (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

    Environment

    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.
    Thanks!

  • 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

    Changes:

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

    Notes

    Related issue: #7

    https://user-images.githubusercontent.com/15822994/193475108-076c0afa-ffe6-49f2-bda1-e1cab6612e87.mov

  • 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.

    Why

    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

    image

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

    How it should render

    image

    • 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.