New theme : Harmonic

Hi there,
I created a theme I use every day and wanted to share it.
It works with style setting plugin to customize many visual parameters.

5 Likes

Looks great! Have you considered renaming the repo, get some fuller screenshots, and then submit it to the theme store?

Thank you, I am a newbie !! By “fuller screenshot”, you mean bigger size or a better image cover ?

I submitted it to the theme store !

You can check out the other theme covers. Basically something that shows as many features of your theme as possible, and a screenshot of the full Obsidian including top bar and status bar would be ideal.

Wow. Awesome.

Thank you !! :slight_smile:

@Thiews. Even among all the grogeous, customizable themes now available for Obsidian, this one stands out. I like the logo option too. I inserted a favourite quote instead and it inspires me every time I open up Obsidian. Super work!

2 Likes

Thank you so much !! Happy you enjoy using it !! I keep updating it often for the moment, if you didn’t have done yet, push the button update in the store ! I suppose you use the “Style settings” plugin with it, it’s a must have !

1 Like

Hi there ! I made some theme enhancements I would like to share
With the style settings plugin you now can :

  • add the possibility to invert color between page and sidebars
  • choose between 3 different sidebars designs
  • choose between text font and header font for the sidebars
  • add a writing focus feature (highlight the paragraph you’re writing, faint the others)
  • customize blockquote
  • add css for html to make cards (.cards-2, .cards-3), columns (.columns-2, .columns-3), aside, menu (.menu-page, .menu-page-v2)
  • add css for dataview to display table with filename, date and cover like a list of articles
    Hope you enjoy using the theme !

This theme is absolutely gorgeous. Have been stumbling around between themes that aligned with the colour scheme I preferred (nord) and themes that had a UI structure that I liked (particularly in Harmonic I find the left hand directory panel to be stunning). Style setting plugin was a breeze to use. Again, amazing work. Your next coffee is definitely on me.

Thank you so much !! I tried to make something easy to use, very customizable , with harmonious colors (to my eyes !!). Glad you enjoy using it !!

A few enhancements :

  • design on phone (with automatic display of an edit/preview button
  • more custom css element (See more)
  • the possibility to capitalize first letter of a paragraph (in Style settings : Make pages pop)

I just added a few advanced checkbox options :

1 Like

In Style settings menu, I just added

  • a live preview theme style and a WYSIWYG mode for markdown source view,
  • more options to customize navigation folder panel

A few images to sum up what you can customize with the theme :

1 Like

Harmonic is my favorite theme – and it keeps on giving. Thank you very much @Thiews for all your work on Harmonic.

Thank you @RoyRogers !! Glad you enjoy it !

1 Like

You can now download presets for the theme : Obsidian-Harmonic/theme-presets at main · Thiews/Obsidian-Harmonic · GitHub and share yours !

Harmonic v2.1 is out

Design additions (via style settings plugin)

  • Navigation folder panel
    • Now 6 styles
    • Dark background in light mode
  • Now 2 styles for page title
  • Internal and external links customization (icon, color, underline width)
  • Checkboxes
    • checkbox customization (rounded or squared)
    • add custom checkboxes
      • Done (- [X])
      • In progress (- [/])
      • Late (- [L])
      • Removed (- [-])
      • Transferred (- [>])
      • Deferred (- [D])
      • Question (- [?])
      • Research (- [R])
      • Information (- [i])
      • Location (- [l])
      • Important (- [!])
  • New menu in style settings to customize more parameters (but risks to break color harmony)
    • main panel color
    • sidebar panel color
    • text color
    • bold and italic color
    • Text folder color
    • Text file color
    • Links (internal and external)
    • tags (text and background colors)
  • Grid image display

Custom css

added :

  • ![img-large](link) (or ![[link|img-large]) to display a image larger than the text section width
  • ![img-full-width](link) (or ![[link|img-full-width]) to display a full width image

Plugin

  • Dataview : table re-designed
  • Checklist : font size and color fixed

26 Theme presets

(Obsidian-Harmonic/theme-presets at main · Thiews/Obsidian-Harmonic · GitHub)

Issue fixed in live preview mode

  • fullwidth mode in edit mode
  • collapse indicators don’t show up well