README file from
Github
🌈 Colorful Folders for Obsidian
Transform your Obsidian file explorer from a dull list into a vibrant, organized, and high-performance visual dashboard.
Colorful Folders automatically applies premium color palettes, smart icons, and structural intelligence to your vault. Whether you prefer a strictly organized, monochromatic workspace or a neon-glowing cyberpunk aesthetic, this plugin makes navigation intuitive and your workspace absolutely beautiful.
What's New in Colorful Folders
🚀 5.0.6 - Colored Tags & Outline Sync, Silky-Smooth Scrolling & Instant Note Opening
🏷️ 1. Colored Tags in the Sidebar
- Tags Match Your Folders: Tags in your sidebar Tag Pane now automatically match your folder colors or custom tag rules!
- Glow & Badges: Selected tags light up with a soft glow, and count badges adopt matching colored background pills.
- Consistent Everywhere: Your tag colors stay in sync across the sidebar, Live Preview, and Reading View.
📑 2. Outline (Table of Contents) & Heading Colors
- Vibrant Outline View: Your document outline table of contents now displays headings in beautiful colors from your active palette.
- Colored Headings in Notes: You can now colorize headings (H1 to H6) inside your notes to match your vault's color scheme.
✨ Core Features
🎨 Vivid Color & Visual Hierarchy
- Color-Coding Hierarchy: Automatically assigns beautiful, distinct colors to top-level and nested folders.
- Visual Wayfinding: Glowing connector lines create a clear "breadcrumb trail" to your currently active file.
- Smart Rainbow Logic & Text: Cycle files through your palette, enable custom rainbow text gradients on individual items, or use the Adaptive Heatmap to sync colors.
- Curated Palettes: Premium built-in palettes (including Tailwind UI, Tailwind UI Dark, Cyberpunk, Nord, and Pastel).
- Minimalist Modes: Force subfolders to inherit parent colors, or use Outline Only Mode to remove background tints while keeping bright connecting lines.
🤖 Smart Iconography & Custom Packs
- Live Animated Icons: Real-time animated SVG icons in your sidebar that play smoothly without freezing while scrolling and inherit custom folder colors.
- Smart Auto-Icons: Automatically matches relevant icons to your folder and file names (e.g., Journal -> 📅, Finance -> 💰).
- Manual Override Priority: Pin your preferred icons on any item to permanently override automatic suggestions.
- Custom & Offline Icon Packs: Built-in offline libraries (Lucide, FontAwesome, Tabler, Material, Simple Icons) plus custom pack support via
.obsidian/icons. - Open & Closed States: Set distinct icons for expanded versus collapsed folders globally or per folder.
- Pixel-Perfect Alignment: All icons are automatically standardized and vertically centered with clean 18px baseline sizing.
📁 Advanced Customization & Typography
- Right-Click WYSIWYG Menu: Select "Set Custom File Style" on any item to easily override its color, icon, border radius, and text formatting.
- Custom Border Radius: Adjust border-radius per folder or file using a smooth range slider in the style modal.
- Advanced Typography: Make key projects pop with bold, italic, custom text colors, and rainbow gradients.
- Smart Inheritance: Force a specific style down an entire folder tree with a single click.
📐 Organization & Appearance Controls
- Toggle Collapse Indicators: Easily show or hide folder collapse arrows in the file explorer via settings.
- Section Dividers: Group files with vertical visual dividers supporting glassmorphic popovers and custom line styles.
- Dynamic Item Counters: Display recursive statistics showing total folder and file counts.
- Exclusion Lists: Keep utility directories (like
attachmentsortemplates) standard and unaffected.
🎨 Synchronization & Ecosystem
- Tag Color Sync: Automatically color tags matching styled folder names (e.g., styling "Work" styles
#Work) across Reading Mode, Live Preview, and the Sidebar Tag Pane. - Custom Tag Rules: Manually map specific tags to any hex color or folder path (e.g.,
garden/plant = #5ebd8e). - Outline & Heading Sync: Match the Outline Pane table of contents and in-note headings (H1–H6) to your active color palette with glow highlights.
- Graph View Sync: Folder colors sync directly into Obsidian's built-in Graph View as color groups.
- Notebook Navigator Integration: Cleanly isolated selector styles and virtual container exclusions ensure zero cold-start loading clashes with Notebook Navigator.
🕵️ Stealth & Privacy Engine
- Visual Privacy: Hide any file or folder from the sidebar instantly via context menu.
- Ghost Mode: Toggle semi-transparent viewing of hidden items with a sleek blur effect.
- Password Protection: Secure privacy settings with a custom modal.
🛡️ Stability & Performance Engine
- Zero-DOM Engine: High-performance
adoptedStyleSheetsengine with zero GPU lag, even in 10,000+ note vaults. - Security Hardened: Fully sanitized SVG DOM parsing and escaped CSS attribute selectors for maximum vault safety.
- Cross-Platform: Flawless performance across Windows, macOS, Linux, Android, and iOS.
- Strict Network Privacy: 100% private offline styling engine with zero user data transmission.
🛠️ Installation
Via Obsidian Community Plugins (Official & Recommended)
- Open Obsidian and navigate to Settings > Community plugins.
- Click Browse next to Community plugins.
- Search for Colorful Folders.
- Click Install, then click Enable.
Via BRAT (For Beta Releases)
Want to test the absolute latest features before they hit the store?
- Install the BRAT plugin from the Obsidian Community gallery.
- Go to Settings > BRAT > Beta Plugin List.
- Click Add Beta plugin.
- Paste the repository URL:
https://github.com/RohitNahar-Offical/colorful-folders-obsidian - Click Add Plugin.
- Enable Colorful Folders in your Community plugins tab.
💡 Pro Tip
Access all styling configurations by navigating to Settings > Colorful Folders. Look for the large "💡 Pro Tip" banner at the top of the settings page to discover hidden tricks, including how to set up custom overriding colors!
👨💻 Developer Documentation
Looking to understand the internal architecture, contribute features, or debug the styling engine? Check out our comprehensive technical guides:
- Master Documentation Index: The entry point for all technical documentation and subsystem guides.
- Internal Engine Architecture: Deep dive into the Zero-DOM rendering pipeline and logic flow.
- Codebase Subsystems Guide: Comprehensive guide to all source files and services.
- Customization Guide: Advanced CSS snippets and styling overrides.
Developed with ❤️ by ROHIT-NAHAR