Obsidian-Harmonic

KO | EN

gitlite — search

#javascript #hacktoberfest #llm #go #machine-learning #deep-learning #linux #java #nodejs #windows #kubernetes #awesome-list #pytorch #mcp

Obsidian-Harmonic

(★ 49)

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

Obsidian-Harmonic 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# _**"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 ✏️
<img width="1440" alt="Capture d’écran 2022-01-05 à 10 52 31" src="https://user-images.githubusercontent.com/29182877/148197612-efeddec9-0512-4ebd-ae23-265684c0cd5a.png">
Preset Bear app (light) in https://github.com/Thiews/Obsidian-Harmonic/tree/main/theme-presets

<img width="1440" alt="Capture d’écran 2022-01-05 à 10 50 25" src="https://user-images.githubusercontent.com/29182877/148197346-61a1435c-5aa5-4658-94d6-8f3dad20df06.png">
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:
<img width="1440" alt="Capture d’écran 2021-12-05 à 20 50 26" src="https://user-images.githubusercontent.com/29182877/144761447-655e3fc1-903c-4efd-943b-5fab45b484a6.png">

- After focus mode:
<img width="1440" alt="Capture d’écran 2021-12-05 à 20 51 52" src="https://user-images.githubusercontent.com/29182877/144761487-3c1ebc74-3557-4673-94a8-01cdbf9b2e89.png">

- Bold and italic color accent in edit mode (same in preview mode)
<img width="1440" alt="Capture d’écran 2021-12-05 à 20 55 50" src="https://user-images.githubusercontent.com/29182877/144761655-35a2c2ad-f170-4f94-9177-075c2c133dbc.png">

- Focus on the paragraph you are writing (edit mode)
<img width="1440" alt="Capture d’écran 2021-12-08 à 18 49 45" src="https://user-images.githubusercontent.com/29182877/145258352-229c6a50-a2a0-4066-a930-bc85477d4422.png">

### Customize page settings : line width, paragraph offset, activate fullwidth mode
- paragraph offset :
<img width="1440" alt="Capture d’écran 2021-12-05 à 21 00 05" src="https://user-images.githubusercontent.com/29182877/144761811-ff654dcd-785e-4506-99cd-7844a80301d4.png">

- Fullwidth mode (in preview and edit mode)
<img width="1440" alt="Capture d’écran 2021-12-05 à 21 01 48" src="https://user-images.githubusercontent.com/29182877/144761982-d015958e-baf2-4579-9873-3a5d78b7316a.png">

### Font
- Choose different font for titles, text preview, edit mode and phone
<img width="1440" alt="Harmonic-dark" src="https://user-images.githubusercontent.com/29182877/144762127-1a94b1f2-a362-4773-bda1-d37cfc3482c1.png">
<img width="1440" alt="Capture d’écran 2021-12-05 à 21 09 34" src="https://user-images.githubusercontent.com/29182877/144762227-774a7c7b-4c87-41fd-b627-60e1d4a29e87.png">

### Titles
- Make the "Hx" appear like in Bear app
<img width="1440" alt="Capture d’écran 2021-12-05 à 21 14 27" src="https://user-images.githubusercontent.com/29182877/144762392-360650f4-e2b5-4b5b-81de-1113ef020f61.png">

- Choose font style (normal, italic) for each level
<img width="1440" alt="Capture d’écran 2021-12-05 à 21 17 49" src="https://user-images.githubusercontent.com/29182877/144762461-cda33fe6-7f85-457b-9b35-c5e8f3d4effb.png">

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

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

```dataview
table file.ctime, ("<img src=" https://raw.githubusercontent.com/Thiews/Obsidian-Harmonic/main/+ 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](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/<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`
5) Apply changes in your local repository
6) Commit your changes using `git add -A` + `git commit -m "<YourChangesDescription>"`
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)

Obsidian-Harmonic

Obsidian-Harmonic 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Obsidian-Harmonic

Obsidian-Harmonic 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README