fix: json viewer styling

Author: brettkolodny

public/build/preview.wasm

@@ -29,6 +29,7 @@ import { AnimatePresence, motion } from "motion/react";
 import { type FC, useCallback, useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "react-router";
 import ReactJsonView from "@microlink/react-json-view";
+import { useTheme } from "@/contexts/theme";
 
 export const Preview: FC = () => {
 	const $wasmState = useStore((state) => state.wasmState);
@@ -378,6 +379,7 @@ type DebuggerProps = {
 	output: PreviewOutput | null;
 };
 const Debugger: FC<DebuggerProps> = ({ output }) => {
+	const { appliedTheme } = useTheme();
 	const parserLogs = output?.parser_logs ?? [];
 
 	return (
@@ -386,8 +388,15 @@ const Debugger: FC<DebuggerProps> = ({ output }) => {
 			className="h-full w-full bg-surface-primary"
 		>
 			<ResizablePanel className="flex">
-				<div className="h-full w-full overflow-scroll p-4">
-					<ReactJsonView src={output ?? {}} collapsed={1} />
+				<div className="h-full w-full overflow-scroll break-all p-4">
+					<ReactJsonView
+						src={output ?? {}}
+						collapsed={1}
+						theme={appliedTheme === "dark" ? "brewer" : "rjv-default"}
+						style={{
+							background: "inherit",
+						}}
+					/>
 				</div>
 			</ResizablePanel>
 			<ResizableHandle className="bg-surface-quaternary" />

src/Preview.tsx

@@ -2,6 +2,7 @@ import {
 	createContext,
 	useContext,
 	useEffect,
+	useMemo,
 	useState,
 	type FC,
 	type PropsWithChildren,
@@ -19,11 +20,13 @@ type Theme = v.InferInput<typeof ThemeSchema>;
 
 type ThemeContext = {
 	theme: Theme;
+	appliedTheme: "light" | "dark";
 	setTheme: (theme: Theme) => void;
 };
 
 const ThemeContext = createContext<ThemeContext>({
 	theme: "system",
+	appliedTheme: "dark",
 	setTheme: () => null,
 });
 
@@ -41,6 +44,18 @@ export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
 		return parsedTheme.output;
 	});
 
+	const appliedTheme = useMemo(() => {
+		if (theme === "system") {
+			if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+				return "dark";
+			}
+
+			return "light";
+		}
+
+		return theme;
+	}, [theme]);
+
 	useEffect(() => {
 		const force =
 			theme === "dark" ||
@@ -57,7 +72,7 @@ export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
 	}, [theme]);
 
 	return (
-		<ThemeContext.Provider value={{ theme, setTheme }}>
+		<ThemeContext.Provider value={{ theme, setTheme, appliedTheme }}>
 			{children}
 		</ThemeContext.Provider>
 	);

src/contexts/theme.tsx

@@ -128,4 +128,14 @@
   text-align: right;
   width: 40px;
   font-weight: 100;
+}
+
+/* Styles for the JSON viewer */
+
+.react-json-view {
+  background: hsl(var(--surface-primary)) !important;
+}
+
+.copy-to-clipboard-container span {
+  display: flex !important;
 }

src/index.css

@@ -85,5 +85,5 @@ module.exports = {
 			},
 		},
 	},
-	plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+	plugins: [require("tailwindcss-animate"), ],
 };