Obsidian Plugin Styling

This skill helps you write CSS that makes your plugin look native in any Obsidian theme. It covers the variable system, stylesheet delivery, dark/light adaptation, scoping strategies, and mobile constraints.

When to Use This Skill

• Writing or refactoring CSS for an Obsidian plugin
• Making a plugin respect the user's active theme and color scheme
• Injecting styles dynamically at runtime
• Debugging style leaks or conflicts with other plugins
• Optimizing UI for mobile (phones and tablets)

Overview

Obsidian exposes 400+ CSS custom properties. Using them keeps your plugin visually consistent and lets community themes style your UI automatically. A plugin can ship static CSS via styles.css or append a <style> tag at runtime. Either way, your selectors should be scoped and theme-aware.

CSS Variables Reference