Obsidian CSS Snippets

A collection of custom CSS snippets for Obsidian, designed to enhance your note-taking experience.

Table of Contents

1. 00 - Sleek Zen
2. 01 - Zen
3. 02 - Sidebar Folder Colors
4. 03 - Fat Sidebar Folders
5. 04 - Custom Heading Colors
6. 05 - Fat Heading
7. 06 - Text Formatting
8. 07 - Hover Properties
9. 08 - Translucent View
10. 09 - Hide Scrollbar
11. 10 - Solid Black Background

---

00 - Sleek Zen

File: 00 - sleek-zen.css

Description

Ultimate Sleek Zen Mode - "The cleanest workspace possible. Everything is there, nothing is visible."

Features

• 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

---

01 - Zen

File: 01 - zen.css

Description

Simpler Zen Mode implementation - Hide UI elements and show them on hover.

---

02 - Sidebar Folder Colors

File: 02 - sidebar-folder-colors.css

Description

Colored sidebar items by CyanVoxel v2.0.0. Modified for subtle muted contrast spectrum (prefixes 00-15) and grays (93-99).

Color Spectrum (00-15)

• 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)

Gray Scale (93-99)

• 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)

Usage

Folders with prefixes 00 through 15 and 93 through 99 will be automatically colored based on their prefix.

---

03 - Fat Sidebar Folders

File: 03 - fat-sidebar-folders.css

Description

Modified version of CyanVoxel's colored sidebar snippets with subtle button/chip layout styling.

---

04 - Custom Heading Colors

File: 04 - custom-heading-colors.css

Description

Custom heading colors with subtle muted contrast for both reading view and live preview.

Heading Color Scheme

• 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)

---

05 - Fat Heading

File: 05 - fatheading.css

Description

Boxed headings effect with structure, collapse icons, and visual styling. Use with custom text color snippet.

---

06 - Text Formatting

File: 06 - text-formatting.css

Description

Custom colors for italic, bold, strikethrough, and highlight text formatting.

Color Scheme

• 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)

---

07 - Hover Properties

File: 07 - hover-properties.css

Description

Hide properties panel and show on hover with smooth transitions.

Features

• 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

---

08 - Translucent View

File: 08 - translucent-view.css

Description

Translucent view for Hyprland compatibility - "Glassy look for tiled window managers."

Features

• 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)

---

09 - Hide Scrollbar

File: 09 - hide-scrollbar.css

Description

Completely hides all scrollbars across the entire app (always invisible).

Features

• 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

---

10 - Solid Black Background

File: 10 - solid-black-bg.css

Description

Pure black backgrounds for Hyprland compositor takeover - "Let the compositor handle all transparency."

Features

• Forces everything to pure black (#000000)
• Overrides all background CSS variables
• Affects app container, workspace, sidebars, editor, modals
• Fullscreen mode compatible