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

@@ -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)}