How I Customised My Obsidian Theme with CSS and Style Settings
- 11/01/2025
Description
This video provides a practical guide for Obsidian users looking to customize their theme using CSS and the Style Settings plugin. The creator walks through their personal journey of theme customization, demonstrating how to combine a flexible base theme (like Minimal) with targeted CSS snippets and external tools to achieve a unique and functional aesthetic, ultimately empowering users to tailor Obsidian to their specific workflow.
Best Ideas
1. Strategic Theme Selection: Instead of trying to deeply modify a less flexible theme, choose a well-supported base theme (e.g., Minimal) that integrates extensively with the Style Settings plugin. This provides a GUI for broad customizations, allowing you to layer custom CSS snippets for fine-tuning.
2. Leveraging PowerToys Color Picker: Utilize Microsoft PowerToys’ Color Picker (`Win + C`) to quickly and precisely grab hex, RGB, or HSL color values from *any* element on your screen. This streamlines the process of replicating or modifying colors for your custom theme.
3. Modular CSS Snippets: Create and manage individual CSS snippets (e.g., for specific link colors, UI element adjustments, or icons) within Obsidian’s `.obsidian/snippets` folder. This modular approach allows for easy toggling, testing, and sharing of customizations without affecting the core theme.
4. Harnessing Theme-Specific Custom Classes: Discover and apply built-in custom CSS classes provided by feature-rich themes (like Minimal’s `table max`, `cards call three/five`) directly within your notes. These classes allow you to dynamically control the layout and appearance of elements like tables and cards without writing any custom CSS.
5. Smart Property Display: Implement a CSS snippet to hide note properties by default, revealing them only when you hover over them. This significantly declutters your note view, offering a cleaner and more focused reading or editing experience.
6. Snippet Folder for Experimentation: Use the `.obsidian/snippets` folder as a safe sandbox to test new CSS snippets found online. You can easily enable or disable them without risking your primary theme or workspace, making it ideal for experimentation.
Tools and Resources
- Software:
- Obsidian (Note-taking application)
- Microsoft PowerToys (Windows utility suite, specifically the Color Picker feature)
- Visual Studio Code (Code editor, for editing CSS snippet files)
- Obsidian Themes:
- Minimal Theme (Recommended base theme)
- LYT Mode Theme (formerly Cybertron Theme, discussed as a starting point)
- AnoPochin Theme (another theme discussed)
- Obsidian Community Plugins:
- Style Settings
- Minimal Theme Settings
- Techniques/Concepts:
- CSS Snippets (Custom `.css` files placed in `.obsidian/snippets`)
- Custom Classes (Theme-provided classes for layout control within notes)
- Color Picking (Using external tools to extract color values)
- Inspecting Elements (Using Obsidian’s developer tools via `Control Shift I` for advanced debugging, though the video aims to reduce reliance on it).
- External Resources:
- GitHub (For downloading Microsoft PowerToys, finding community-contributed snippets like Campano’s cards integration)
- Google Fonts (For free custom fonts to install system-wide)
- Imager (Image hosting service, mentioned for hosting icons used in CSS snippets)
- Creator’s Kofi page (For specific CSS snippets like “hide properties”)
Key Learning Points
- Choose a Customizable Base: The foundation of a personalized theme is selecting a base theme that integrates well with the “Style Settings” plugin, offering extensive graphical customization options.
- Modular CSS for Precision: Learn to create and manage custom CSS snippets in Obsidian’s `.obsidian/snippets` folder for targeted adjustments, such as changing link colors or adding custom icons, allowing for granular control.
- Efficient Color Workflow: Utilize a color picker tool (like PowerToys) to quickly capture color values from any source, streamlining the process of defining or matching your theme’s color palette.
- Leverage Theme Classes for Layout: Understand that many robust themes provide custom CSS classes you can apply directly within your notes (e.g., for tables or card layouts) to manipulate their appearance without writing your own CSS.
- Enhance UI with Snippets: Simple CSS snippets can dramatically improve your Obsidian UI, such as hiding note properties by default to maintain a cleaner interface.
- Install System Fonts: To use custom fonts in Obsidian, you must first download and install them on your operating system.
- Structured Customization Workflow: The most effective way to customize is by combining a flexible base theme, its specific style settings, and your own modular CSS snippets, enabling a powerful and manageable setup.