"Harmonic" theme for Obsidian
Style Settings plugin panel
✏️
Harmonic is a minimal and highly customizable theme. You can easily change the entire design with just a few changes using the
Support my work
If you like using the theme, you can :
Plugins compatibility
This theme has adjustments or custom-made design for the following plugins :
- Kanban
- Calendar
- Sliding Panes
- Checklist
- File Explorer Note Count
How to install ?
- In your Obsidian go to
Settings
>Appearance
>Themes
>Manage
- Then browse for the Harmonic theme and click on
Use
How to customize ?
Firstly, install the Style Settings plugin :
- In your Obsidian go to
Settings
>Community plugins
>Browse
- Then browse for the Style Settings plugin and click on
Install
and then onEnable
- You have now access to the customization panel by going to
Settings
>Style Settings
>Harmonic
What you can customize ?
Choose a logo or a title, an accent color, 4 different styles for menus (left sidebar and right sidebar)
Activate focus mode, make bold and italic pop (preview and edit mode)
- Before focus mode:
- After focus mode:
- Bold and italic color accent in edit mode (same in preview mode)
- Focus on the paragraph you are writing (edit mode)
Customize page settings : line width, paragraph offset, activate fullwidth mode
- paragraph offset :
- Fullwidth mode (in preview and edit mode)
Font
- Choose different font for titles, text preview, edit mode and phone
Titles
- Make the "Hx" appear like in Bear app
- Choose font style (normal, italic) for each level
Designed for phones
- you can choose a specific font size for phone
- texts (preview and edit mode) are displayed smaller
- an edit button is displayed automaticaly
Custom html elements
To have more information about the theme and custom css / html : Go there
- columns (.columns-2, columns-3) avec html :
<div class="columns-2>your text</div>
- cards (.cards-2, .cards-3) avec html :
<div class="cards-2>
<img src="image url">
<div class="card-title">Your title</div>
<p>Your text</p>
<button><a href="url of the page">Text of the button</a></button>
</div>
- menu bar for page (.menu-page) avec html
<div class="menu-page">
<a href="obsidian link of page 1">Page 1</a>
<a href="obsidian link of page 2">Page 2</a>
<a href="obsidian link of page 3">Page 3</a>
</div>
- aside
Custom dataview
- list of articles style (.dataview-articles-style) With the following dataview code. "Cover" appear in page YAML (cover: url of the image)
table file.ctime, ("<img src=" + cover + ">") as cover
from WHAT YOU WANT TO SHOW
sort file.ctime desc
How to contribute ?
Contribute by testing the theme
- Test the theme features
- Observe a bug or an improvement that could be made
- Report it by creating an issue
Contribute by coding the theme
- If you have found a bug or a potential improvement for the theme and want to code it, we would be happy to accept your PRs! Important : It'd be good to talk about it beforehand to make sure that no one else is working on it. You can open an issue for this.
- If you want to code but don't know where to start :
- Check out the issues labelled "help wanted".
- Check out our roadmap and choose an unassigned task
Here are the steps to contribute to the Harmonic's code :
- Fork this repository
- Clone your fork on your computer using
git clone https://github.com/<YourGithubName>/Obsidian-Harmonic.git
- In local, navigate into the cloned folder called
Obsidian-Harmonic/
- Add the Harmonic project repository as the "upstream" remote using
git remote add upstream https://github.com/Thiews/Obsidian-Harmonic.git
- Now you can easily pull the new updates on the Harmonic repository using
git pull upstream main
- Apply changes in your local repository
- Commit your changes using
git add -A
+git commit -m "<YourChangesDescription>"
- Push your changes to your fork repository using
git push origin main
- Return to your fork on Github, refresh the page and you should see an highlighted area that invites you to initiate a Pull Request. (alternatively you can click on the "New pull request" button)
Proposal : Split the theme's CSS sheet in multiple CSS sheets
The goal is to allow easier collaboration on the theme :
But, is it possible with Obsidian ? Have you tried it ? @Thiews If we create a CSS file that imports several other CSS files, will Obsidian import them when someone downloads the theme ? Or does it only allow one CSS file ?
I'm going to open an issue on the Obsidian repo. Lilian :slightly_smiling_face:
Checkboxes
I've used SlRvb's CSS snippet for checkboxes with other themes, but it doesn't seem to play well with Harmonic. Is this something you can provide with your theme? The snippet styles include these variations (and a lot more in fact):
Proposal to improve readability in preview mode
Hi ! Here is a proposal to improve readability in preview mode. By default the
margin-block-end
andmargin-block-start
values are set to1em
for elements that are inside each preview section divs. It conduces to huge line spacing between paragraphs and lists (where list is so far from its previous paragraph) for example, here is a picture :So, my proposal is to reduce the
margin-block-end
andmargin-block-start
values to0.4em
using this CSS rule :EDIT : I used the :not() selector to exclude headers of this rule
And here is the result after this change :
I tested this change on my own vault using CSS snippets today and for myself it is really more comfortable to read.
Lilian :slightly_smiling_face:
Improvements for the README.md file
Hi @Thiews I'm currently working on some improvements on the README.md file to make it more simple, readable and clean, you can see it on my forked repo here : https://github.com/LilianCr/Obsidian-Harmonic
I want your approval for something : Can I change images and functionalities presentation ? For example focus mode doesn't require any image, bold and pop could only be a small image in paysage. The goal of that is to make it shorter and easier for everyone that browse the functionalities of the theme :slightly_smiling_face:
H5 font-size cannot be customized
Hi ! When I try to change the h5 font-size in "Style Settings > Harmonic > Headings > Level 5", nothing happens. The h5 font-size is fixed to the default value "1.12em". I've opened the dev console and it seems that you've just forgotten
font-size: var(--h5);
in the style of ".cm-header-5". I could have made a pull request with the change but I thought it would be faster for you to just add the missing line rather than handling a pull request.Thanks for this great theme ! Lilian :slightly_smiling_face:
turn off frameless?
Absolutely loving Harmonic theme. For some reason, it turns on frameless mode by default. I would like to have the titlebar back.
I've been working through css files and style settings. I've narrowed it down to the theme somehow because the titlebar is visible in other themes. Where can I go to toggle the titlebar back on?
Tags render improperly in live mode
I like this theme Very much! But I found some that in live mode something wrong with the tags.
And when I open the folder,it seems something wrong with render.

Horizontal line not showing up in edit view
Hello, I like your theme but horizontal lines using
---
are not showing up in edit view (but they do in read view. I couldn't find any style settings to address this. Also, is it possible to use the full window width in edit view (right now can only turn on for read view).Thanks