Obsidian CSS Snippets

A collection of custom CSS snippets to enhance the appearance and usability of Obsidian.

📦 Included Snippets

File	Description
RootLevelmdColor.css	Colors root‑level Markdown files (pink by default) – designed to work on top of the Rainbow‑Colored Sidebar plugin.
Font.css	Applies JetBrains Mono to the entire Obsidian UI (sidebar, menus, editor, etc.) with Japanese fallback fonts (Noto Sans JP, etc.).
General Tweak.css	A collection of small quality‑of‑life tweaks: removes link underlines, adjusts heading margins, styles images & callouts, hides metadata with a class, etc.

---

🚀 Installation

1. Locate your snippets folder

   • Open Obsidian → Settings → Appearance → scroll to CSS snippets
   • Click the folder icon to open the snippets directory.

2. Copy the files

   • Copy the .css files from this repository into that folder.

3. Enable snippets

   • Go back to Settings → Appearance → CSS snippets
   • Click Reload snippets if the files don’t appear
   • Toggle each snippet ON.

---

📝 Snippet Details

RootLevelmdColor.css

• Requires the Rainbow‑Colored Sidebar plugin (must be installed & enabled).
• Gives all Markdown files that are directly in your vault root a distinct pink color and bold weight.
• Folders and files inside subfolders keep the rainbow colors assigned by the plugin.

💡 To change the color, edit the --light-pink variable inside the file.

Font.css

• Sets JetBrains Mono as the font for:
  • The whole user interface (tabs, menus, status bar, settings)
  • Editor text (notes)
  • Code blocks and inline code
• Includes Japanese fallbacks (Noto Sans JP, Noto Sans Mono JP, Hiragino Kaku Gothic ProN, Yu Gothic, Meiryo).
• Loads the fonts via Google Fonts (you can remove the @import lines if you have the fonts installed locally).

General Tweak.css

• Removes underline from all links (--link-decoration: none)
• Adds top margin to h1 headings
• Styles <hr> with reduced margins
• Adds borders & rounded corners to images and callouts
• Centers images when the class center-images is used (add cssclasses: center-images in frontmatter)
• Hides metadata properties if the frontmatter contains hideprops
• Other small UI improvements

---

🔧 Customisation

Most values can be changed directly inside each CSS file. Look for CSS variables (--light-pink, font stacks, border widths, etc.) and adjust them to your liking.

---

⚠️ Notes

• Snippets are applied in the order they appear in the Obsidian settings. If two snippets affect the same element, the last enabled one may take precedence (unless !important is used).
• The RootLevelmdColor.css snippet only works if the Rainbow‑Colored Sidebar plugin is active.
• The font snippet uses Google Fonts – an internet connection is required for first‑time loading.

---

📄 License

Feel free to use, modify, and share these snippets. No attribution required.