Harmonic is a minimal and highly customizable theme for Obsidian.md

  • By null
  • Last update: Aug 10, 2022
  • Comments: 8

"Harmonic" theme for Obsidian

Harmonic is a minimal and highly customizable theme. You can easily change the entire design with just a few changes using the Style Settings plugin panel ✏️

Support my work

If you like using the theme, you can :

Buy Me A Coffee

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 ?

  1. In your Obsidian go to Settings > Appearance > Themes > Manage
  2. Then browse for the Harmonic theme and click on Use

How to customize ?

Firstly, install the Style Settings plugin :

  1. In your Obsidian go to Settings > Community plugins > Browse
  2. Then browse for the Style Settings plugin and click on Install and then on Enable
  3. 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)

Color variation-2

Activate focus mode, make bold and italic pop (preview and edit mode)

  • Before focus mode:

Capture d’écran 2021-12-05 à 20 50 26

  • After focus mode:

Capture d’écran 2021-12-05 à 20 51 52

  • Bold and italic color accent in edit mode (same in preview mode)

Capture d’écran 2021-12-05 à 20 55 50

  • Focus on the paragraph you are writing (edit mode)

Capture d’écran 2021-12-08 à 18 49 45

Customize page settings : line width, paragraph offset, activate fullwidth mode

  • paragraph offset :

Capture d’écran 2021-12-05 à 21 00 05

  • Fullwidth mode (in preview and edit mode)

Capture d’écran 2021-12-05 à 21 01 48

Font

  • Choose different font for titles, text preview, edit mode and phone

Harmonic-dark

Capture d’écran 2021-12-05 à 21 09 34

Titles

  • Make the "Hx" appear like in Bear app

Capture d’écran 2021-12-05 à 21 14 27

  • Choose font style (normal, italic) for each level

Capture d’écran 2021-12-05 à 21 17 49

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

Capture d’écran 2021-12-10 à 17 32 44

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

list note article view

How to contribute ?

Contribute by testing the theme

  1. Test the theme features
  2. Observe a bug or an improvement that could be made
  3. 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 :
    1. Check out the issues labelled "help wanted".
    2. Check out our roadmap and choose an unassigned task

Here are the steps to contribute to the Harmonic's code :

  1. Fork this repository
  2. Clone your fork on your computer using git clone https://github.com/<YourGithubName>/Obsidian-Harmonic.git
  3. In local, navigate into the cloned folder called Obsidian-Harmonic/
  4. Add the Harmonic project repository as the "upstream" remote using git remote add upstream https://github.com/Thiews/Obsidian-Harmonic.git
  5. Now you can easily pull the new updates on the Harmonic repository using git pull upstream main
  6. Apply changes in your local repository
  7. Commit your changes using git add -A + git commit -m "<YourChangesDescription>"
  8. Push your changes to your fork repository using git push origin main
  9. 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)

Github

https://github.com/Thiews/Obsidian-Harmonic

Comments(8)

  • 1

    Proposal : Split the theme's CSS sheet in multiple CSS sheets

    The goal is to allow easier collaboration on the theme :

    • People can work on different files without conflicts
    • The project is more accessible and easier to understand for new contributors
    • It's easier to maintain in the long term

    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:

  • 2

    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):

    • [-]
    • [>]
    • [?]
    • [/]
  • 3

    Proposal to improve readability in preview mode

    Hi ! Here is a proposal to improve readability in preview mode. By default the margin-block-end and margin-block-start values are set to 1em 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 : harmonic_before

    So, my proposal is to reduce the margin-block-end and margin-block-start values to 0.4em using this CSS rule :

    div.workspace-leaf div.markdown-preview-sizer.markdown-preview-section > div > :not(h1, h2, h3, h4, h5, h6) {
        margin-block-start: 0.4em;
        margin-block-end: 0.4em;
    }
    

    EDIT : I used the :not() selector to exclude headers of this rule

    And here is the result after this change : harmonic_after

    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:

  • 4

    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:

  • 5

    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:

  • 6

    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?

  • 7

    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. image And when I open the folder,it seems something wrong with render. 2022-07-21 at 09 23 39 - Blue Condor

  • 8

    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