tomevault-io 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
Source: Moyf/better-links — distributed by TomeVault.