How can I create a CSS snippet for Obsidian?

Creating a CSS snippet for Obsidian is a straightforward way to customize the appearance of your notes. Here's how you can do it:

1. Locate the Snippets Folder:

- Obsidian stores CSS snippets in a specific folder within your vault. To find it, go to "Settings" (the gear icon in the bottom left corner), then navigate to "Appearance." Under the "CSS snippets" section, click on the folder icon next to "Open snippets folder." This will open the folder in your system's file explorer.

2. Create a New CSS File:

- Inside the snippets folder, create a new file with a .css extension. For example, you could name it my-custom-styles.css. The name is arbitrary, but it should be descriptive.

3. Write Your CSS Code:

- Open the newly created CSS file in a text editor (like VS Code, Sublime Text, or even Notepad). Here, you'll write your CSS rules to modify Obsidian's appearance. For example, to change the color of headers, you might use:

h1 {
  color: #007bff; / Example: Blue color /
}
h2 {
  color: #28a745; / Example: Green color /
}

- You can target various elements using CSS selectors. Use your browser's developer tools (right-click on an element in Obsidian and select "Inspect") to identify the specific elements and classes you want to style.

4. Enable the Snippet in Obsidian:

- Go back to Obsidian's "Appearance" settings. You should see your new CSS file listed under "CSS snippets." Click the toggle switch next to your snippet's name to enable it. The changes should take effect immediately.

5. Experiment and Refine:

- You can edit your CSS file and see the changes reflected in Obsidian in real-time. This allows you to experiment and refine your styles until you achieve the desired look.

6. Example Snippet for a Dark Theme:

- Here's a more comprehensive example that adjusts the background and text colors for a dark theme:

body {
  background-color: #1e1e1e; / Dark background /
  color: #f0f0f0; / Light text /
}
.markdown-preview-view {
  background-color: #282828; / Darker preview background /
}
a {
  color: #61afef; / Light blue links /
}

By following these steps, you can create and manage CSS snippets to customize Obsidian's appearance to your liking. Remember to save your CSS file after making changes and enable the snippet in Obsidian's settings.

Learn more about this