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 usage
• •references/theme-coding-conventions.md: CSS/SCSS style guidelines and naming conventions