Simple Colored Folder

Automagically add color to roots folders, and customize them with Style Settings.

📦 Features

• Automatically applies variables & colors to root-level folders in your vault
• Customizable colors for each folder through style settings
• Custom styling options through template
• Folder style changes update in real-time
• Supports both light & dark themes
• Support for renaming folder while keeping styling

Warning

This plugin requires the Style Settings plugin to customize folder colors. You'll see a warning if Style Settings isn't installed.

⚙️ Usage

1. Install the plugin
2. Make sure you also have the Style Settings installed & enabled.
3. Access Style settings to customize your folder color.
4. Under the "Simple Colored folder" section, you can change colors for each root folder.

🎨 Configuration

In the plugin settings, you can customize :

• Export to a css snippets (instead of inject into the DOM)¹
• Default colors (when creating new folders)
• Folder name prefix for CSS variable
• Custom CSS and Style Settings templates

Note

You can see some example of css template here

📥 Installation

• From Obsidian's community plugins
• Using BRAT with https://github.com/Mara-Li/obsidian-simple-colored-folder
• From the release page:
  • Download the latest release
  • Unzip simple-colored-folder.zip in .obsidian/plugins/ path
  • In Obsidian settings, reload the plugin
  • Enable the plugin

🎼 Languages

• English
• French

To add a translation:

1. Fork the repository
2. Add the translation in the src/i18n/locales folder with the name of the language (ex: fr.json).
   • You can get your locale language from Obsidian using obsidian translation or using the commands (in templater for example) : <% tp.obsidian.moment.locale() %>
   • Copy the content of the en.json file in the new file
   • Translate the content
3. Edit i18n/i18next.ts :
   • Add import * as <lang> from "./locales/<lang>.json";
   • Edit the ressource part with adding : <lang> : {translation: <lang>}

---

1. Some styles can be broken while disabling the plugin, as it injects the folder path into tree-item.nav-folder to improve performance, instead to use :has. ↩︎