Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 2 months ago
JSON representation

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

Awesome Lists containing this project

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 ✏️
Capture d’écran 2022-01-05 à 10 52 31
Preset Bear app (light) in https://github.com/Thiews/Obsidian-Harmonic/tree/main/theme-presets

Capture d’écran 2022-01-05 à 10 50 25
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 :

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](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:
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](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

```


```

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

```dataview
table file.ctime, ("") 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](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)