CSS theme - Ohmine Dark Theme v3

OhmineDT is a Joplin external CSS theme and and aims to provide you a better Markdown note-taking experience!

Github Repository of OhmineDT

Let's see what's OhmineDT brings you:

  • 20 useful custom elements to improve your Joplin note-taking experience
  • 35 useful switchers for quick customizing the theme
  • No more messy markdown table syntax
  • Well paragraph separation layout brings you the best screen reading experience
  • Split out the Non-Monospace and Monospace fonts for easily identifying the main content.
  • Eye-protector to protect your eyes from bright colors
  • Including additional styles for helpful plugins
  • Well formatting of exported PDF and HTML
  • A magical background color #151b1a that make you quickly jump into a deep focus state
  • Easy to customize whatever elements and colors of Joplin
  • And more...

Let me know if you have any ideas, requests, questions, or complaints about this theme. I'll never reject improving this theme cause I'm one of the users like you.

10 Likes

Hi @Nacandev

Is there any chance that the theme will be rendered in the PDF export? Any tips for that?

Sure, you can just right click your note on the note list panel and then export PDF. I've already attached a printing sample on my Github page.

1 Like

v1.27 (16-OCT-2021 tested on Joplin v2.4.12)

  • New: main toolbar styling for rich text editor
  • New: add main toolbar color properties to the color controller section of userchrome.css
  • New: add plugin cards styling for search results
  • Fix: note count label style is abnormal
  • Fix: notebook panel list & notelist panel list styling
  • Change: a few color adjustments

Thank you for creating the Ohmine Theme, it is amazing and I intend to use it in Joplin going forward.

Two things - I am not very .css literate, and would like to make the sticky notes visible, but could not determine what needs to be changed in the .css. Any chance you could provide the details?

Also, I started creating a test for my class in Joplin, but the exported PDF of the rendered output

  • the printing was very light
  • the printed font was very small
  • the ctb box titles were not colored

Is there way to increase the printed text size, as well as make the printing darker?

The only color in the document was in a code box.

It would be great if there was a way to print the rendered document with all the colors visible on the monitor, except for the dark background color.

Cheers.

1 Like

I'm sorry about the bad experience of printing. Due to I can only test on my printer, so I don't know what exactly the printing results are on another printer.

First, please make sure you are using the latest version of OhmineDT - v1.27

You can get it on my Github Repo

To print out the sticky notes:

  1. preference > Appearance > Custom stylesheet for rendered Markdown to open the userstyles.css file. All codes in this file are for the styling of Render Viewer and Printing.
  2. You can see line 17, this line of code can control the sticky note is display on printing or not.
  3. You can just follow the description on the right-hand side to change the CSS value, then it will work immediately after you quit & restart Joplin.

When you have done, it will look like below:

--print-sticky-notes-display: block; /* change the "none;" value to "block;" to show all of the sticky notes on printing */

It's not that hard right? So, we are now going to the next step.

To control all the printing colors, you will be required the basic knowledge of HEX color. If you do know it, you are able to control all of the color values within this theme easily.

  1. In the same CSS file, the line 136 to 170 is all the printing color values
  2. For example --print-note-title: this is a name that let you identify what it is
  3. Then, #a7a7a7 is the color value
  4. And last, please don't forget to add a ; behind the value, otherwise it won't work

If you can do it yourself, you can change whatever color you want to print out.

Thank you for your feedback, let me know whenever you are get stuck with using this theme.

P.S. I'll update the printing color within the coming two days, but I would just turn all the colors to go darker. Before I release the update, you can just try to do it yourself, and I hope you will enjoy the time to build your own color style with CSS.

1 Like

Hi @bepolymathe, did you have the same problem on printing?

  • font too small
  • color too light
  • some elements can't see after print out.

Thank you for the terrific theme. But one thing I'm missing is the button to see "All notes" that used to be there right under the "Notebooks" button. How can I get that back again? Or is there some other way to see that?

You can find it on the line 12 of userchrome.css (OhmineDT - v1.27)


--hide-all-note-button: none; /* value change to "flex;" to showing the "All Notes" button */

Then, change the value to flex like below:


--hide-all-note-button: flex; /* value change to "flex;" to showing the "All Notes" button */

After that please quit & restart Joplin and you will see the All Note is back for you!

1 Like

Thanks for the very quick reply. All is well again.

1 Like

One more question, though I don't think it's particular to your theme. For "All notes," is it possible to exclude notes from a particular notebook? I like the Notes Overview plugin, but I don't need its notes to show up in All Notes.

Sorry, this's not what CSS can do, so my theme can't do it for you. I think it's possible to do that with Javascript, but it would be a completely new function other than All Notes.

OK. Thanks for the explanation. I suspected that this isn't just a visual isue.

And I realize that I'm asking for something odd: All Notes (except for some).

Nvm, I'm enjoying the conversation with you. Please let me know if you meet any problems with my theme.

Another question, then. I previously used Dank Mono font (or font family). What would be the easiest way to make Dank Mono the default font for everything. I noticed that there are several fonts listed for base-font ("montserrat", "microsoft Jhenghei light", avenir, arial, sans-serif). Do I just replace all of that with simply "dank mono"? And similarly for code-font: "cascadia mono light", monospace, "microsoft jhenghei light"? Would changing the font mess anything up in the theme?

You would just need to add 1 more font in front of the Montserrat. Because CSS will load the font-family from left to right, it'll going to try next if the first one is unvalid. So you can add it like below:


  --base-font: "dank mono", "montserrat", "microsoft Jhenghei light", avenir, arial, sans-serif;
  --code-font: "dank mono", "cascadia mono light", monospace, "microsoft jhenghei light";

And sure, you can remove which you are no longer to use in the future, but I recommand you don't remove the Joplin default font-family, like below:


 --base-font: "dank mono", avenir, arial, sans-serif;
 --code-font: "dank mono", monospace;

Lastly, you better to remark what you have changed, because when I releases any new updates, you would need to be find out which line of code will be overwrite your personal settings and to avoiding it's happens. You'll need to setting it from scratch again if it's happens.

Thanks again. I got it to work by adding "dank mono" on just two lines in both userchrome.css and userstyle.css. So even after future updates to your theme, it won't be too much hassle to add Dank Mono again.

That's great! Would you mind to share a screenshot that after you change the font? I'm interest to know why you want to use that font. :slightly_smiling_face:

No important productive-related reason for choosing Dank Mono. I just think that it looks nice, especially the cool-looking lowercase "r" and "f". So when the novelty wears off, I'll probably choose another font or just use your theme's default fonts.

1 Like

Ya, that's cool! And overall still looks well. Thank you for sharing!