"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 ✏️

Preset Bear app (light) in https://github.com/Thiews/Obsidian-Harmonic/tree/main/theme-presets

Preset Cobalt (dark) in https://github.com/Thiews/Obsidian-Harmonic/tree/main/theme-presets

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 ?

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)

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

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)