tomevault-io Obsidian Theme Development Skill
This skill provides patterns and rules for developing Obsidian themes, focusing on CSS/SCSS development, styling conventions, and theme-specific coding practices.
Purpose
To ensure consistent theme development, proper CSS organization, and adherence to Obsidian's theming patterns and CSS variable usage.
Scope
This skill covers:
- Writing or modifying CSS/SCSS for
theme.css - Working with Obsidian's CSS variables and theming system
- Implementing responsive design or dark/light mode support
- Debugging CSS layout or styling issues
- CSS/SCSS coding conventions for Obsidian themes
Core Rules
- Use Obsidian CSS Variables: Always prefer Obsidian's built-in CSS variables over hardcoded values
- Consistent Naming: Use a consistent naming convention (BEM, prefixed classes, or other - see conventions file)
- Mobile-First: Consider mobile layouts and responsive design
- Dark/Light Mode Support: Test themes in both light and dark modes
- Performance: Minimize CSS complexity and avoid expensive selectors
Bundled Resources
references/theme-best-practices.md: Essential CSS patterns and Obsidian variable usagereferences/theme-coding-conventions.md: CSS/SCSS style guidelines and naming conventions
Converted and distributed by TomeVault — claim your Tome and manage your conversions.