From 0af5fa9f0c7cd6d0d6a53130b7a679166be72d01 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 16 Dec 2025 13:40:22 +0200
Subject: [PATCH] feat(breadcrumb): respect note color

---
 apps/client/src/widgets/layout/Breadcrumb.css | 2 +-
 apps/client/src/widgets/react/NoteLink.tsx    | 5 +++--
 apps/client/src/widgets/react/hooks.tsx       | 9 +++++++++
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/layout/Breadcrumb.css b/apps/client/src/widgets/layout/Breadcrumb.css
index 436b9cb0f..c4de82685 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.css
+++ b/apps/client/src/widgets/layout/Breadcrumb.css
@@ -26,7 +26,7 @@
         }
 
         a {
-            color: inherit;
+            color: var(--custom-color, inherit);
             text-decoration: none;
             min-width: 0;
             max-width: 150px;
diff --git a/apps/client/src/widgets/react/NoteLink.tsx b/apps/client/src/widgets/react/NoteLink.tsx
index 3664acce7..6ae05f38c 100644
--- a/apps/client/src/widgets/react/NoteLink.tsx
+++ b/apps/client/src/widgets/react/NoteLink.tsx
@@ -3,7 +3,7 @@ import { HTMLAttributes } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
 
 import link, { calculateHash, ViewScope } from "../../services/link";
-import { useImperativeSearchHighlighlighting, useNote, useNoteIcon, useNoteProperty, useTriliumEvent } from "./hooks";
+import { useImperativeSearchHighlighlighting, useNote, useNoteColorClass, useNoteIcon, useNoteProperty, useTriliumEvent } from "./hooks";
 import Icon from "./Icon";
 
 interface NoteLinkOpts {
@@ -100,6 +100,7 @@ export function NewNoteLink({ notePath, viewScope, noContextMenu, showNoteIcon,
     const note = useNote(noteId);
     const title = useNoteProperty(note, "title");
     const icon = useNoteIcon(showNoteIcon ? note : null);
+    const colorClass = useNoteColorClass(note);
 
     return (
         <span>
@@ -107,7 +108,7 @@ export function NewNoteLink({ notePath, viewScope, noContextMenu, showNoteIcon,
                 {icon && <Icon icon={icon} />}
 
                 <a
-                    className={clsx("tn-link", {
+                    className={clsx("tn-link", colorClass, {
                         "no-tooltip-preview": noPreview
                     })}
                     href={calculateHash({ notePath, viewScope })}
diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx
index 36c142505..f23b85d0c 100644
--- a/apps/client/src/widgets/react/hooks.tsx
+++ b/apps/client/src/widgets/react/hooks.tsx
@@ -1061,3 +1061,12 @@ export function useNoteIcon(note: FNote | null | undefined) {
 
     return icon;
 }
+
+export function useNoteColorClass(note: FNote | null | undefined) {
+    const [ colorClass, setColorClass ] = useState(note?.getColorClass());
+    const [ color ] = useNoteLabel(note, "color");
+    useEffect(() => {
+        setColorClass(note?.getColorClass());
+    }, [ color, note ]);
+    return colorClass;
+}