| name | obsidian-dev-themes |
| description | CSS/SCSS development patterns for Obsidian themes. Load when working with theme.css, SCSS variables, or CSS selectors. |
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.
When to Use
Load this skill when:
- 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
- Following CSS/SCSS coding conventions
Core Rules
- Use Obsidian CSS Variables: Always prefer Obsidian's built-in CSS variables over hardcoded values
- Follow BEM Methodology: Use Block-Element-Modifier naming for CSS classes
- 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
