kin30528/obsidian-minimal-theme-css-snippets

CSS snippets I've written to tweak Obsidian and harmonize various plugins to suit the Minimal Theme - for fellow hackers.

Replete's Obsidian CSS snippets for Minimal Theme

My working folder of CSS snippets for Obsidian configured with the Minimal Theme. The goal is to visually harmonize the style of various plugins to suit the theme, while also making various visual improvements (proximity, alignment, contrast, higher density) to the Obsidian UI.

Snippets are organized into Editor, UI, Plugin, and User snippets.

Editor Snippets

• Custom Tag Styles
• Editor fixes - gutter component alignments, general editor fixes, less visible indentation guide
• Frontmatter tweaks (styling, fixes for editor syntax highlighter plugin)
• Table tweaks (WIP)
• Top Fade - Remove harsh edge of content when using one of the positional Tab Header snippets
• Typography fixes - alignment fixes for editor, headings, quotes etc (WIP)

UI snippets:

• Collapsible Right Headers - Hide panel headers until hover in the right sidebar
  
• Compact File Explorer with chevrons on right - also makes attachment folders less visible
  
• Compact Tab Header - Compact icons in toolbar, also fixes Commander plugin icon colours
  
• Compact Tabs - Compact firefox-style pill tabs, better for smaller screens
  
• Compact Tabs (classic) - Compact classic tabs, better for smaller screens
  
• Custom Separators - user-configurable CSS for separators, works well with File Explorer Custom Sorting plugin
  
• Custom Separators (gradient) - user-configurable CSS for separators, works well with File Explorer Custom Sorting plugin
  
• Floating Tab Header - Save space with this float right leaf tab header (show navigation, breadcrumb on hover/focus)
  
• Floating Tab Header (mini) - Save even more space with this float right leaf tab header (show navigation, breadcrumb on hover/focus)
  
• Hide Ribbon
• Hide Vault Title in Sidebar
• Resize Handles - prefer more muted theme colours
• Status bar tweaks - more visible text on dark theme
• Tab Header on bottom - Move the tab title bar to the bottom, vertical statusbar when right sidedock closed
• Translucent Tab Header - Classic style tab header showing blurred document content underneath

User Snippets:

• Daily Note styles (WIP)
• Themed accents - I've overridden the accent colour for each minimal theme subtheme

Plugin snippets

• Calendar - Compact, weekend, day styles, colours
  

• CardBoard - WIP: Compact

• Checklist (Ultra compact) - Compact view (for tag mode users)
  

• Custom Frames - more compact

• Custom Frames (Duotone) - blend custom frames content in with theme until hover

• Database Folder (Compact) - compact view
  

• Day Planner - I'm using my own fork of this abandoned plugin for more features but the styles here are not dependent on fork changes, yes its still buggy
  

• Make.MD Contexts - Compact Make.md Contexts, tidier layout
  

• Make.MD Contexts: Auto-hide properties - Hide file properties until hover
  

• Make.MD Contexts: Duotone Banner - Makes all banner images duotone to match minimal theme
  

• Make.MD Contexts: Gradient Banner Fade images to background with a gradient
  

• MySnippets - make menu wider and fix button style/order
  

• Obsidian Buttons plugin - alignments

• Outline - chevron on right, compact
  

• Quiet Outline - Remove rainbow colours to theme colors, re-arrange layout

• Task progressbars - alignments and colours

Deprecated/Abandoned snippets:

• Heatmap Calendar screenshot - colours and text styles for habit type use-case (abandoned)
• Full Calendar (abandoned) - pretty hacky due to limits of styling hooks (I stopped using this plugin)
• Make.MD Banner (deprecated) - Mostly banner cssclass overrides, gradient, blur, tall, short etc (deprecated, see Make.MD Contexts)
• Make.MD Compact Spaces - use less space, like Compact File Explorer snippet (abandoned)

My environment

• MacOS 13.3.1, Mobile
• Obsidian v1.1.16 (installer 1.1.15, if installer < 1.1.8 reinstall from official installer to update electron for updated CSS features like :has() - homebrew update didn't work for this version)
• Minimal Theme v6.3.2
• Enabled plugins: ['templater-obsidian', 'dataview', 'calendar', 'cmdr', 'periodic-notes', 'obsidian-hide-sidebars-when-narrow', 'hotkeysplus-obsidian', 'obsidian-minimal-settings', 'obsidian-custom-frames', 'open-vscode', 'quickadd', 'mysnippets-plugin', 'obsidian-day-planner', 'dbfolder', 'no-dupe-leaves', 'custom-sort', 'obsidian-icon-folder', 'omnisearch', 'auto-class', 'make-md', 'nldates-obsidian', 'obsidian-attachment-name-formatting', 'folder-note-plugin', 'obsidian-hover-editor', 'file-explorer-note-count', 'obsidian-quiet-outline', 'cm-editor-syntax-highlight-obsidian', 'obsidian-toggle-list', 'obsidian-excalidraw-plugin', 'obsidian-task-progress-bar', 'obsidian-custom-attachment-location', 'obsidian-smart-typography', 'obsidian-tasks-plugin', 'open-in-new-tab', 'chatgpt-md', 'obsidian-style-settings']

[...new Set(app.plugins.enabledPlugins)]

How to use

1. Clone/fork/unzip into <your vault location>/.obsidian/snippets
2. Install the MySnippets community plugin and activate snippets individually
3. Use what you like, dupe + hack what you don't
4. Send me cool stuff

TODO:

• Fix the weird list item alignments that vary depending on file length
• Test/fix for Mobile Obsidian (likely near future)
• Fix some colour inconsistencies across light/dark themes
• Test/fix for Windows (no fixes needed at time)
• Test/fix for Linux (no fixes needed at time)

Versions / updates

This repo is updated frequently as I work on my own vault. I aim to keep my environment up to date. When a new Obsidian version breaks things (which hasn't happened yet), I'll tag a release for whatever the last good Obsidian or Minimal Theme version was before it broke, and subsequent commits will be fixes for the current version.