Plugin: 🎊 ReMoods Theme [NO LONGER MAINTAINED]

Thanks for the reply! Let me try to install the font(s) :slight_smile:

1 Like

You are welcome :slightly_smiling_face: Have to sleep now. 5am my time.

Thanks for all your pull requests for my documentation, it's a great help! I always doubts about my english expressions.

2 Likes

Happy to help with the pull requests :slight_smile:

Quick question, after installing, do we set the fonts under Tools > Options > Appearance? I set the fonts as seen below but they don't seem to be changing anything even after restarting the app:

image

I am probably just missing a step to enable them.

Use external css:

Editing theme color and don't related settings

Thanks! I was able to increase the overall size of the text. Unfortunately though this doesn't solve the problem of the text inside the code blocks being too small proportionally to the size of the text in the note.

Is there a way to just increase the size of the text inside the code block using the css? Thanks!

In the external CSS, the below line is related to the code block fonts size, but it would also including some of the markdown syntax like image links, footnote reference, table syntax, HTML, etc.

--usp-smaller-monospace-font-size: 86% !important;
1 Like

That's perfect! I set it from 86% to 100% and the code block text is much more readable.

One strange thing I noticed while editing was the Horizontal Rule displays oddly in the Markdown Editor. It displays both the Horizontal Rule and the *** after it:

image

Without the theme applied, it generally renders as such (only the three ***):

image

I thought this might be a bug since I think it should only be showing the three ***?

Actually, it will break the whole reading experience of the notes, for an alternative, you can editing only for the code block font size:

add the below codes to the bottom of your userchrome.css

.CodeMirror-lines .CodeMirror-line.cm-jn-code-block .cm-jn-monospace { 
   font-size: 14px !important; 
 }

It is for emphasizing the horizontal line, and you can turn it off by disabling Enable evident horizontal line through the ReMoods setting page.

1 Like

Thanks, I updated the userchrome.css as below however it doesn't seem to be updating the font size of the text inside the code blocks. Maybe I'm missing something?

/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */

:root {
  /* For markdown editor */
  --usp-remoods-hue: 213deg !important; /* The theme color hue setting, must include "deg" after the numbers which between 0 to 360. */
  --usp-base-font: "montserrat","chiron hei hk text extralight" !important;
  --usp-monospace-font: "cascadia mono light", "chiron hei hk text extralight" !important;
  --usp-base-font-size: 14px !important;
  --usp-smaller-monospace-font-size: 86% !important;
}

/* Avoid white background when starting Joplin */
body {
  background-color: hsl(var(--usp-remoods-hue),  8%,  27%) !important;
}

.CodeMirror-lines .CodeMirror-line.cm-jn-code-block .cm-jn-monospace { 
   font-size: 30px !important; 
 }
 

Try to add the #react-root in front of it like below

#react-root .CodeMirror-lines .CodeMirror-line.cm-jn-code-block .cm-jn-monospace {
•••
}

Unfortunately no change with:

#react-root .CodeMirror-lines .CodeMirror-line.cm-jn-code-block .cm-jn-monospace { 
   font-size: 30px !important; 
}

Did you restart Joplin?

I did.

Woops, I think I should test it myself in later time. You can remove it first, and I reply you when I get back to my laptop.

1 Like

Sounds great thanks so much!

Hey @joplin_user, I've just tested it for you. The below code will works for you:

.CodeMirror-lines .CodeMirror-line.cm-jn-code-block > * {
  font-size: 30px !important;
}

Hey @Sinacs, thanks for following up. I added your stanza to userchrome.css at the bottom of the file however it doesn't seem to be changing the size of the text in the code block. Is it working for you? Maybe my stanza is incorrect?

/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */

:root {
  /* For markdown editor */
  --usp-remoods-hue: 213deg !important; /* The theme color hue setting, must include "deg" after the numbers which between 0 to 360. */
  --usp-base-font: "montserrat","chiron hei hk text extralight" !important;
  --usp-monospace-font: "cascadia mono light", "chiron hei hk text extralight" !important;
  --usp-base-font-size: 14px !important;
  --usp-smaller-monospace-font-size: 86% !important;
}

/* Avoid white background when starting Joplin */
body {
  background-color: hsl(var(--usp-remoods-hue),  8%,  27%) !important;
}

.CodeMirror-lines .CodeMirror-line.cm-jn-code-block > * {
  font-size: 30px !important;
}

One minor update: I found that the font size is updating, but for the Markdown editor only: