Ohmine Dark Theme
You should use this theme with the Joplin build-in dark theme:
Options > Appearance > Theme > Dark
Overview
Sticky Notes
Art Gallery
Abstract Content Bar
Text
Headings
Links
Blockquote
Lists
Checklist
Code Block
Math Notation
Printing Sample
https://drive.google.com/file/d/1O_MkblRKLwjfjkGFeVh8vR1cbhB6Rm9v/view?usp=sharing
userstyle.css
:root {
/* GROUP STYLING */
--base-font: "montserrat", "microsoft jhenghei light", avenir,
arial, sans-serif;
--base-font-size: 14px;
--code-font: "cascadia mono light", monospace,
"microsoft jhenghei light";
--headings-font-weight: 600;
--primary-text-color: #bdbdbd;
--primary-headings-color: #fff;
--primary-link-color: #cdd286;
--primary-headings-margin: 1em 0 0.8em 0;
}
/* BASIC ****************************************** */
body {
font-family: var(--base-font);
color: var(--primary-text-color);
font-size: var(--base-font-size);
background: #151b1a;
}
/* STYLING: HEADINGS ****************************** */
h1 {
padding: 0;
margin: var(--primary-headings-margin);
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent;
background: linear-gradient(
85deg,
#3bfff7,
#16d0c1,
#7cffcd,
#74dec8,
#74dec8,
#7cffcd,
#16d0c1,
#3bfff7
);
line-height: 1.2em;
font-variant: small-caps;
color: var(--primary-headings-color);
font-size: 2.3em;
font-weight: 700;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #396a5b;
}
h2::before {
content: " ";
display: inline-block;
width: .7em;
height: 0.8em;
padding: 0;
margin: 0 8px 0 0;
background: var(--primary-headings-color);
border-radius: 0.9em 2.9em 1.1em 3em;
}
h2 {
padding: 0;
margin: var(--primary-headings-margin);
color: var(--primary-headings-color);
font-size: 1.8em;
font-weight: var(--headings-font-weight);
border-width: 0 0 1px 0;
border-style: solid;
border-color: #949494;
}
h3 {
padding: 0;
margin: var(--primary-headings-margin);
color: var(--primary-headings-color);
font-size: 1.5em;
font-weight: var(--headings-font-weight);
}
h4,
h5,
h6 {
padding: 0;
margin: var(--primary-headings-margin);
color: var(--primary-headings-color);
font-size: 1.2em;
font-weight: var(--headings-font-weight);
}
/* STYLING: LINK ********************************* */
a {
color: var(--primary-link-color);
}
.resource-icon {
background: var(--primary-link-color);
}
/* STYLING: FOOTNOTE ***************************** */
.footnotes-sep {
display:none;
}
.footnotes:before {
content: "Footnotes";
display:inline-block;
width: 100%;
margin-top: 2em;
padding-top: 0.5em;
border-width: 3px 0 0 0;
border-style: double;
border-color: #8080807a;
}
#fn1,
#fn2,
#fn3 {
color: grey;
}
/* STYLING: TEXT ********************************* */
em,
strong {
color: #e7c297;
}
s {
color: #776857;
}
ins {
color: #ce8864;
}
mark::before,
mark::after {
content: " ";
display: inline-block;
width: 0.5em;
}
mark {
background: #d6b15f;
color: #000000;
border-radius: 9px;
}
abbr[title] {
color: #54d077;
font-weight: 500;
text-decoration: underline dotted;
}
/* STYLING: PARAGRAPH ****************************** */
p {
padding: 0 0 0 4px;
margin: 1em 0;
}
blockquote {
padding: 0 0 0 1.2em;
margin: 0;
color: #a2998f;
border-width: 0 0 0 5px;
border-style: dotted;
border-color: #fbce9a;
opacity: 1;
}
/* STYLING: CODE BLOCK | INLINE CODE **************** */
.hljs {
padding: 10px 20px;
margin: 25px 0 25px 0;
background: #101413;
color: var(--primary-text-color);
font-size: 13px;
border-width: 0 3px;
border-style: ridge;
border-color: #80f0ff;
border-radius: 10px;
box-shadow: 0 0 3px #a2f1e3;
}
code {
font-family: var(--code-font);
}
/* STYLING: MATH NOTATION *************************** */
span.katex-display {
color: #c5fffc;
font-size: 1.5em;
text-shadow: 0 0 3px #c5fffc;
}
/* STYLING: LISTS *********************************** */
div > ul,
div > ol {
margin: 20px 0 20px 25px;
}
li {
margin: 0.3em 0;
color: #5bb5a2;
}
input:checked {
/* checkbox checked color */
filter:hue-rotate(-50deg) brightness(140%);
}
/* STYLING: TABLE *********************************** */
table {
width:100%;
margin: 25px auto 25px auto;
}
/* STYLING: STICKY NOTES **************************** */
/* The sticky note-"IMPORTANT" is standalone, not included with this group styling */
note::after,
tip::after,
question::after,
explain::after,
warning::after,
keyword::after {
display: table;
width: 100;
padding: 0 10px 0;
margin: 8px 10px 0 0;
font-weight: 700;
text-shadow: 1px 1px 3px #000000;
border-radius: 4px 10px;
}
note,
tip,
question,
explain,
warning,
keyword {
display:block;
padding: 10px 20px 10px 20px;
margin: 15px 0;
background: linear-gradient(120deg, #0c0c0c, #232323, #0c0c0c);
color: #eaeaea;
border-width: 0px 2px;
border-style: solid;
border-color: #008c5c;
border-radius: 8px 20px;
box-shadow: 1px 1px 4px #148059;
}
/* STYLING: STICKY NOTE- NOTE */
note::after {
content: "NOTE";
background: #0065b3;
}
/* STYLING: STICKY NOTE- TIP */
tip::after {
content: "TIP";
background: #b7aa00;
}
/* STYLING: STICKY NOTE- QUESTION */
question::after {
content: "QUESTION";
background: #5a00b5;
}
/* STYLING: STICKY NOTE- EXPLAIN */
explain::after {
content: "EXPLAIN";
background: #00bf88;
}
/* STYLING: STICKY NOTE- WARNING */
warning::after {
content: "WARNING";
background: #c30000;
}
/* STYLING: STICKY NOTE- KEYWORD */
keyword::after {
content: "KEYWORD";
background: #c10074;
}
/* STYLING: STICKY NOTE- IMPORTANT */
important::before {
content: "IMPORTANT";
display: block;
width: 100%;
padding: 0;
margin: 0px 0 10px 0;
background: #3c0000;
color: red;
font-weight: 700;
text-align: center;
border-width: 1px 0 1px 0;
border-style: solid;
border-color: red;
border-radius: 8px;
}
important {
display:block;
padding: 1em;
margin: 1em 2em;
background: #edad0b0d;
color: #e8c399;
font-weight: 500;
border-width: 0px 2px;
border-style: solid;
border-color: #ff0000;
border-radius: 8px 20px;
box-shadow: 0 0 5px red;
}
/* STYLING: ART GALLERY ***************************** */
ag2,
ag3,
ag4,
ag5,
ag6 {
display: inline-flex;
flex-wrap: wrap;
max-height: 60vh;
margin: 25px 0;
align-items: center;
justify-content: center;
overflow-y: scroll;
}
ag2 img,
ag3 img,
ag4 img,
ag5 img,
ag6 img {
padding: 5px;
}
ag2 img {
max-width: calc(100% / 2.1);
}
ag3 img {
max-width: calc(100% / 3.2);
}
ag4 img {
max-width: calc(100% / 4.4);
}
ag5 img {
max-width: calc(100% / 5.6);
}
ag6 img {
max-width: calc(100% / 6.8);
}
/* STYLING: PRINTING ********************************* */
@media print {
/* "AVOID" PRINTING: | sticky notes | */
note:after,
tip:after,
question:after,
explain:after,
warning:after,
keyword:after,
important:after,
note,
tip,
question,
explain,
warning,
keyword,
important {
display: none; /* replace this line of codes by "display: block;" for print out the sticky notes */
}
/* RELEASE ART GALLERY OVERFLOW */
ag2,
ag3,
ag4,
ag5,
ag6 {
max-height:none;
overflow-y:unset;
}
/* ADJUSTMENTS: | SIZE | COLOR | */
body {
color:#4c4c4c;
font-size: 12px;
}
h2::before {
box-shadow: inset 0 0 0 1000px #00000075; /* repleace this line of codes with "display:none;" if you don't want to print out the heading icon */
}
h1 {
-webkit-text-fill-color: initial;
-webkit-background-clip: initial;
color: #00000075;
font-size: 22px;
font-weight: 700;
border-bottom: none;
}
h2 {
color: #00000075;
font-size: 18px;
}
h3 {
color: #00000075;
font-size: 14px;
}
h4,
h5,
h6 {
color: #00000075;
font-size: 12px;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
.hljs,
blockquote {
margin: 10px 0;
}
div > ul,
div > ol {
margin: 10px 0 10px 25px;
}
mark::before,
mark::after {
width:3px;
}
mark {
font-weight: 500;
border-top: 1px solid #0000009e;
border-bottom: 1px solid #0000009e;
border-radius: 4px;
}
table {
margin: 10px auto;
}
.hljs {
padding: 10px 20px;
background: none;
border-color: #0000009e;
font-size: 10px;
white-space: pre-wrap;
box-shadow: none;
}
span.katex-display {
color: #7d7d7d;
font-size: 12px;
text-shadow: none;
}
note::after,
tip::after,
question::after,
explain::after,
warning::after,
keyword::after {
color: #00000075;
border: 1px solid #7b7b7b;
text-shadow: none;
}
note,
tip,
question,
explain,
warning,
keyword {
color: #4c4c4c;
border: 1px solid #7b7b7b;
box-shadow: none;
}
}
userchrome.css
/* ------------------------ */
/* STYLING: MARKDOWN EDITOR */
/* ------------------------ */
/* basic **************************************** */
.CodeMirror:not(.cm-tag) * {
font-family: "montserrat", "microsoft Jhenghei light", avenir, arial, sans-serif !important;
color: #bdbdbd;
font-size: 14px;
}
.resizableLayoutItem.rli-root {
background-color: #151b1a;
}
.codeMirrorEditor {
background-color: #151b1a !important;
}
/* headings ************************************* */
.cm-header {
color: #bdbdbd !important;
font-weight: 600;
}
.cm-header-1 {
font-size: 2.3em !important;
font-variant: small-caps;
}
.cm-header-2 {
font-size: 1.8em !important;
}
.cm-header-3 {
font-size: 1.5em !important;
}
.cm-header-4,
.cm-header-5,
.cm-header-6 {
font-size: 1.2em !important;
}
span.cm-rm-link,
a.cm-link-text:noot(.cm-rm-image) {
color: #cdd286 !important;
}
/* code block ************************************ */
div.CodeMirror div.cm-jn-code-block {
background: #101413 !important;
}
/* code block text ******************************* */
div.CodeMirror span.cm-comment:not(.cm-jn-inline-code) {
color: #bdbdbd !important;
}
/* abstract content bar ************************** */
span[role="presentation"]::after,
span.cm-header::after,
span.cm-overlay.cm-rm-link::after,
span.cm-link-text::after,
span.cm-overlay.cm-rm-link.cm-rm-image::after,
div.cm-rm-code-block pre.CodeMirror-line span::after,
div.CodeMirror span.cm-comment:not(.cm-jn-inline-code)::after,
span.cm-tag.cm-bracket::after,
.cm-katex-marker-open::after,
.cm-katex-marker-close::after,
span.cm-variable-2.cm-rm-list-token::after,
span.cm-variable-3.cm-rm-list-token::after,
span.cm-keyword.cm-rm-list-token::after,
.cm-rm-checkbox::after,
span[cm-text]:only-child::after {
content: "";
display: inline-block;
width: 2px;
height: 100%;
position: absolute;
top: 0;
right: 0;
}
/* plain text */
span[role="presentation"]::after {
background: #383838;
z-index: 1;
}
/* headings */
span.cm-header::after {
background: #ffffff6e;
z-index: 2;
}
/* web link & file path link */
span.cm-overlay.cm-rm-link::after {
background: #cdd286;
z-index: 3;
}
/* footnote */
span.cm-link-text::after {
background: #5a5800;
z-index: 4;
}
/* abbreviation */
span.cm-em.cm-link-text::after {
background: #da8d00;
z-index: 5;
}
/* attached image */
span.cm-overlay.cm-rm-link.cm-rm-image::after {
background: #008e156e;
z-index: 5;
}
/* code block */
div.cm-rm-code-block pre.CodeMirror-line span::after,
div.CodeMirror span.cm-comment:not(.cm-jn-inline-code)::after {
background: #101413;
z-index: 10;
}
/* html tag */
span.cm-tag.cm-bracket::after {
background: #ff0063;
z-index: 6;
}
/* math notaion */
.cm-katex-marker-open::after,
.cm-katex-marker-close::after {
background: #5aa5fb;
z-index: 7;
}
/* ordered list & unordered list */
span.cm-variable-2.cm-rm-list-token::after,
span.cm-variable-3.cm-rm-list-token::after,
span.cm-keyword.cm-rm-list-token::after {
background: #b11da9;
z-index: 8;
}
/* checklist */
.cm-rm-checkbox::after {
background: #5d00ff;
z-index: 9;
}
/* blank line: release the below codes will showing the blank line on the abstract content bar */
/* span[cm-text]:only-child::after {
background:#151b1a;
z-index:10;
} */
/* ------------------------ */
/* STYLING: JOPLIN UI */
/* ------------------------ */
/* STYLING: NOTEBOOKS PANEL ********************** */
.sidebar {
background-color: #191919 !important;
border-radius: 0 0 7px 7px;
box-shadow: 0 0 2px #33524a;
}
/* hiding the "All Notes" link */
.all-notes {
display: none !important;
}
/* directory icon */
i.fas.fa-caret-down,
i.fas.fa-caret-right {
text-shadow: 0 0 5px #dedede;
opacity: 1 !important;
}
i.fas.fa-caret-right {
color: #f6ff67;
}
i.fas.fa-caret-down {
color: #71ffc4;
}
/* notebook hover state */
.list-item-depth-0,
.list-item-depth-1,
.list-item-depth-2,
.list-item-depth-3,
.list-item-depth-4,
.list-item-depth-5,
.list-item-depth-6,
.list-item-depth-7,
.list-item-depth-8,
.list-item-depth-9,
.list-item-depth-10,
.list-item-depth-0:hover,
.list-item-depth-1:hover,
.list-item-depth-2:hover,
.list-item-depth-3:hover,
.list-item-depth-4:hover,
.list-item-depth-5:hover,
.list-item-depth-6:hover,
.list-item-depth-7:hover,
.list-item-depth-8:hover,
.list-item-depth-9:hover,
.list-item-depth-10:hover {
height: fit-content !important;
border-radius: 5px 10px;
}
.list-item-depth-0:hover,
.list-item-depth-1:hover,
.list-item-depth-2:hover,
.list-item-depth-3:hover,
.list-item-depth-4:hover,
.list-item-depth-5:hover,
.list-item-depth-6:hover,
.list-item-depth-7:hover,
.list-item-depth-8:hover,
.list-item-depth-9:hover,
.list-item-depth-10:hover {
filter: hue-rotate(180deg);
}
/* notebooks selected state */
.list-item-depth-0.selected,
.list-item-depth-1.selected,
.list-item-depth-2.selected,
.list-item-depth-3.selected,
.list-item-depth-4.selected,
.list-item-depth-5.selected,
.list-item-depth-6.selected,
.list-item-depth-7.selected,
.list-item-depth-8.selected,
.list-item-depth-9.selected,
.list-item-depth-10.selected {
background: linear-gradient(60deg, #002f24, #00926a);
box-shadow: 0 0 3px #72fdbd;
}
/* notebook title indentation */
.list-item-depth-0 {
padding-left: 11px !important;
}
.list-item-depth-1 {
padding-left: 22px !important;
}
.list-item-depth-2 {
padding-left: 33px !important;
}
.list-item-depth-3 {
padding-left: 44px !important;
}
.list-item-depth-4 {
padding-left: 55px !important;
}
.list-item-depth-5 {
padding-left: 66px !important;
}
.list-item-depth-6 {
padding-left: 77px !important;
}
.list-item-depth-7 {
padding-left: 88px !important;
}
.list-item-depth-8 {
padding-left: 99px !important;
}
.list-item-depth-9 {
padding-left: 110px !important;
}
.list-item-depth-10 {
padding-left: 121px !important;
}
/* set limit to the length of notebook title */
div.list-item-container a.list-item {
padding: 4px 0;
margin: 1px auto;
max-width: 95%;
border-width: 0 0 2px 0;
border-style: dotted;
border-color: #ffffff14;
}
/* notebook title wrap text */
.list-item-depth-0 span.title,
.list-item-depth-1 span.title,
.list-item-depth-2 span.title,
.list-item-depth-3 span.title,
.list-item-depth-4 span.title,
.list-item-depth-5 span.title,
.list-item-depth-6 span.title,
.list-item-depth-7 span.title,
.list-item-depth-8 span.title,
.list-item-depth-9 span.title,
.list-item-depth-10 span.title {
color: #e2e2e2;
max-width: 80%;
white-space: normal;
overflow-wrap: break-word;
}
/* note count label */
.note-count-label {
display: block;
margin: 0 0 0 auto;
position: sticky;
right: 2px;
background: #4affff24;
font-size: 10px;
text-align: center;
border: 1px solid #ffffff1f;
border-radius: 8px;
opacity: 0.8 !important;
}
.note-count-label::after {
content: "";
display: inline-block;
width: 8px;
}
/* tag-related notebook navigation button */
.kAMSfD {
position: absolute;
top: 6px;
right: 280px;
background: #00926a !important;
border-radius: 5px 10px !important;
}
.kAMSfD:hover {
filter: hue-rotate(180deg);
}
.icon-notebooks,
.icon-notebooks ~ span {
color: white !important;
}
/* synchronize information */
.sc-fzoxKX {
color: #02ffd0 !important;
}
/* synchronize btn */
.hEuwIc,
.hEuwIc:hover {
background-color: #313131 !important;
border: none !important;
border-radius: 1em !important;
}
.hEuwIc:hover {
filter: brightness(150%);
}
/* STYLING: NOTE LIST PANEL ********************** */
.sc-fzqAui {
box-shadow: 0 0 2px #33524a;
border-radius: 7px;
}
/* note list panel header */
.sc-fznLPX {
background-color: #191919 !important;
}
/* search icon & new todo btn & new note btn */
.icon-search:before,
.fa-check-square:before,
.icon-note:before {
color: #f5f5f5;
}
button[title="New to-do"],
button[title="New note"],
button[title="New to-do"]:hover,
button[title="New note"]:hover {
background: #00926a;
border-radius: 5px 10px;
}
button[title="New to-do"]:hover,
button[title="New note"]:hover {
filter: hue-rotate(180deg);
}
/* note list panel body */
.cLdGCO {
background: #191919 !important;
border: none !important;
border-radius: 0 0 7px 7px !important;
}
.note-list {
padding: 3px 7px 0 0;
}
/* note list selected state */
.selected.note-list-item {
margin: 3px;
background: linear-gradient(60deg, #002f24, #00926a);
border-radius: 6px 15px;
box-shadow: 0 0 5px #72fdbd;
}
/* note list hover state */
.note-list-item:hover {
border-radius: 6px 15px;
filter: hue-rotate(180deg);
}
.note-list-item:not(.selected):hover {
background: #15283c;
}
/* STYLING: EDITOR HEADER ************************ */
/* editor header */
.sc-fzoXzr.kYItFT {
background: #151b1a;
}
/* note title input bar */
input.title-input {
padding: 0 140px 0 20px !important;
background: #151b1a !important;
}
/* time label */
span.updated-time-label::after {
content: "";
display: inline-block;
width: 16px;
}
/* header toolbar */
.updated-time-label ~ .editor-toolbar {
background: #151b1a !important;
box-shadow: none;
}
/* STYLING: MAIN EDITOR TOOLBAR ****************** */
/* main toolbar */
.editor-toolbar {
margin: 0 0 0 -12px;
background: #191919 !important;
border-radius: 1em;
box-shadow: 0 0 2px #33524a;
}