Color Darker Obsidian Snippets

<h1 align="center">
    Color darker | Obsidian CSS Snippets Repository
</h1>

<p align="center">
  <img src="media\readme_main_photo.png" alt="" />
</p>

<p align="center">
    Obsidian CSS Snippets collection for pages backgrounds and colors customization <br>
    São Carlos, SP - Brazil
</p>

## 🎯 Purpose

Obsidian is a powerful tool with endless customization options. However, for new users, getting started with all the features it offers can be a bit overwhelming. One of the most compelling aspects of Obsidian is its customization capabilities, particularly through the use of CSS Snippets.

This repository aims to provide a wide variety of CSS Snippets to suit the needs of many users. Most of the CSS Snippets currently available online are often limited to a narrow range of colors or styles. The mission here is to break that cycle by offering a broad palette of colors and design options, ensuring that as many users as possible can find something that fits their personal taste and workflow.

## 🔁 Updates and Contributions

This is an ongoing project where I will continuously add new CSS Snippets as I learn and improve my own understanding of Obsidian. I welcome contributions from the community; your involvement will help increase the variety and diversity of the CSS Snippets available here, benefiting everyone who loves to customize their Obsidian experience.

Feel free to submit pull requests or create issues with your ideas, suggestions, or new snippets. Your contributions are invaluable in making this repository a vibrant resource for the entire Obsidian community.

## 📂 CSS Snippets

### 👁️ Check the available snippets

You can view the available CSS Snippets in the [CSS Snippets Directory](PREVIEW.md). This file contains a list of all the snippets, along with a brief description and preview of each one to help you decide which customization suits your needs. You can also download all of them, why not? 😉

### 💻 How to download and activate the snippets

To make the most out of these CSS Snippets, follow the step-by-step guide below to download and activate them in Obsidian:

1. __Download the snippets__
- Go to the __Releases__ section of this repository.
- Download the latest _.zip_ file containing all the CSS snippets.
2. __Extract and move the snippets__
- Open Obsidian and go to Settings (click on the gear icon at the bottom left).
- Navigate to __Appearance__ > __CSS Snippets__.
- Click on the __Open Snippets Folder__ button. This will open the file explorer pointing to the correct folder where Obsidian looks for snippets.
- Extract the contents of the downloaded _.zip_ file directly into this folder. This will ensure all the CSS files are placed in the correct location.
3. __Activate the snippets__
- Return to the __CSS Snippets section__ in Obsidian's settings.
- Click on the __Refresh__ button
- You should see a list of all the snippets you just added.
- Toggle the switch next to each snippet you want to use to make them available.
<br>

If you still facing problems trying to enable css snippets in Obsidian, check [this video](https://www.youtube.com/watch?v=xzkSn0wQ1Pk) I found in the web (or click the image above):

<div align="center">
      <a href="https://youtu.be/xzkSn0wQ1Pk?si=Q2ED_n3K1FZNWtua">
         <img src="media/tb1.jpg" style="width:80%;">
      </a>
</div>

### ✅ Applying the snippets

To apply the snippets, you must use the appropriate `cssclasses` in the properties of your notes. Each snippet has its own `cssclasses` that must be added to the frontmatter for the snippet's styles to take effect.

The `cssclasses` required for each snippet are listed in the [CSS Snippets Directory](PREVIEW.md). Make sure to check this file for the correct `cssclasses` associated with each snippet. Here's how to apply them:
1. Open the note where you want to apply a snippet.
2. At the very top of the note, add or edit the YAML frontmatter to include the cssclasses property.
3. Now, the styles associated with the snippet should be applied.



## 💡 Credits and Inspirations

This repository is a collective effort inspired by many talented members of the Obsidian community and beyond. Below is a list of sources, tools, and individuals whose work has directly or indirectly influenced the creation of these CSS Snippets:
- [Obsidian Vault Template (CyanVoxel)](https://github.com/CyanVoxel/Obsidian-Vault-Template)
- [Obsidian Members Group (Discord Community)](https://discord.com/invite/obsidianmd)
- [Hero Patterns](https://heropatterns.com/)

### 🙏 Special Thanks

I would like to extend a special thanks to **Arthur** (known as `coronelvermelho` on Discord) for his invaluable contributions and ideas throughout the creation of this project. Many of the concepts and inspiration came from our conversations.

<div align="center">
  <a href="https://github.com/CoronelVermelho"><img src="media/arthur.jpeg" height="auto" width="150" style="border-radius:50%"></a>
  <p><strong>Arthur</strong></p>
  <p>(coronelvermelho on Discord)</p>
</div>