From 6898e3a973e4b000f4743cba0dcac38c03b51960 Mon Sep 17 00:00:00 2001
From: Max Litruv Boonzaayer <litruv@gmail.com>
Date: Mon, 10 Feb 2025 14:58:16 +1100
Subject: [PATCH] Add color property to folder icons in DOMService for improved
 styling

---
 example.index.json | 1 +
 index.js           | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/example.index.json b/example.index.json
index 8c9e6b2..b66accf 100644
--- a/example.index.json
+++ b/example.index.json
@@ -14,6 +14,7 @@
         {
             "title": "Unreal Engine",
             "type": "folder",
+            "color": "#2196f3",
             "path": "docs/unreal-engine.md",
             "slug": "unreal-engine",
             "items": [
diff --git a/index.js b/index.js
index 15f36f0..b6c53a8 100644
--- a/index.js
+++ b/index.js
@@ -197,9 +197,10 @@ class DOMService {
     }
 
     createFolderHeaderWithFile(iconClass, doc) {
+        const iconStyle = doc.color ? `color: ${doc.color};` : '';
         return `
             <div class="folder-icons">
-                <i class="${iconClass} folder-icon"></i>
+                <i class="${iconClass} folder-icon" style="${iconStyle}"></i>
             </div>
             <span>${doc.title}</span>
             <a href="?${doc.slug}" class="folder-link" title="View folder page">
@@ -208,9 +209,10 @@ class DOMService {
     }
 
     createFolderHeaderBasic(iconClass, doc) {
+        const iconStyle = doc.color ? `color: ${doc.color};` : '';
         return `
             <div class="folder-icons">
-                <i class="${iconClass} folder-icon"></i>
+                <i class="${iconClass} folder-icon" style="${iconStyle}"></i>
             </div>
             <span>${doc.title}</span>`;
     }