How to install and customize Obsidian themes: a step-by-step guide

Installing an Obsidian community theme takes about thirty seconds. Open Obsidian and navigate to Settings → Appearance → Themes. Click the Browse button to open the community theme store, where you can search by name, scroll through screenshots, and preview themes before installing. When you find a theme you like, click Install and then Use to activate it.

The community store lists every theme submitted to the official Obsidian releases repository. Themes are updated automatically when new versions are published, so you never need to manually re-download a CSS file. If a theme supports both dark and light modes, you can switch between them in Settings → Appearance → Base color scheme.

If you prefer browsing themes outside of Obsidian, use this gallery to search, filter by mode, and preview real CSS before deciding. Every theme page includes the exact install command and a link to the GitHub repository for more details. Once you have found a theme you like, the in-app install is still the fastest path.

Every Obsidian theme defines a set of CSS variables that control how the app looks. These variables cover backgrounds, text colors, accent colors, code styling, sidebar surfaces, border radii, font families, and spacing. When you change a theme, you are swapping out this complete set of variable definitions.

The most commonly customized variables include --background-primary (main editor background), --text-normal (body text color), --interactive-accent (link and button highlight), --font-text (body font family), and --code-background (inline and fenced code background). Knowing these names makes customizing a theme much easier because you can target exactly what you want to change.

Some themes extend the standard variable set with custom tokens for callout types, tag colors, heading levels, or plugin-specific styling. Check the theme documentation or README file on GitHub to see what custom variables the theme author has exposed. This is especially useful for themes with distinctive color systems like AnuPpuccin, Minimal, or Border.

CSS snippets let you override or extend any theme without editing the theme files directly. To get started, open Obsidian and go to Settings → Appearance → CSS snippets. Click the folder icon to open your snippets folder, then create a new .css file. Common starter snippets include custom fonts, rainbow folder colors, modified checkbox styles, or adjusted heading sizes.

A simple example: if you want to change your body font to IBM Plex Sans, create a snippet called fonts.css with the following rule: body { --font-text: "IBM Plex Sans", sans-serif; --font-text-size: 16px; }. Save the file, return to Obsidian, click the refresh icon in the CSS snippets panel, then toggle your snippet on. The change applies immediately across your entire vault.

For more ambitious customizations, use your browser developer tools to inspect Obsidian elements and see what CSS variables and class names are at work. Right-click any element in Obsidian and select Inspect Element. The computed styles panel shows you exactly which variables control that element's appearance. Copy the variable name into your snippet and override it with your preferred value.

Rainbow folders is one of the most requested snippets. It colors each folder in your file explorer a different hue, making navigation faster in large vaults. Most implementations work by cycling through a list of colors and applying them to nested folder levels. Many themes have community-contributed rainbow folder snippets that harmonize with the theme's palette.

Custom checkboxes are another popular customization. Obsidian supports multiple checkbox states: empty, checked, cancelled, question mark, star, exclamation, and more. A snippet can replace the default square checkbox with icons, emoji, or colored circles for each state. This turns a simple task list into a visually scannable dashboard.

Other common snippets include wider editor width for long-form writing, custom heading colors and sizes, minimal scrollbars, centered note titles, collapsible callout headers, and modified tag styling. Start with one snippet at a time and test it with your theme before adding more. Too many snippets can conflict with each other and create unpredictable styling.

If a snippet stops working after an Obsidian update, the most likely cause is a changed class name or CSS variable. Obsidian occasionally updates its internal class names during major releases. Check the Obsidian changelog and the theme repository for any announced breaking changes. You may need to update snippet selectors to match new class names.

When two snippets conflict, the one loaded last in the CSS snippets panel takes precedence. Reorder your snippets by renaming them with numeric prefixes, for example 01-reset.css, 02-fonts.css, 03-rainbow-folders.css. This makes the load order predictable and prevents one snippet from silently overriding another.

If a theme update breaks your customizations, check whether the update changed custom variable names. Some theme authors rename variables during major redesigns. You may need to update snippet references to match the new variable names. Joining the theme's GitHub discussions or Discord is often the fastest way to learn about breaking changes.