Code Monkey home page Code Monkey logo

obsidian-harmonic's Introduction

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

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 :

  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)

obsidian-harmonic's People

Contributors

thiews avatar lilarest avatar gnopps avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.