obsidian-dev-themes

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