Share your CSS

update.
I found solution.

a.list-item,
span.title,
span.tag-label,
span, a
{
/* a.list-item = All notes, span.title=Notebook names, span.tag-label=Tag names */
font-size: 20px;
font-family: tahoma !important;
}

work pretty good. just 1 problem.
I add this line "span, a" and its not effective on Hebrew note name.

a.list-item,
span.title,
span.tag-label,
span, a
{
/* a.list-item = All notes, span.title=Notebook names, span.tag-label=Tag names */
font-size: 20px;
font-family: tahoma
}

if I make the change in develop tool its work.

Adding span, a means span elements and a elements and from looking at the screen shot the note list name is being set by the div element where it shows div, span, a.

Anyway, if you want to change the note titles as well (which is different from your original question) try:

a.list-item,
span.title,
span.tag-label,
div.note-list-item span {
     /* a.list-item = All notes, span.title=Notebook names, span.tag-label=Tag names, div.note-list-item span=Note titles*/
     font-size: 20px;
     font-family: tahoma !important;
}

EDIT = Used new class name in css to make it a bit more tidy.

1 Like

Thanks.
work very well!

any way to detect Hebrew language and make it RTL direction? or its not part of CSS commends?

I believe that lack of RTL is due to the Markdown renderer itself. This is from a previous post that talks about RTL languages.

Search this forum and GitHub for RTL in case there is anything that may help.

However I did see:

where a poster states that adding:

#rendered-md p {
    unicode-bidi: plaintext;
}

To userstyle.css may help with rendering RTL languages. I have not been able to test it.

1 Like

Anyone know why the third level of lists is .cm-keyword? Seems odd.

Custom ordering for notebooks! Ish...

Definitely not a 10min horrible hack...(sorry if anyone has already done this, I can't find it or maybe people just have too much pride to do this).
Basically from what I understand the Notebooks in the sidebar cannot be ordered. However, that doesn't mean I can't do a horrible workaround, probably with endless caveats and limitations that I'm not even aware of.
Just prefix a letter or number on your notebook name. Sorted. The CSS then makes it invisible but normal sorting logic obvious still applies.
I only really want it for top level (or maybe second level if I can be bothered) sorting but no reason you can't go all the way down through the depths providing you don't have too many notebooks per level (0-9, a-z. Not sure where punctuation or other weird characters would fit).
Obviously this isn't going to work any wonders on mobile. Or on web clipper. And some plugin stuff will probably look weird with the extra letter thrown on the front. And probably a million other problems because all this does is make the first letter see through... If anyone can make it less hacky then have at it.

CSS on:
image

CSS off:
image

CSS on just for depth-0:
image


.list-item-depth-0 .title::first-letter{
    color: transparent !important; 
}

.list-item-depth-1 .title::first-letter{
    color: transparent !important; 
}

/* Uncomment for more depths
.list-item-depth-2 .title::first-letter{
    color: transparent !important; 
}

.list-item-depth-3 .title::first-letter{
    color: transparent !important; 
}
*/

Also works for tags:
image


.tag-label::first-letter {
    color: transparent !important;
}
7 Likes

This took me a while to figure out, so I'll share it with you guys. I love using the VIM mode of Joplin but I am not a fan of blinking cursors (too distracting), and wasn't liking the default vim-cursor color. I also figured out how to color the active line:

/* Disable cursor blinking */
div.CodeMirror-cursors {
    visibility: visible !important;
}
/* Cursor color (VIM) */
.cm-fat-cursor .CodeMirror-cursor {
    background: red;
}
/* Make cursor still visible while in visual mode */
.cm-animate-fat-cursor {
    -webkit-animation: none;
    background-color: red !important;
}
/* Active line background */
.CodeMirror-activeline {
    background: #1e1f29;
}

joplin

Edit: to make cursor change color based on focus:

/* Cursor color (unfocused) */
.cm-fat-cursor .CodeMirror-cursor {
    background: grey;
}
/* Cursor color (focused) */
.CodeMirror-focused .CodeMirror-cursor {
    background: red;
}
1 Like

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;
}

9 Likes

At first I was like I hate the colour, font but I was intrigued so I gave it a try.... now I am contemplating if I should keep it cause it looks really really beautiful I am getting FF7 vibes.

Really great work the level of detail is amazing.

May I ask how do I get the stick notes?

3 Likes

Wow, thx for your comment!
I understand that it is still need more improvement, if you have any suggestion just let me know, I'll keep follow up.

About the sticky notes, you just need to use it like below:

And about the Art Gallery:

thank you sorry I did not realize I had to use the tag that's neat. I thought those were some kind of admonitions so I was trying !!! note.

I just spend a couple of minutes looking through my notes and here are just two things I have noticed so far I prefer having a different colour for the headings in table but that's personal preference and quickly fixed it.

The other I like to use emojis to tag some notes and then use note overview to quickly view status of documents but the icons are getting smudged sort of haven't figured out how to fix this yet Included screenshot image would rather it appeared in the normal colour like this image

1 Like

Um... I think that !!! note command can only works when this a plugin, CSS seems cannot doing like this. I'm already try my best to make it as easy as I can. In my first sketch it is needed to use like this:

<p class="note">
tag info
</p>

This is horrible, right!? hah

And yes, I agree with you about the table title color, I will update it in the next version.

Can you show me the exact position of the approved icon? I'm not so sure.

It''s an H1 heading. In the mark up editor it looks like this in the viewer the icons are colored

image

It's looks like there doesn't have a css selector that let me to select the emoji directly. I have the only one idea in this moment:

You may add the below codes to you userstyle.css right in the heading session is ok.

span {
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
}

But the problem is, you may use the emoji on the h1 heading like below:

# Approve <span>:smile:</span>

You will need a tag to separate the emoji.

1 Like

The Ohmine Dark Theme has released the latest updates and already posted on the Github page

  • New: Add Eye-Protector to protect your eyes from bright color images
  • New: Add "span" tag style in the h1 heading to avoiding background-clip effects the span content
  • New: Add new H5 & H6 heading style for better content separated experience, it would be useful for a long article writer
  • New: Abstract Content Bar can now identify the Markdown Table content
  • New: Add Tag-bar styling
  • New: Add tag manager modal dialog styling
  • New: Add option page styling
  • New: Add Color Controller in the "root:" section of "userstyle.css", make it easy to centrally control all of the color values
  • New: Add Print Switcher in the "root:" section of "userstyle.css", optional print out note title and sticky notes. (default: hide sticky notes)
  • Update: Rearrange the priority of Abstract Content Bar color defines
  • Update: Improve read & write experience, recolored and resized a few elements
  • Update: Improve printing color & margin
  • Fix: The "Ok" and "Apply" buttons of the Options page are position wrong
  • Fix: HTML close tag doesn't show on the Abstract Content Bar when using the "Quick HTML tag" plugin to create the tag
  • Fix: Sup-list margin wrong
3 Likes

If anyone is using this theme, I recommend you use this latest update version. This version has rewritten big apart of codes to make sure everything works fine.

Github Page - Ohmine-Dark-theme-for-Joplin

(2-OCT-2021 tested on Joplin v2.4.9)

  • New: markdown editor is now using monospace fonts for all markdown syntax and non-monospace fonts for content
  • New: add markdown editor styling - reduce visual clutter caused by complicated note content
  • New: add blockquote to Abstract content bar
  • New: add Color Controller section to the userchrome.css
  • Update: rewrite all CSS structure & all selectors
  • Update: small visuals improvements on render viewer
  • Fix: some CSS effects lost when switching between markdown editor and rich text editor
  • Fix: footnote style dose not effects on all footnote items
  • Fix: the math formula does not show the right color on Abstract content bar
  • Fix: some of the print color setting properties are invalid
  • Fix: code block overflow text not hidden in the rich text editor
5 Likes

Hi @dpoulton (and @uxamanda),

Do you think it would be possible to have the Joplin icon (J before link) in different colors for notes and todo (and how)? For example classic blue for notes and red for todo :thinking:

@bepolymathe

I have had a quick look at a note with internal links to both a note and a to-do. It looks like the format for both is identical. This makes sense as basically they are both just notes. Without a way to tell them apart I cannot see a way of treating the links differently using just CSS.

2 Likes

Thank you for watching. That's what I thought too. That said it's a problem because the search filters and other features distinguish between the two. When you use backlinks a lot (which I do), it would be very useful to be able to distinguish between them. :thinking:

Github page - Ohmine-Dark-Theme-For-Joplin-v1.21

v1.14 ~ v1.21 (4-OCT to 10-OCT tested on Joplin v2.4.9)

  • New: Add Custom Title Block - to create a custom information for readers
  • New: Add span tag styling in a list - to stand out the reference details
  • New: Add Custom Title Block and Span tag color properties to Color Controller of both userchrome.css and userstyle.css
  • New: Add search text styling on both Markdown Editor and Render Viewer - to reduce the confusion between search results and content
  • New: Add Search text color properties to the Color Controller of both userchrome.css and userstyle.css

v1.16

  • New: Add link href on printing - it's mainly for anchor text link but will affects to all links
  • New: Add --print-link-href in to the Print Switcher section of userstyle.css

v1.14

  • Fix: code block text selection highlight effect missing
  • Fix: image alt text is treated as emphasize text when it names is including an underscore
2 Likes