From d7a7a64ec4e83c3bc578e6c20dfcbdbd51e09696 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Sun, 9 Nov 2025 07:55:31 -0800
Subject: [PATCH] New "Triangle" theme

---
 plugins/themes-yaak/src/index.ts             | 42 ++++++++++++++++++++
 src-web/components/core/Editor/extensions.ts |  2 +-
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/plugins/themes-yaak/src/index.ts b/plugins/themes-yaak/src/index.ts
index 504098eb..5236b4a4 100644
--- a/plugins/themes-yaak/src/index.ts
+++ b/plugins/themes-yaak/src/index.ts
@@ -745,5 +745,47 @@ export const plugin: PluginDefinition = {
         },
       },
     },
+    {
+      id: 'triangle',
+      dark: true,
+      label: 'Triangle',
+      base: {
+        surface: 'rgb(0,0,0)',
+        surfaceHighlight: 'rgb(21,21,21)',
+        surfaceActive: 'rgb(31,31,31)',
+        text: 'rgb(237,237,237)',
+        textSubtle: 'rgb(161,161,161)',
+        textSubtlest: 'rgb(115,115,115)',
+        border: 'rgb(31,31,31)',
+        primary: 'rgb(196,114,251)',
+        secondary: 'rgb(161,161,161)',
+        info: 'rgb(71,168,255)',
+        success: 'rgb(0,202,81)',
+        notice: 'rgb(255,175,0)',
+        warning: '#FF4C8D',
+        danger: '#fd495a',
+      },
+      components: {
+        editor: {
+          danger: '#FF4C8D',
+          warning: '#fd495a',
+        },
+        dialog: {
+          surface: 'rgb(10,10,10)',
+          border: 'rgb(31,31,31)',
+        },
+        sidebar: {
+          border: 'rgb(31,31,31)',
+        },
+        responsePane: {
+          surface: 'rgb(10,10,10)',
+          border: 'rgb(31,31,31)',
+        },
+        appHeader: {
+          surface: 'rgb(10,10,10)',
+          border: 'rgb(31,31,31)',
+        },
+      },
+    },
   ],
 };
diff --git a/src-web/components/core/Editor/extensions.ts b/src-web/components/core/Editor/extensions.ts
index 48cbb96e..142a2fee 100644
--- a/src-web/components/core/Editor/extensions.ts
+++ b/src-web/components/core/Editor/extensions.ts
@@ -63,7 +63,7 @@ export const syntaxHighlightStyle = HighlightStyle.define([
     textDecoration: 'underline',
   },
   {
-    tag: [t.paren, t.bracket, t.squareBracket, t.brace, t.separator, t.punctuation],
+    tag: [t.angleBracket, t.paren, t.bracket, t.squareBracket, t.brace, t.separator, t.punctuation],
     color: 'var(--textSubtle)',
   },
   {