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

Harmonic is a minimal and highly customizable theme for Obsidian.md
https://github.com/Thiews/Obsidian-Harmonic

customizable minimalist obsidian-md theme

Last synced: 1 day ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/Thiews/Obsidian-Harmonic
• Owner: Thiews
• License: gpl-3.0
• Created: 2021-12-01T15:29:56.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-04-17T09:23:13.000Z (over 2 years ago)
• Last Synced: 2024-08-02T13:31:36.179Z (3 months ago)
• Topics: customizable, minimalist, obsidian-md, theme
• Language: CSS
• Homepage:
• Size: 47.4 MB
• Stars: 46
• Watchers: 2
• Forks: 3
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• jimsghstars - Thiews/Obsidian-Harmonic - Harmonic is a minimal and highly customizable theme for Obsidian.md (CSS)

README

        
# _**"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](https://github.com/mgmeyers/obsidian-style-settings) 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](https://github.com/mgmeyers/obsidian-style-settings) :

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](https://user-images.githubusercontent.com/29182877/147460176-9474538c-3804-4d80-ac4a-62bcd3b0585a.png)

### 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](https://github.com/Thiews/Obsidian-Harmonic/blob/main/docs/Custom-CSS-and-HTML-elements.md)

- columns (.columns-2, columns-3) avec html :

```



  

  
Your title

  
Your text

  Text of the button

 

```


- menu bar for page (.menu-page) avec html

```

  


	  Page 1

	  Page 2

	  Page 3

  

```


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

```dataview

table file.ctime, ("") 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](https://github.com/Thiews/Obsidian-Harmonic/issues/new)

### 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](https://github.com/Thiews/Obsidian-Harmonic/issues/new) for this.

- If you want to code but don't know where to start :

  1) Check out the issues labelled "[help wanted](https://github.com/Thiews/Obsidian-Harmonic/labels/help%20wanted)".

  2) Check out [our roadmap](https://github.com/Thiews/Obsidian-Harmonic/projects/1) 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//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`

5) Apply changes in your local repository

6) Commit your changes using `git add -A` + `git commit -m ""`

7) Push your changes to your fork repository using `git push origin main`

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