From b72b82ff1ae41d4eeec8d54a24742ed479f2d2b4 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 15 Feb 2026 12:37:37 +0200
Subject: [PATCH] feat(badges/content): add badge for app themes

---
 apps/client/src/translations/en/translation.json       |  1 +
 apps/client/src/widgets/layout/ActiveContentBadges.tsx | 10 ++++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index ea5fda411a..d65d2b6bce 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -2297,6 +2297,7 @@
     "type_app_css": "Custom CSS",
     "type_render_note": "Render note",
     "type_web_view": "Web view",
+    "type_app_theme": "Custom theme",
     "toggle_tooltip_enable_tooltip": "Click to enable this {{type}}.",
     "toggle_tooltip_disable_tooltip": "Click to disable this {{type}}.",
     "menu_docs": "Open documentation",
diff --git a/apps/client/src/widgets/layout/ActiveContentBadges.tsx b/apps/client/src/widgets/layout/ActiveContentBadges.tsx
index 80b37ec291..1987985cdb 100644
--- a/apps/client/src/widgets/layout/ActiveContentBadges.tsx
+++ b/apps/client/src/widgets/layout/ActiveContentBadges.tsx
@@ -12,10 +12,10 @@ import FormToggle from "../react/FormToggle";
 import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useTriliumEvent } from "../react/hooks";
 
 const DANGEROUS_ATTRIBUTES = BUILTIN_ATTRIBUTES.filter(a => a.isDangerous || a.name === "appCss");
-const activeContentLabels = [ "iconPack", "widget", "appCss" ] as const;
+const activeContentLabels = [ "iconPack", "widget", "appCss", "appTheme" ] as const;
 
 interface ActiveContentInfo {
-    type: "iconPack" | "backendScript" | "frontendScript" | "widget" | "appCss" | "renderNote" | "webView";
+    type: "iconPack" | "backendScript" | "frontendScript" | "widget" | "appCss" | "renderNote" | "webView" | "appTheme";
     isEnabled: boolean;
     canToggleEnabled: boolean;
 }
@@ -57,6 +57,10 @@ const typeMappings: Record<ActiveContentInfo["type"], {
     webView: {
         icon: "bx bx-globe",
         helpPage: "1vHRoWCEjj0L"
+    },
+    appTheme: {
+        icon: "bx bx-palette",
+        helpPage: "7NfNr5pZpVKV"
     }
 };
 
@@ -201,6 +205,8 @@ function getTranslationForType(type: ActiveContentInfo["type"]) {
             return t("active_content_badges.type_render_note");
         case "webView":
             return t("active_content_badges.type_web_view");
+        case "appTheme":
+            return t("active_content_badges.type_app_theme");
     }
 }