%% ----- Badges ----- %%     %% ----- Badges ----- %% %% ----- Do not edit this section ----- %% # Harmonic Repository: [GitHub](https://github.com/Thiews/Obsidian-Harmonic) Designed by: [[Thiews]] Modes: [[Dark-mode themes|dark]], [[Light-mode themes|light]]  %% ----- Do not edit anything above this line ----- %% %% Does the repository or author have any sponsoring links? Uncomment the next line and add them to the author's note. If they don't, please delete the placeholder tag: #placeholder/author %% %% ![[Thiews#Sponsor this author]] %% ## Features - [[Themes with Friendly Settings|Friendly settings]]: Supports the [[obsidian-style-settings|Style Settings]] plugin ## Customization Options (Style Settings Plugin) **1. Global customization (Accent color, Logo OR title, navigation folder style, icon style...)**: - Activate live preview and edit mode theme customization - **Global style (accent color, backgrounds, icons, title bar style)**: - Accent color - Colorful background for pages - Icons: Activate minimal icons - Title bar style of main page - **Choose a logo OR a title for your obsidian**: - Your obsidian title: Put the title in quotation marks (see default parameter) - Color accent for your obsidian title: Display the title with the bold and italic accent color (menu > Make pages pop) - Your obsidian logo (url): Put the url syntax like in default - Invert logo colors in dark mode: B&W image works well - **Customize the navigation folder panel**: - Alternative menu styles: Choose diffent styles for the left and right sidebars - Font of navigation folders: Choose diffent styles for the left and right sidebars - Font size of navigation folder: Select a font size - Dark navivation folder sidebar (light theme only) - Bold and italic color for active file (color to choose in Make pages pop menu) **2. Focus mode**: - Activate frameless mode - Hide vertical menu of the left sidebar - Hide tab header buttons - Hide action buttons - Hide file name in main window - Hide tooltip - Hide scrollbar - Hide instructions - Hide status bar - Edit button: Create a button to edit and preview - Writing focus: Hightligh the paragraph you are writing, faint the others (edit mode) - Opacity of the fainted text in writing focus mode: Change the Opacity of the fainted text **3. Make pages pop (bold and italic accentuation, image, blockquote, checkboxes, links, outline)**: - **Customize bold and italic**: - Bold and italic accentuation: Make bold and italic pop with an other color - Bold and italic hue: Change the hue of the accent color (step -> 45 degrees) - Use this color to display tag - **Customize images**: - Border radius for images - To make rounded images - Choose the size of rounded image: Choose diffent styles for the left and right sidebars - Shadow for images - Black and white for images - Display a sequence of images as grid - **Customize blockquote**: - Display background and border for quote - Quotation mark for quote - Serif font for quote - Center text for quote - Brackets for quote (works in combination with text serif, not the others) - **Customize checkbox style**: - Choose the style of checkboxes: Choose diffent styles for the left and right sidebars - **External link style**: - Display icon for external links - External link underline width - Text color of external links - Border bottom color - **Internal link style**: - Display icon for internal links - Internal link underline width - Text color of internal links - Border bottom color - **Outlines for lists**: - Outline for list: Activate outlines for list **4. Page settings (line width, fullwidth mode, paragraph offset)**: - Line width: Define your line width - Full width mode: Activate full width - Paragraph offset: Change your paragraph offset **5. Fonts (Preview mode, edit mode, monospace, titles)**: - **Font pre-installed with the theme**: IA Writer Mono V, Ia Writer Quattro V and Pre-installed google fonts - Anton, Avenir Next Cyr, Cabin, Dosis, Fjalla one, Heebo, Hind, IBM Plex Sans, Josefin Sans, Jost, Kalam, Lato, Libre Baskerville, Lora, Metropolis, Montserrat, Mukta, Mulish, Noto Sans, Nunito, Nunito Sans, Open Sans, Oswald, Outfit, Oxygen, Poppins, Quicksand, Readex Pro, Roboto, "Source Sans 3", Source Sans Pro, Work Sans, Zen kaku Gothic new - **Choose your fonts**: - Text font: Font used for paragraph in preview mode - Editor font: Font used for paragraph in edit mode - Monospace font: Font used for for code blocks and front matter - Header font: Font used for titles **6. Typography**: - Body font size: Font size in px of paragraphs - Body font size for phone: Font size in px of paragraphs for phones - Body font weight: Font weight of paragraphs - Letter spacing for paragraph (preview mode) - Letter spacing for paragraph (editor mode) - Body line height: Line height of the main text **7. Headings**: - Letter spacing for titles: Letter spacing Used for every titles - Accent color title: Choose the accent color for every titles - Bold and italic color for titles - Collapse indicator for titles: Hide collapse indicators - Add a line under titles - Hx activate: activate Hx in titles - Color of Hx: Apply color of bold-italic for Hx - **Level 1 Headings**: - H1 font size: Accepts any CSS font-size value - H1 font weight: Accepts numbers representing the CSS font-weight - H1 font style: Accepts normal or italic representing the CSS font-style - H1 font color - Title text align - **Level 2 Headings**: - H2 font size: Accepts any CSS font-size value - H2 font weight: Accepts numbers representing the CSS font-weight - H2 font style: Accepts normal or italic representing the CSS font-style - H2 font color - Title text align - **Level 3 Headings**: - H3 font size: Accepts any CSS font-size value - H3 font weight: Accepts numbers representing the CSS font-weight - H3 font style: Accepts normal or italic representing the CSS font-style - H3 font color - Title text align - **Level 4 Headings**: - H4 font size: Accepts any CSS font-size value - H4 font weight: Accepts numbers representing the CSS font-weight - H4 font style: Accepts normal or italic representing the CSS font-style - H4 font color - Title text align - **Level 5 Headings**: - H5 font size: Accepts any CSS font-size value - H5 font weight: Accepts numbers representing the CSS font-weight - H5 font style: Accepts normal or italic representing the CSS font-style - H5 font color - Title text align - **Level 6 Headings**: - H6 font size: Accepts any CSS font-size value - H6 font weight: Accepts numbers representing the CSS font-weight - H6 font style: Accepts normal or italic representing the CSS font-style - H6 font color - Title text align **8. More options (‼️ Overwites previous option choices and can break color harmony)**: If you really need it ! - Activate more options - Main panel color - Sidebar color - Text color - Navigation folder text color - Navigation file text color - Active navigation file text color - Active navigation file background color - Bold and italic color (desactivate bold and italic accent in Make your page pop) - Hx color (for title) - Internal link color - External link color - Tag color - Tag background color **→ Presets**: Available at https://github.com/Thiews/Obsidian-Harmonic > theme-presets **⭐️ Credits**: Made by @Thiews to be shared. Support my work at buymeacoffee.com/thiews %% Hub footer: Please don't edit anything below this line %% # This note in GitHub <span class="git-footer">[Edit In GitHub](https://github.dev/obsidian-community/obsidian-hub/blob/main/02%20-%20Community%20Expansions/02.05%20All%20Community%20Expansions/Themes/Harmonic.md "git-hub-edit-note") | [Copy this note](https://raw.githubusercontent.com/obsidian-community/obsidian-hub/main/02%20-%20Community%20Expansions/02.05%20All%20Community%20Expansions/Themes/Harmonic.md "git-hub-copy-note") | [Download this vault](https://github.com/obsidian-community/obsidian-hub/archive/refs/heads/main.zip "git-hub-download-vault") </span>