From 8f97908896b2651f76f1b77ffbea4129a33711a6 Mon Sep 17 00:00:00 2001
From: ls-root <kontakt@fiosproject.de>
Date: Thu, 5 Feb 2026 12:37:22 +0100
Subject: [PATCH] fix(frontend): theme respective syntax highlighting (#11565)

Now if the user is in light mode the syntax highlighting
switches to light mode too.
---
 frontend/src/app/json-editor/page.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/json-editor/page.tsx b/frontend/src/app/json-editor/page.tsx
index f8dc22c47..fbaf7d544 100644
--- a/frontend/src/app/json-editor/page.tsx
+++ b/frontend/src/app/json-editor/page.tsx
@@ -29,9 +29,10 @@ import { ScriptSchema } from "./_schemas/schemas";
 import Categories from "./_components/categories";
 import Note from "./_components/note";
 
-import { nord } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { githubGist, nord } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { ScriptItem } from "../scripts/_components/script-item";
+import { useTheme } from "next-themes";
 
 const initialScript: Script = {
   name: "",
@@ -58,6 +59,7 @@ const initialScript: Script = {
 };
 
 export default function JSONGenerator() {
+  const { theme } = useTheme();
   const [script, setScript] = useState<Script>(initialScript);
   const [isCopied, setIsCopied] = useState(false);
   const [isValid, setIsValid] = useState(false);
@@ -357,7 +359,7 @@ export default function JSONGenerator() {
 
               <SyntaxHighlighter
                 language="json"
-                style={nord}
+                style={theme === "light" ? githubGist : nord}
                 className="mt-4 p-4 bg-secondary rounded shadow overflow-x-scroll"
               >
                 {JSON.stringify(script, null, 2)}