Plugin: 🎨 macOS theme for Joplin

Plugins
15

I had previously done some work to customize the Rich Markdown Plugin. With this release I went ahead and integrated that code to use the same CSS variables as yours (as best as I could) to make it look more seamless. Including since it might be useful to anyone using that plugin.

Code + Screenshots Note: to use this, you need to install the Rich Markdown Plugin AND enable "Add additional CSS classes for enhanced customization" in preferences

Screen Shot 2021-07-22 at 15.23.49
Screen Shot 2021-07-22 at 15.23.49877×926 50.1 KB

Screen Shot 2021-07-22 at 15.22.40
Screen Shot 2021-07-22 at 15.22.40915×989 61.8 KB 


.codeMirrorEditor .CodeMirror *{
    /*setting the font to the system font of theme*/
    font-family: var(--g-font-family-system) !important;
    line-height: var(--g-line-height-2);
    font-size: var(--g-font-size-1);

}
.codeMirrorEditor .CodeMirror * .cm-rm-monospace, .codeMirrorEditor .CodeMirror *  .cm-jn-monospace{{
    /*setting the font to the system font of theme*/
    font-family: var(--g-font-family-mono) !important;
}

.CodeMirror-sizer, iframe.noteTextViewer {
    /*centers and keeps the max text width easier to read*/
    margin-right: auto !important;
    margin-left: auto !important;
    max-width: 80ch !important;
    line-height: 1.6em !important;
}

.cm-rm-hr {
    /*makes a `---` look like a line, but leaves the actual text for easier editing*/
    border-top: 1px solid var(--g-separatorColor);
    color: var(--g-separatorColor) !important;
    display: block;
    line-height: 1px !important;
    width: 100%;
}

.cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6 {
    /*changes header text color*/
    color: var(--g-headerTextColor) !important;
}

/*changes header sizes*/
.cm-header-1 {
    font-size: var(--g-font-size-4);
    line-height: var(--g-line-height-5);

}

.cm-header-2 {
    font-size: var(--g-font-size-3);
    line-height: var(--g-line-height-4);

}


.cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6 {
    font-size: var(--g-font-size-2);
    line-height: var(--g-line-height-3);

}

.cm-header.cm-rm-header-token {
    /*makes the markdown #, ##, ###, etc less noticable*/
    color: var(--g-unemphasizedSelectedTextBackgroundColor)  !important;
    font-size: 70% !important;
    margin-left: -50px;
    max-width: 50px;
    width: 50px;
    overflow: hidden;
    display: inline-block;
    text-align: right;
    line-height: 1.3em;
}

.cm-variable-2, .cm-variable-3, .cm-variable-4, .cm-variable-5, .cm-variable-6, .cm-s-default .cm-keyword,.cm-keyword,  .cm-variable-2 {
    /*changes list color*/
    color: var(--g-textColor) !important;
}

.cm-rm-list-token, .cm-variable-2.cm-rm-list-token, .cm-variable-3.cm-rm-list-token, .cm-variable-4.cm-rm-list-token, .cm-variable-5.cm-rm-list-token, .cm-variable-6.cm-rm-list-token, .cm-rm-strong-token, .cm-rm-em-token {
    /*makes markdown-specific things fade back, i.e. _ and ** in bold and italic*/
    color: var(--g-unemphasizedSelectedTextBackgroundColor) !important;
}


.cm-header.cm-rm-header-token:after {
    /*this adds space between the markdown ## and the header*/
    content: '--' !important;
    color: transparent;
}


.cm-comment, .cm-jn-monospace {
    /*affects the inline code & block color*/
    color: var(--g-secondaryLabelColor) !important;
}

.cm-rm-checkbox.cm-rm-monospace {
    /*changes the checkbox color*/
    background: transparent;
    color: var(--g-systemBlue) !important;
}

span.cm-rm-link, .cm-variable-2.cm-rm-link, .cm-variable-3.cm-rm-link, .cm-variable-4.cm-rm-link, .cm-variable-5.cm-rm-link, .cm-variable-6.cm-rm-link, span.cm-url, .cm-variable-2.cm-url, .cm-variable-3.cm-url, .cm-variable-4.cm-url, .cm-variable-5.cm-url, .cm-variable-6.cm-url {
    /*changes links*/
    color: var(--g-linkColor) !important;
    cursor: pointer;
}

.CodeMirror-activeline-background {
    /* this is hiding the highlighting of your currently selected line*/
    background: transparent !important;
}


/*Hide URLs https://discourse.joplinapp.org/t/plugin-rich-markdown/15053/140? */
div:not(.CodeMirror-activeline)>.CodeMirror-line .cm-string.cm-url:not(.cm-formatting) {
    font-size: 0;
}

div:not(.CodeMirror-activeline)>.CodeMirror-line .cm-string.cm-url:not(.cm-formatting)::after {
    content: '';
    font-size: 1rem;
}

span.cm-rm-checkbox.cm-property + span.cm-rm-checkbox ~ span.cm-rm-checkbox, span.cm-rm-checkbox.cm-property + span.cm-rm-checkbox, span.cm-rm-checkbox.cm-property, span.cm-rm-checkbox.cm-property + span.cm-rm-link  {
    /*puts a strikethrough on completed checklist items*/
    text-decoration: line-through;
    opacity: 0.5;
}

.cm-variable-2.cm-overlay.cm-rm-list-token.cm-overlay.cm-rm-em-token {
    /*make markdown tokens for list into dots*/
    color: transparent !important;
    background-color: var(--g-unemphasizedSelectedTextBackgroundColor) !important;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: bottom;
    margin: 0 8px 8px 0;
}

fyi @CalebJohn in case you're interested

4 Likes