VSCode Community Material Themes for Joplin
See Screenshots section
These themes are flat material themes for newer version (>= 2.x) of Joplin desktop application. They are heavily inspired by the color schemes Community Material Themes for Visual Studio Code.
These themes are modified versions of joplin-vsc-material-theme by mahor1221. These themes are not longer maintained and not suited for newer versions of Joplin. Here are their updated versions for Joplin >= 2.x.
Launch Joplin desktop application:
- Make sure that Joplin is using the dark mode in
Tools > Options > Appearance - Go to
Tools > Options > Appearance > Show Advanced Settings. Paste the content ofuserstyle.cssin the file opened by clicking on the button "Custom stylesheet for rendered Markdown"; paste the content ofuserchrome.cssin the file opened by clicking on the button "Custom stylesheet for Joplin wide-app styles". Alternatively, you can also clone this repository and create symbolic links touserchrome.cssanduserstyle.cssinside Joplin configuration folder (e.g. in~/.config/joplin-desktopon Linux).userchrome.cssanduserstyle.cssfiles can be found in one of the folders of this repository, depending on the theme you would like to install.
Notes:
- Please visit the topic Share your CSS on Joplin's forum. There are some tweaks you might be interested in.
- For enhanced customization, you can also download and install the plugin Joplin Rich Markdown. Then, enable "Add additional CSS classes for enhanced customization" in the plugin settings (
Tools > Options > Rich Markdown).
You can easily change the colors or the police fonts by editing the :root pseudo-class in both files userchrome.css and userstyle.css. :root defines all color schemes variables used along the CSS files.
The themes also use by default the following police fonts: Fira Sans and Roboto Mono. Be sure that these are installed on your computer or change them by modifying --font-face and --font-mono in :root pseudo-class.
Some buttons are shown or hidden by default. You can browse userchrome.css to identify these elements and to hide/show them, by adding display: none !important; or by removing it respectively. Here are some examples of such tweaks.
By default, this icon is hidden. You can show it by comment or remove the following lines in userchrome.css:
/* Hide "All notes" icon */
i.icon-notes {
display: none !important;
}Add display: none; to .sidebar > div:last-of-type in userchrome.css, e.g.:
.sidebar > div:last-of-type {
display: none; /* Hide the synchronization area */
background-color: none !important;
}If you do not use any todo's with Joplin, you can hide this button by adding the following lines in userchrome.css:
div[height="50"] .new-todo-button {
display: none; /* Hide the button "New todo" */
}
