#
CSS snippets
Learn how to modify aspects of the Obsidian application's appearance without needing to build a theme.
If you're looking for guidance on handling CSS for Obsidian Publish, be sure to review Customize your site.
CSS is a language that controls how HTML looks. By adding CSS snippets, you can change parts of the Obsidian user interface, like the size and color of headings. Obsidian has CSS variables that help you customise the interface easily.
Obsidian looks for CSS snippets inside the vault's configuration folder.
#
Adding a snippet
To add a CSS snippet on Desktop , follow these steps:
- Open Settings.
- Under Appearance → CSS snippets, select Open snippets folder (
).
- In the snippets folder, create a CSS file that contains your snippet.
- In Obsidian, under Appearance → CSS snippets, select Reload snippets (
) to see the snippet in the list.
- Enable snippet by clicking the toggle.
To add a CSS snippet on Mobile/Tablet , you can follow these steps:
- Open a file manager and find your vault. You can check the vault’s location in Manage vaults… by tapping your vault and looking at the path.
- Open the Configuration folder and create a folder called
snippets
if it doesn’t exist. - Add your CSS snippet to this folder.
- Open Obsidian's Settings (
).
- Select Appearance on the left.
- Scroll down to the CSS snippets section.
- Tap Reload snippets (
) to refresh the list.
- Tap the toggle to enable the snippet.
Alternately, you can
- Sync any changes in with your syncing service.
- Use a community plugin to create a snippet from within Obsidian.
Once enabled, Obsidian will automatically detect changes to CSS snippets and apply them when you save the file.
You don’t need to restart Obsidian for changes to take effect. However, you might need to use the Command palette command to Reload Obsidian without saving to see changes in the current theme or note.
#
Writing CSS for Obsidian
Obsidian offers several methods that make writing CSS easier and more powerful.
It has a host of CSS variables to easily modify parts of Obsidian and a built-in property type to change the appearance of one or several notes.
Variables
Create a file called headers.css
with the following content to change the colors of the six heading levels to a rainbow:
body {
--h1-color: red;
--h2-color: orange;
--h3-color: yellow;
--h4-color: green;
--h5-color: blue;
--h6-color: pink;
}
CSSclasses
With a property name cssclasses
with any value to make one or more notes look different from others.
CSS:
.no-inline .inline-title {
display: none;
}
YAML/Properties:
cssclasses:
- homepage
This hides the inline title from any note with this property and value.
To ensure that the CSS file is valid and formatted correctly, we advise creating and editing it with a program like Visual Studio Code or Sublime Text, as invalid CSS will not work.
#
Learn more
- If you're new to CSS, check out Learn to style HTML using CSS by Mozilla.
- For more information about styling Obsidian, see: