Plugin themingπŸ”—


Plugins add custom content to the UI using
webview panels.
The HTML content of a a panel is styled with CSS.

To keep the look and feel of a plugin consistent with the rest of the Joplin UI,
you are automatically provided with variables derived from the current theme.

Variables follow the naming convention --joplin-{property} and are used
in your plugin's stylesheet as shown here.

/* webview.css */
.container {
	color: var(--joplin-color);
	font-family: var(--joplin-font-family);


In addition to variables, you have access to a set of standard font assets that ship with Joplin.
These include:

To display an icon, use CSS and HTML like the following.

/* style icons to match the theme */
.toolbarIcon {
    font-size: var(--joplin-toolbar-icon-size);
.primary {
    color: var(--joplin-color);
.secondary {
    color: var(--joplin-color-2);
<i class="toolbarIcon primary fas fa-music"></i> Font Awesome music icon
<br />
<i class="toolbarIcon secondary icon-notebooks"></i> icoMoon notebook icon