# Obsidian Theme Dev

> CSS/SCSS development patterns for Obsidian themes. Load when working with theme.css, SCSS variables, or CSS selectors.

- Skill: `davidvkimball/obsidian-theme-dev` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add davidvkimball/obsidian-theme-dev`
- Raw SKILL.md: https://api.skillmd.com/api/skills/davidvkimball/obsidian-theme-dev/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: davidvkimball (https://skillmd.com/u/davidvkimball)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/davidvkimball/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.

## 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