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."
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
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.
- DESIGN
- FEATURES
- PLUGIN STYLES
- MORE SCREENSHOTS
- MORE INFORMATION
- FAQ
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
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.
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
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)
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:
2 things you should know before use:
- Make sure there is a blank line before the open tag, otherwise it may cause the format problem.
- Use plain text within a custom element.
Code Sample:
<note>
here to type any of your content.
</note>
Output:
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:
- The custom element name
ctb
stands for Custom Title Block. - Type your title next to the open tag .
- Keep your title within one line.
- Start typing your content in the second line.
- 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:
This art gallery provides 5 custom elements for you:
Custom Elements | Columns Limit | Gallery Size | Scrolling Trigger (split layout) |
---|---|---|---|
ag2 | 2 | W:100% * H:60vh + Scroll | 2 images above |
ag3 | 3 | W:100% * H:60vh + Scroll | 6 images above |
ag4 | 4 | W:100% * H:60vh + Scroll | 12 images above |
ag5 | 5 | W:100% * H:60vh + Scroll | 20 images above |
ag6 | 6 | W:100% * H:60vh + Scroll | 30 images above |
(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:
3 things you should know before use:
- The custom element name
ag
stands for Art Gallery. - The art gallery tag must use right behind the plain text .
- 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:
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.
2 things you should know before use:
- If there is more than one element in the same line, it would be showing the color depending on their priority.
- The only thing you may need to do is to understand those colors' meanings.
Here showing the heading samples:
Due to the style of headings, something you may need to consider when every time you are going to use the H4 heading:
- If the H4 heading is the last level heading of your article, use H4.
- If not, use the H5 to replace the H4 to create a better reading experience.
There are 4 situations you may want to use the span tag to separate the content:
- When you want to use an emoji on the H1 heading
- When you want to create a heading within the spoiler block - It wouldn't be treated as a heading in the Outline plugin
- When you want to split out the side information within a list
- When you want to split out the side information within a list which is in the spoiler block
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:
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.
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:
- Span in Spoiler - more details in Span
- Span in Spoiler List - more details in Span
- List in Spoiler - more details in List
- Custom Title Block in Spoiler - more details in Custom Title Block
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|
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.
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:
A List in Spoiler Block:
In the Render Viewer:
In the Markdown Editor:
Then, the code block is showing below:
See how magical after adding a bit of neon light to your mathematical formulas:
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]]
.
For the complete experience of using OhmineDT, please make sure you have done the below before you clone my CSS codes:
- Use the Joplin built-in dark theme:
preference
>Appearance
>Theme
>Dark
- Install the Montserrat font - The recommend font for OhmineDT
- Install the Cascadia font - The recommend monospace font for OhmineDT
- If you want your plugin background color is matching with OhmineDT, please change that plugin background color to #191919 (optional)
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:
- Not all Markdown editor software support using Custom Elements.
- Custom Elements content will become plain text format when you export your notes to
.md
file or transfer your notes to other software. - 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.
Here are a few things you should know before you print out your article:
- 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. - Art Gallery will be releasing the overflow limit and listing out all the images but it won't change the number of columns.
- A lot of elements are restyled for printing.
- 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 theexport
. - By the Spoiler plugin default, Spoiler Block will only appear normally when you use
export
. - 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)
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
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:
- Copy this line of text:
span;ctb;note;tip;explain;question;warning;keyword;important;ag2;ag3;ag4;ag5;ag6;
- Open Joplin
- Go to
Tools
>Options
>Plugins
- Search plugin by input the word
html
- Click
Install
which on theQuick HTML tags
plugin - Quit & restart Joplin app
- Go to
Tools
>Options
>Quick HTML tags
- Go to
HTML predefined tags
- Press
ctrl+v
to paste text in the input bar - Press
Ok
it's done!
After this, you can use this plugin like below:
- Whenever you want to use an HTML tag just press
ctrl + h
- Then, press the
Down
key on your keyboard to find the right tag - Press
Enter
key. It's done!
If you know where exactly your userstyle.css
and userchrome.css
are stored:
- Make sure you have done the requirements of using the OhmineDT
- Clone my codes
- Copy my
userstyle.css
anduserchrome.css
- Replace your
userstyle.css
anduserchrome.css
- Quit & restart Joplin
If you are not sure where your files are stored, you can follow the steps below:
- Make sure you are already installed Joplin on your computer. Download Joplin
- Download and install the most recommend fonts for this theme. Montserrat | Cascadia
- Open Joplin
- Go to
Tools
>Options
>Appearance
- Choose the
Dark
theme and clickApply
(OhmineDT is better to run with the Joplin built-in dark theme) - In the
Appearance
page, clickShow Advanced Settings
- Click
Custom stylesheet for rendered Markdown
, it will open auserstyle.css
- Copy my
userstyle.css
codes on this page: https://github.com/Nacandev/Ohmine-Dark-Theme-For-Joplin/blob/main/userstyle.css - And paste on your
userstyle.css
- Back to the
Appearance
page again and clickCustom stylesheet for Joplin-wide app styles
. it will open auserchrome.css
- Copy my
userchrome.css
codes on this page: https://github.com/Nacandev/Ohmine-Dark-Theme-For-Joplin/blob/main/userchrome.css - And paste on your
userchrome.css
- Quit & restart Joplin and it's done.
- Go to
Tools
>Options
>Appearance
- Click
Show Advanced Settings
- Click
Custom stylesheet for rendered Markdown
, it will open auserstyle.css
- Click
Custom stylesheet for Joplin-wide app styles
. it will open auserchrome.css
- Delete all the code within these two documents. It's done! but I'm hurt!
- Go to
Tools
>Options
>Plugins
- Search a plugin name
- Click
Install
- 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
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
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.