added "note color"

src/public/app/entities/note_short.js

@@ -4,6 +4,7 @@ import ws from "../services/ws.js";
 import options from "../services/options.js";
 import froca from "../services/froca.js";
 import protectedSessionHolder from "../services/protected_session_holder.js";
+import cssClassManager from "../services/css_class_manager.js";
 
 const LABEL = 'label';
 const RELATION = 'relation';
@@ -424,6 +425,11 @@ class NoteShort {
         }
     }
 
+    getColorClass() {
+        const color = this.getLabelValue("color");
+        return cssClassManager.createClassForColor(color);
+    }
+
     isFolder() {
         return this.type === 'search'
             || this.getFilteredChildBranches().length > 0;

src/public/app/services/css_class_manager.js

@@ -0,0 +1,27 @@
+const registeredClasses = new Set();
+
+function createClassForColor(color) {
+    if (!color?.trim()) {
+        return "";
+    }
+
+    const normalizedColorName = color.replace(/[^a-z0-9]/gi, "");
+
+    if (!normalizedColorName.trim()) {
+        return "";
+    }
+
+    const className = 'color-' + normalizedColorName;
+
+    if (!registeredClasses.has(className)) {
+        $("head").append(`<style>.${className} { color: ${color} !important; }</style>`);
+
+        registeredClasses.add(className);
+    }
+
+    return className;
+}
+
+export default {
+    createClassForColor
+};

src/public/app/services/link.js

@@ -162,6 +162,7 @@ async function loadReferenceLinkTitle(noteId, $el) {
         title = note.isDeleted ? `${note.title} (deleted)` : note.title;
     }
 
+    $el.addClass(note.getColorClass());
     $el.text(title);
 
     $el.prepend($("<span>").addClass(note.getIcon()));

src/public/app/widgets/attribute_widgets/attribute_detail.js

@@ -235,7 +235,8 @@ const ATTR_HELP = {
                         
                         See <a href="https://github.com/zadam/trilium/wiki/Default-note-title">wiki with details</a>, API docs for <a href="https://zadam.github.io/trilium/backend_api/Note.html">parentNote</a> and <a href="https://day.js.org/docs/en/display/format">now</a> for details.`,
         "template": "This note will appear in the selection of available template when creating new note",
-        "toc": "<code>#toc</code> or <code>#toc=show</code> will force the Table of Contents to be shown, <code>#toc=hide</code> will force hiding it. If the label doesn't exist, the global setting is observed"
+        "toc": "<code>#toc</code> or <code>#toc=show</code> will force the Table of Contents to be shown, <code>#toc=hide</code> will force hiding it. If the label doesn't exist, the global setting is observed",
+        "color": "defines color of the note in note tree, links etc. Use any valid CSS color value like 'red' or #a13d5f"
     },
     "relation": {
         "runOnNoteCreation": "executes when note is created on backend",

src/public/app/widgets/note_tree.js

@@ -739,6 +739,12 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
             extraClasses.push("archived");
         }
 
+        const colorClass = note.getColorClass();
+
+        if (colorClass) {
+            extraClasses.push(colorClass);
+        }
+
         return extraClasses.join(" ");
     }
 
@@ -1041,7 +1047,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
         const noteIdsToReload = new Set();
 
         for (const ecAttr of loadResults.getAttributes()) {
-            if (ecAttr.type === 'label' && ['iconClass', 'cssClass', 'workspace', 'workspaceIconClass', 'archived'].includes(ecAttr.name)) {
+            if (ecAttr.type === 'label' && ['iconClass', 'cssClass', 'workspace', 'workspaceIconClass', 'archived', 'color'].includes(ecAttr.name)) {
                 if (ecAttr.isInheritable) {
                     noteIdsToReload.add(ecAttr.noteId);
                 }

src/services/builtin_attributes.js

@@ -59,6 +59,7 @@ module.exports = [
     { type: 'label', name: 'titleTemplate', isDangerous: true },
     { type: 'label', name: 'template' },
     { type: 'label', name: 'toc' },
+    { type: 'label', name: 'color' },
 
     // relation names
     { type: 'relation', name: 'internalLink' },