Ohmine Dark Theme for Joplin

Ohmine Dark Theme is a Joplin CSS theme that aims to provide a better Work-On-Screen experience for those who want to treat their eyes better.

"Notes are my mind, and I want to be able to spend more time with it every day."

Latest Released

OhmineDT-v2.2.16 updates ( 18-DEC-2021 tested on Joplin v2.6.9)

• New: add styling to the notelist sorting button
• Fix: notbook title padding wrong in the sidebar
• Fix: sync button font size
• Fix: setting page styles
• Fix: small adjustments
• Fix: notebook title wrap text

OhmineDT-v2.2.10 updates ( 7-DEC-2021 tested on Joplin v2.5.12)

• New: avoid page break inside the TurnToChart table when printing
• Fix: code block appearing unexpected color bars when specified a language
• Fix: html syntax background color affects the code block
• Change: table row & column gap
• Change: color adjustments

Not a Joplin user yet?

Joplin is the best note-taking app in the market if you are looking for the below advantages:

• Free & Opensource
• Multiple text editors (Rich Text and Markdown)
• End-To-End Encryption to secure your notes
• Cross platforms app that available on Windows, macOS, Linux, Android, iOS, and terminal.
• Synchronizing with various services, including Joplin Cloud, Dropbox, OneDrive, Next cloud...
• Take screenshots and save web pages as note with a Web Clipper browser extension.
• Customize the app with your own scripts and plugins using the Extension API.
• Or... You love the Ohmine Dark Theme 😎❤️
• And much more...

It can be covering all your needs in note-taking! Especially the privacy protection!

Visit Joplin Homepage for more details.

Table of contents

• DESIGN
  • The Inspiration of Ohmine Dark Theme
  • Markdown Editor
  • Render Viewer
  • Font Family
• FEATURES
  • Sticky Notes (custom element)
    • How to use
  • Custom Title Block (custom element)
    • How to use
  • Art Gallery (custom element)
    • How to use
  • Abstract Content Bar
    • How to use
  • Structural-friendly heading style
    • How to use
  • Span
    • How to use
  • Eye-Protector
• PLUGIN STYLES
  • Spoiler
  • Markdown Table Colorize
• MORE SCREENSHOTS
  • Notebook Panel
  • Text Style
  • Link
  • Unordered List & Ordered List
  • Checklist
  • Blockquote
  • Code block & Inline Code
  • Math notation
  • Markdown TOC
• MORE INFORMATION
  • Requirements of Ohmine Dark Theme
  • Must Know About Custom Element
  • About Printing
  • Recommended plugins
    • Quick HTML tags (most recommended to use with this theme)
• FAQ
  • How to install this theme?
  • How to delete this theme?
  • How to install Joplin plugins?
  • How to contribute?
    • Give me a user feedback
    • Report Bugs

The Inspiration of Ohmine Dark Theme

The design inspiration comes from the below Japanese Sake Ohmine-3-Grain:

This is a gift from my friend and I was tasting it when I made this theme. I pretty much love the whole design series of Ohmine-3-Grain and this is originally designed by Stockholm Design Lab.

If you are interested to know more about the Ohmine-3-Grain design you may like to check out the below links:

Stockholm Design Lab - Ohmine page

Ohmine Official Video on Youtube

⬆️Back

Markdown Editor

Markdown Editor is the place where your eyes will always keep focus for a long time when you are writing your Markdown notes. It means the Markdown Editor is always the key point to protect your eyes.

• Have you ever felt distressed because you still want to write notes when you have blurred vision?
• Have you ever felt that visual messy because of using Markdown Syntax to create complex notes?
• Do you want to experience the feeling of focusing on writing notes for a long time without feeling tired?

Ohmine Dark Theme is completely designed to solve these problems.

The key adjustments for the Markdown Editor are as below:

• Reduce the color contrast between the main content and the background
• Darken and reduce fonts for non-essential content
• Reduce the use of unnecessary colors
• Using a MAGICAL background color #151b1a

I'm choosing this background color based on the needs and not based on my personal favorite. As I tried assorted colors, I think the #151b1a is the most magical one that can always lead me to a deep focus state readily. When you spend an hour working with it, you will feel it.

⬆️Back

Render Viewer

Render Viewer is the place where you often want to quickly find out the correct information. It' means the Render Viewer needs a great content separating structure to let you identify the key information easily.

The key adjustments for the Render Viewer are as below:

• Use soft colors to differentiate content
• Well-structural heading style
• Stand out the key information
• Avoid bright colors when scrolling down to read content

⬆️Back

Font Family

Ohmine dark theme is using the below font family for both Markdown Editor and Render Viewer:

• Montserrat (download it for free)
• Microsoft JHengHei Light (for Traditional Chinese 繁體中文)
• Avenir (Joplin default)
• Arial (Joplin default)
• Sans-Serif (Joplin default)

Montserrat is the most important part of this theme, I recommended you use it on this theme. I've tested over 40 fonts with sizes from 12 to 15px and Montserrat is the ultimate champion. It provides the best reading experience with 14px.

Montseratt sample:

Then, the monospace font is used on all Markdown Syntax, such as a Markdown table, Markdown link, etc. You'll also see it in the code block and inline code.

Let's take a look at the monospace font-family:

• Cascadia Mono Light (download it for free)
• Monospace (Joplin default)
• Microsoft JHengHei Light (for Traditional Chinese comments 繁體中文註釋)

Cascadia Mono Light is one of the best monospace fonts. It would be a good choice if you don't need the ligature, and it provides clear symbol characters and works great at the 12px font size.

Cascadia Mono Light sample:

If you didn't install the above recommended fonts on your computer, Joplin will pick the default fonts for you.

The settings in Tools> Options> Appearance will no longer work once you installed this theme. You should always edit all the font-related settings through the CSS files. (P.S. Tools > Options > Appearance > Editor maximum width is excepted)

⬆️Back

Sticky Notes (custom element)

Ohmine Dark Theme has 7 custom elements for creating the Sticky Notes: note , tip , question , explain , warning , keyword , important. They can help you to build the structure of the article and only for personal reference. Normally, you would be removing them from the content once you are complete your article.

Let’s see what are the Sticky Notes for:

How to use

2 things you should know before use:

1. Make sure there is a blank line before the open tag, otherwise it may cause the format problem.
2. Use plain text within a custom element.

Code Sample:

<note> 
here to type any of your content.
</note>

Output:

⬆️Back

Custom Title Block (custom element)

Custom Title Block is a piece of public information for readers, it would be suitable for supplementing information that you think is important to readers.

Let's see what it looks like:

How to use

1. The custom element name ctb stands for Custom Title Block.
2. Type your title next to the open tag .
3. Keep your title within one line.
4. Start typing your content in the second line.
5. Use plain text within a custom element.

Code Sample:

<ctb>Your title
Your content
</ctb>

:[
Custom title block sample

<ctb>Custom Title Block In Spoiler
It's looks different in the spoiler block! 
</ctb>

]:

Output:

⬆️Back

Art Gallery (custom element)

This art gallery provides 5 custom elements for you:

(The data is based on the default margin value of the editor in split layout.)

Below is the sample of the art gallery(ag6) with 48 images:

How to use

3 things you should know before use:

1. The custom element name ag stands for Art Gallery.
2. The art gallery tag must use right behind the plain text .
3. Do not include any blank line within this part of codes, blank line will break the format .

Code Sample:

This is a normal paragraph content. <--
<ag4> 
![joplin_logo.png](:/ec939f9c7c764c35ac2a5b71af077d56)
![davinci_resolve_logo.png](:/9981233bc3004ca791dce0c03c39e76a)
![blackmagic_logo.jpg](:/35a13cc95e68498f920300f5babb6038)
![affinity_serif_logo.jpg](:/6cfaf4d539284daa833a732b4bf63bbf)
![affinity_publisher_logo.png](:/782b1076fa1249a5b0d318c1af9d0b8f)
![affinity_photo_logo.png](:/7ad5221028b24bfe8fe11722b6845112)
![affinity_designer_logo.png](:/6ed16b90348146ae9f5a34b9a7c7f181)
![ableton_logo.png](:/bc5078587d8945cca940395d67bcc321)
</ag4>

Output:

⬆️Back

Abstract Content Bar

Abstract Content Bar helps you to identify the elements through the color bar in the markdown editor.

It will check your text line by line and then tell you what they are:

(bigger number means higher priority)

See the below example screenshot (look to the right):

It would be helpful when you want to release your eyes from the text for sometimes, or when you are going to double-check the missing part of your content.

How to use

2 things you should know before use:

1. If there is more than one element in the same line, it would be showing the color depending on their priority.
2. The only thing you may need to do is to understand those colors' meanings.

⬆️Back

Structural-friendly heading style

Here showing the heading samples:

How to use

Due to the style of headings, something you may need to consider when every time you are going to use the H4 heading:

1. If the H4 heading is the last level heading of your article, use H4.
2. If not, use the H5 to replace the H4 to create a better reading experience.

⬆️Back

Span

There are 4 situations you may want to use the span tag to separate the content:

1. When you want to use an emoji on the H1 heading
2. When you want to create a heading within the spoiler block - It wouldn't be treated as a heading in the Outline plugin
3. When you want to split out the side information within a list
4. When you want to split out the side information within a list which is in the spoiler block

How to use

If you are using span in the H1 heading or a list:

• You can start an open tag in a new line but don't include any blank line between the paragraph content and span content.

If you are using span in the spoiler block to create a heading:

• Please always start an open tag in a new line.

Sample Code:

- If you want to separate a content to describe the list item
<span>you should use a span tag like this</span>
- Here is another list item

# Ohmine Dark Theme For Joplin <span>:rocket:</span>

:[
spoiler block

<span>This is a span in spoiler block looks like</span>

]:

:[
spoiler block

- Spoiler list item
<span>This is a span within a spoiler list looks like</span>
- Spoiler list item

]:

Output:

⬆️Back

Eye-Protector

All the attached images and Mermaid Charts will be defaulted by 30% darker than the original, to avoid the bright light flashing your eyes when scrolling down your note.

Mouse hover on them to check out the original color, it will be getting bright smoothly.

⬆️Back

Spoiler

OhmineDT has been styling for the Spoiler plugin, please make sure you have already installed this plugin to get it work.

This is a closed spoiler block:

Here showing the inline spoiler and an opened spoiler block:

In addition, I've created 4 more custom styles that you can use within the Spoiler block for advanced usage:

1. Span in Spoiler - more details in Span
2. Span in Spoiler List - more details in Span
3. List in Spoiler - more details in List
4. Custom Title Block in Spoiler - more details in Custom Title Block

⬆️Back

Markdown Table Colorize

OhmineDT has been styling for the Markdown Table Colorize plugin, please make sure you have already installed this plugin to get it work.

Markdown table syntax sometimes can be very messy when too much information is within the table. Thanks to the Markdown Table Colorize plugin, I can create a better style for the markdown table now!

After installing the Markdown Table Colorize plugin, you will see what the markdown table syntax looks like below:

• Separating table rows into independent sections
• Use colored letters as a column mark
• Support up to 20 columns table

Use Tips:

I would like to share with you the steps of how I create a markdown table. And these steps are perfect for use with this plugin style.

First to create the table structure:

||||||
||||||
||||||

Then, add format in it:

||||||
|-|-|-|-|-|
||||||

Last, add content to it:

|TH|TH|TH|TH|TH|
|-|-|-|-|-|
|TD|TD|TD|TD|TD|

⬆️Back

Notebook Panel

The CSS styling of Ohmine Dark Theme will only support up to 10 levels of subdirectories when Joplin didn't limit it to you. And sure, you can edit my CSS to fit your needs.

⬆️Back

Text Style

A sample in Render Viewer:

The color was not always the best choice for identifying information. Sometimes, circling the keywords just like what you do on a paper is a much better option for less noise. And this style will apply to the emphasize text, strong text, mark text, and abbreviation text.

A sample in Markdown Editor:

Search text sample in Render Viewer:

Search text sample in Markdown Editor:

⬆️Back

Link

⬆️Back

Unordered List & Ordered List

A List in Spoiler Block:

⬆️Back

Checklist

⬆️Back

Blockquote

⬆️Back

Code block & Inline Code

In the Render Viewer:

In the Markdown Editor:

Then, the code block is showing below:

⬆️Back

Math notation

See how magical after adding a bit of neon light to your mathematical formulas:

⬆️Back

Markdown TOC

To use markdown TOC, you should enable the the extension first: Tools > Options > Markdown > Enable table of contents extension (wysiwyg: no) Then, you can create the TOC with a very easy markdown syntax [[toc]] .

Requirements of Ohmine Dark Theme

For the complete experience of using OhmineDT, please make sure you have done the below before you clone my CSS codes:

1. Use the Joplin built-in dark theme: preference > Appearance > Theme > Dark
2. Install the Montserrat font - The recommend font for OhmineDT
3. Install the Cascadia font - The recommend monospace font for OhmineDT
4. If you want your plugin background color is matching with OhmineDT, please change that plugin background color to #191919 (optional)

⬆️Back

Must know about Custom Element

OhmineDT provides some of the features that function by Custom Elements. I absolutely recommend you use it to create a better reading experience, but first, you have to consider the below:

1. Not all Markdown editor software support using Custom Elements.
2. Custom Elements content will become plain text format when you export your notes to .md file or transfer your notes to other software.
3. Even if other note-taking software is supported using Custom Element you may need to copy the related codes to that software manually.

So, if you are only taking notes within Joplin, you don't have to worry about that. Otherwise, you should consider which notes you should use Custom Elements and which don't.

⬆️Back

About Printing

Here are a few things you should know before you print out your article:

1. Sticky notes will not display on printing, it's for personal use by default. In case you want to print it out, just open the userstyle.css file and you will understand what to do.
2. Art Gallery will be releasing the overflow limit and listing out all the images but it won't change the number of columns.
3. A lot of elements are restyled for printing.
4. By Joplin default, you are not able to select and copy the text if you are using the print to create a PDF file. If you expect to create a PDF file that allows you to do it, please use the export.
5. By the Spoiler plugin default, Spoiler Block will only appear normally when you use export.
6. By the Spoiler plugin default, Inline Spoiler will not print out the text.

The printing sample PDF for reference: https://drive.google.com/file/d/1xSRkQxBqpMQzz7jU_BLgVmCCb1UgvCoT/view?usp=sharing (11-NOV-2021 updated)

⬆️Back

Recommended plugins

Below are some of the best plugins on Joplin, if you have never tried it before it's worth giving a try.

• Quick HTML tags (most recommend) - Quickly create the custom elements which OhmineDT provides you. quick setting up
• Markdown Table Colorize (most recommend) - This plugin helps OhmineDT create the best style of markdown table for you.
• Spoiler (most recommend) - If Spoiler is useful for you, I would like to tell you that you will get more advanced features when using it with OhmineDT.
• Turn To Chart
• Outline
• Note Tabs
• Templates
• Quick Links
• Rich Markdown
• Menu items, Shortcuts, Toolbar icons
• Table Formatter - It's recommended If you didn't install the Markdown Table Colorize.

The above is not all, you can still find out more best plugins based on your personal needs on Joplin Plugins Repository

⬆️Back

Quick HTML tags (most recommended to use with this theme)

It let you quick and easy to create HTML tags in your notes, and it's helpful to create the Sticky Notes, Art Gallery, span tag, and more.

Quick setting up:

1. Copy this line of text: span;ctb;note;tip;explain;question;warning;keyword;important;ag2;ag3;ag4;ag5;ag6;
2. Open Joplin
3. Go to Tools > Options > Plugins
4. Search plugin by input the word html
5. Click Install which on the Quick HTML tags plugin
6. Quit & restart Joplin app
7. Go to Tools > Options > Quick HTML tags
8. Go to HTML predefined tags
9. Press ctrl+v to paste text in the input bar
10. Press Ok it's done!

After this, you can use this plugin like below:

1. Whenever you want to use an HTML tag just press ctrl + h
2. Then, press the Down key on your keyboard to find the right tag
3. Press Enter key. It's done!

⬆️Back

How to install this theme

If you know where exactly your userstyle.css and userchrome.css are stored:

1. Make sure you have done the requirements of using the OhmineDT
2. Clone my codes
3. Copy my userstyle.css and userchrome.css
4. Replace your userstyle.css and userchrome.css
5. Quit & restart Joplin

If you are not sure where your files are stored, you can follow the steps below:

1. Make sure you are already installed Joplin on your computer. Download Joplin
2. Download and install the most recommend fonts for this theme. Montserrat | Cascadia
3. Open Joplin
4. Go to Tools > Options > Appearance
5. Choose the Dark theme and click Apply (OhmineDT is better to run with the Joplin built-in dark theme)
6. In the Appearance page, click Show Advanced Settings
7. Click Custom stylesheet for rendered Markdown , it will open a userstyle.css
8. Copy my userstyle.css codes on this page: https://github.com/Nacandev/Ohmine-Dark-Theme-For-Joplin/blob/main/userstyle.css
9. And paste on your userstyle.css
10. Back to the Appearance page again and click Custom stylesheet for Joplin-wide app styles . it will open a userchrome.css
11. Copy my userchrome.css codes on this page: https://github.com/Nacandev/Ohmine-Dark-Theme-For-Joplin/blob/main/userchrome.css
12. And paste on your userchrome.css
13. Quit & restart Joplin and it's done.

⬆️Back

How to delete this theme

1. Go to Tools > Options > Appearance
2. Click Show Advanced Settings
3. Click Custom stylesheet for rendered Markdown , it will open a userstyle.css
4. Click Custom stylesheet for Joplin-wide app styles . it will open a userchrome.css
5. Delete all the code within these two documents. It's done! but I'm hurt!

⬆️Back

How to install Joplin plugins

1. Go to Tools > Options > Plugins
2. Search a plugin name
3. Click Install
4. After installing all you need, quit & restart Joplin app

If you want to discover all of the Joplin plugins, you can go visit the Joplin Plugins Repository

⬆️Back

How to contribute

Give me a user feedback

Whatever you like this theme or not, I'll open my mind to accept any of your comments and treat your feeling as mine. It would be my pleasure if I could get any feedback from you! Go to leave me a message on Joplin Forum or Github Discussions

Report Bugs

If you experiencing any bugs or bad issues while using this theme, please create a bug report on issues page and let me know it.

⬆️Back