Obsidian Theme Dev

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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.