A collection of custom CSS snippets for Obsidian, designed to enhance your note-taking experience.
- 00 - Sleek Zen
- 01 - Zen
- 02 - Sidebar Folder Colors
- 03 - Fat Sidebar Folders
- 04 - Custom Heading Colors
- 05 - Fat Heading
- 06 - Text Formatting
- 07 - Hover Properties
- 08 - Translucent View
- 09 - Hide Scrollbar
- 10 - Solid Black Background
File: 00 - sleek-zen.css
Ultimate Sleek Zen Mode - "The cleanest workspace possible. Everything is there, nothing is visible."
- Top Tab Bar: Collapses to invisible trigger area (6px), expands on hover to 40px
- Left Sidebar: Collapses to 12px trigger, expands to 350px on hover
- Right Sidebar: Collapses to 12px trigger, expands to 350px on hover
- Ribbon: Fades to opacity 0, visible on hover
- Status Bar: Hidden (opacity 0), visible on hover
- Title Bar: Hidden, visible on hover
- View Header: Hidden, visible on hover
- Internal Controls: Sidebar buttons and headers collapse to 2px, expand to 40px
File: 01 - zen.css
Simpler Zen Mode implementation - Hide UI elements and show them on hover.
File: 02 - sidebar-folder-colors.css
Colored sidebar items by CyanVoxel v2.0.0. Modified for subtle muted contrast spectrum (prefixes 00-15) and grays (93-99).
- 00: Muted Red -
rgba(170, 70, 80, 0.95) - 01: Muted Crimson -
rgba(185, 85, 95, 0.95) - 02: Muted Red-Orange -
rgba(200, 100, 70, 0.95) - 03: Muted Orange -
rgba(215, 120, 60, 0.95) - 04: Muted Amber -
rgba(220, 150, 70, 0.95) - 05: Muted Gold -
rgba(210, 170, 80, 0.95) - 06: Muted Yellow-Green -
rgba(180, 180, 90, 0.95) - 07: Muted Lime Green -
rgba(150, 190, 100, 0.95) - 08: Muted Emerald Green -
rgba(120, 180, 130, 0.95) - 09: Muted Teal -
rgba(90, 170, 160, 0.95) - 10: Muted Sky Blue -
rgba(80, 140, 170, 0.95) - 11: Muted Blue -
rgba(70, 110, 180, 0.95) - 12: Muted Indigo -
rgba(90, 90, 190, 0.95) - 13: Muted Violet -
rgba(120, 80, 180, 0.95) - 14: Muted Magenta -
rgba(150, 70, 170, 0.95) - 15: Muted Rose -
rgba(170, 70, 140, 0.95)
- 93: Very Pale Cool Gray -
rgba(180, 185, 190, 0.95)(most visible) - 94-98: Gradually decreasing visibility
- 99: Mid Cool Gray -
rgba(120, 125, 130, 0.65)(least visible)
Folders with prefixes 00 through 15 and 93 through 99 will be automatically colored based on their prefix.
File: 03 - fat-sidebar-folders.css
Modified version of CyanVoxel's colored sidebar snippets with subtle button/chip layout styling.
File: 04 - custom-heading-colors.css
Custom heading colors with subtle muted contrast for both reading view and live preview.
- H1: Dusty Blue -
rgba(122, 165, 194, 0.9) - H2: Muted Sage Green -
rgba(143, 184, 159, 0.9) - H3: Soft Ochre/Amber -
rgba(212, 160, 99, 0.9) - H4: Gentle Lavender -
rgba(164, 140, 191, 0.9) - H5: Rose Dust -
rgba(196, 132, 160, 0.9) - H6: Subtle Teal -
rgba(136, 199, 197, 0.9)
File: 05 - fatheading.css
Boxed headings effect with structure, collapse icons, and visual styling. Use with custom text color snippet.
File: 06 - text-formatting.css
Custom colors for italic, bold, strikethrough, and highlight text formatting.
- Italic: Muted Green -
#9ACD95 - Bold: Dusty Rose/Mauve -
#DE819C(font-weight: 700) - Bold + Italic: Dusty Rose/Mauve -
#DE819C(both styles applied) - Strikethrough: Muted Mauve -
#A17087(opacity: 0.75) - Highlight: Muted Pastel Green -
rgba(160, 190, 170, 0.45)
File: 07 - hover-properties.css
Hide properties panel and show on hover with smooth transitions.
- Properties panel collapses to 2.7rem height
- Reduced opacity (0.6) when collapsed
- Smooth transitions (250ms/300ms)
- Works in both edit and preview mode
- Disables Minimal theme table hover effect
File: 08 - translucent-view.css
Translucent view for Hyprland compatibility - "Glassy look for tiled window managers."
- Transparent main window background
- Translucent panes and splits
- Backdrop blur effects (5px)
- Adaptive to light/dark mode using
--mono-rgb-0 - Special handling for modals/popovers (higher opacity for readability)
File: 09 - hide-scrollbar.css
Completely hides all scrollbars across the entire app (always invisible).
- Uses webkit pseudo-elements for Obsidian/Electron
- Hides track, thumb, and corner
- Sets width and height to 0
- Forces transparent background
- Overrides body scrollbar variables
File: 10 - solid-black-bg.css
Pure black backgrounds for Hyprland compositor takeover - "Let the compositor handle all transparency."
- Forces everything to pure black (
#000000) - Overrides all background CSS variables
- Affects app container, workspace, sidebars, editor, modals
- Fullscreen mode compatible