From 7b230706cb1cbbd290f2017881ade5a0827d9cb4 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 14 Feb 2026 12:41:41 +0200
Subject: [PATCH] feat(badges/content): improve color support

---
 apps/client/src/stylesheets/theme-next-dark.css        | 7 ++++---
 apps/client/src/stylesheets/theme-next-light.css       | 2 +-
 apps/client/src/widgets/layout/ActiveContentBadges.tsx | 3 ++-
 apps/client/src/widgets/layout/NoteBadges.css          | 5 ++++-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css
index f8fb305726..cf88b7f2d2 100644
--- a/apps/client/src/stylesheets/theme-next-dark.css
+++ b/apps/client/src/stylesheets/theme-next-dark.css
@@ -210,6 +210,7 @@
     --badge-share-background-color: #4d4d4d;
     --badge-clipped-note-background-color: #295773;
     --badge-execute-background-color: #604180;
+    --badge-active-content-background-color: rgb(12, 68, 70);
 
     --note-icon-background-color: #444444;
     --note-icon-color: #d4d4d4;
@@ -238,9 +239,9 @@
 
     --bottom-panel-background-color: #11111180;
     --bottom-panel-title-bar-background-color: #3F3F3F80;
-    
+
     --status-bar-border-color: var(--main-border-color);
-    
+
     --scrollbar-thumb-color: #fdfdfd5c;
     --scrollbar-thumb-hover-color: #ffffff7d;
     --scrollbar-background-color: transparent;
@@ -351,4 +352,4 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
 .note-split.with-hue *::selection,
 .quick-edit-dialog-wrapper.with-hue *::selection {
     --selection-background-color: hsl(var(--custom-color-hue), 49.2%, 35%);
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css
index 44f594d0ab..00678c6ae9 100644
--- a/apps/client/src/stylesheets/theme-next-light.css
+++ b/apps/client/src/stylesheets/theme-next-light.css
@@ -202,7 +202,7 @@
     --badge-share-background-color: #6b6b6b;
     --badge-clipped-note-background-color: #2284c0;
     --badge-execute-background-color: #7b47af;
-    --badge-icon-pack-background-color: rgb(228, 163, 44);
+    --badge-active-content-background-color: rgb(27, 164, 168);
 
     --note-icon-background-color: #4f4f4f;
     --note-icon-color: white;
diff --git a/apps/client/src/widgets/layout/ActiveContentBadges.tsx b/apps/client/src/widgets/layout/ActiveContentBadges.tsx
index 644ad7c49e..ff94f19f04 100644
--- a/apps/client/src/widgets/layout/ActiveContentBadges.tsx
+++ b/apps/client/src/widgets/layout/ActiveContentBadges.tsx
@@ -1,4 +1,5 @@
 import { BUILTIN_ATTRIBUTES } from "@triliumnext/commons";
+import clsx from "clsx";
 import { useEffect, useState } from "preact/hooks";
 
 import FNote from "../../entities/fnote";
@@ -75,7 +76,7 @@ function ActiveContentBadge({ info, note }: { note: FNote, info: ActiveContentIn
     const { icon, helpPage, apiDocsPage, isExecutable } = typeMappings[info.type];
     return (
         <BadgeWithDropdown
-            className="icon-pack-badge"
+            className={clsx("active-content-badge", !!info.isEnabled && "disabled")}
             icon={icon}
             text={getTranslationForType(info.type)}
         >
diff --git a/apps/client/src/widgets/layout/NoteBadges.css b/apps/client/src/widgets/layout/NoteBadges.css
index b2b6e18f77..013963adb4 100644
--- a/apps/client/src/widgets/layout/NoteBadges.css
+++ b/apps/client/src/widgets/layout/NoteBadges.css
@@ -37,7 +37,10 @@
                 pointer-events: none;
             }
         }
-        &.icon-pack-badge { --color: var(--badge-icon-pack-background-color); }
+        &.active-content-badge { --color: var(--badge-active-content-background-color); }
+        &.active-content-badge.disabled {
+            opacity: 0.5;
+        }
 
         min-width: 0;