From 419e87b0de1d92c74e9b21575355ad495b14ff7e Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 18 Feb 2026 10:29:41 +0200
Subject: [PATCH] ui/grid view: add support for colored notes

---
 apps/client/src/stylesheets/theme-next-dark.css  |  3 ++-
 apps/client/src/stylesheets/theme-next-light.css |  3 ++-
 apps/client/src/stylesheets/theme-next/base.css  |  4 ----
 .../collections/legacy/ListOrGridView.css        | 16 ++++++++--------
 .../collections/legacy/ListOrGridView.tsx        |  2 +-
 5 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css
index dfdc209040..ab86bcc4bd 100644
--- a/apps/client/src/stylesheets/theme-next-dark.css
+++ b/apps/client/src/stylesheets/theme-next-dark.css
@@ -314,7 +314,8 @@
  */
 
 #left-pane .fancytree-node.tinted,
-.nested-note-list-item.use-note-color {
+.nested-note-list-item.use-note-color,
+.note-book-card.use-note-color {
     --custom-color: var(--dark-theme-custom-color);
 
     /* The background color of the active item in the note tree.
diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css
index 4b6b37718c..ead60aa992 100644
--- a/apps/client/src/stylesheets/theme-next-light.css
+++ b/apps/client/src/stylesheets/theme-next-light.css
@@ -308,7 +308,8 @@
 }
 
 #left-pane .fancytree-node.tinted,
-.nested-note-list-item.use-note-color {
+.nested-note-list-item.use-note-color,
+.note-book-card.use-note-color {
     --custom-color: var(--light-theme-custom-color);
 
     /* The background color of the active item in the note tree.
diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index 995e796d73..6a0ea97e53 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -727,10 +727,6 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     margin-bottom: 0;
 }
 
-.note-list-wrapper .note-book-card .tn-icon {
-    color: var(--left-pane-icon-color) !important;
-}
-
 .note-list.grid-view .note-book-card:hover {
     filter: contrast(105%);
 }
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index 3e151d79bf..93af378501 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -124,6 +124,14 @@
         margin-inline-start: 8px;
         flex-shrink: 0;
     }
+
+    &.use-note-color {
+        span.tn-icon + span,
+        .tn-icon,
+        .rendered-note-attributes {
+            color: var(--custom-color);
+        }
+    }
 }
 
 /* #region List view */
@@ -178,14 +186,6 @@
             opacity: .6;
         }
     }
-
-    &.use-note-color {
-        span.tn-icon + span,
-        .nested-note-list:not(.search-results) & .tn-icon,
-        .rendered-note-attributes {
-            color: var(--custom-color);
-        }
-    }
 }
 
 .nested-note-list:not(.search-results) h5 {
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
index 8534b8d564..dec8934043 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
@@ -156,7 +156,7 @@ function GridNoteCard(props: GridNoteCardProps) {
     const notePath = getNotePath(props.parentNote, props.note);
 
     return (
-        <div className={clsx("note-book-card", "no-tooltip-preview", "block-link", {
+        <div className={clsx("note-book-card", "no-tooltip-preview", "block-link", props.note.getColorClass(), {
                 "archived": props.note.isArchived
              })}
              data-href={`#${notePath}`}