docs/obsidian-developer/Reference/CSS variables/About styling.md

The Obsidian app uses Cascading Style Sheets (CSS) to control the design of the user interface. CSS is the same markup language used for websites and web-based apps, which means you can find many resources online to help you learn how to use and edit CSS.

Obsidian includes hundreds of [[CSS variables]] that enable consistently beautiful user interfaces.

For plugins

By using the built-in CSS variables for you own custom elements, you can create native-looking user interfaces in your plugin that look beautiful and are compatible with community themes.

styles.css:

.todo-list {
  background-color: var(--background-secondary);
}

For themes and snippets

By overriding the default values for the Obsidian CSS variables, you can create beautiful themes without the need for complex CSS selectors.

theme.css:

.theme-dark {
  --background-primary: #18004F;
  --background-secondary: #220070;
}

.theme-light {
  --background-primary: #ECE4FF;
  --background-secondary: #D9C9FF;
}

To learn more about how to build a theme using CSS variables, refer to [[Build a theme]].