feat(repl): allow dark mode for svelte-json-tree (#517)

* feat(repl): allow dark mode for svelte-json-tree

* feat(repl): use theme to control svelte-json-tree color

* Add changeset

---------

Co-authored-by: Puru Vijay <[email protected]>

Author: tanhauhau

.changeset/clever-pumas-fly.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/repl': patch
+---
+
+(feat) allow dark mode for svelte-json-tree

packages/repl/package.json

@@ -84,6 +84,6 @@
 		"estree-walker": "^3.0.3",
 		"marked": "^5.1.0",
 		"resolve.exports": "^2.0.2",
-		"svelte-json-tree": "^1.0.0"
+		"svelte-json-tree": "^2.0.0"
 	}
 }

packages/repl/src/lib/Output/Viewer.svelte

@@ -255,7 +255,7 @@
 		</div>
 
 		<section slot="panel-body">
-			<Console {logs} on:clear={clear_logs} />
+			<Console {logs} {theme} on:clear={clear_logs} />
 		</section>
 	</PaneWithPanel>
 

packages/repl/src/lib/Output/console/Console.svelte

@@ -3,9 +3,12 @@
 
 	/** @type {import('./console').Log[]} */
 	export let logs;
+
+	/** @type {'light' | 'dark'} */
+	export let theme;
 </script>
 
-<div class="container">
+<div class="container" class:dark={theme === 'dark'}>
 	{#each logs as log}
 		<ConsoleLine {log} />
 	{/each}
@@ -15,4 +18,19 @@
 	.container {
 		--json-tree-string-color: var(--sk-code-string);
 	}
+	.dark {
+		--json-tree-property-color: #72a2d3;
+		--json-tree-string-color: #6cd1c7;
+		--json-tree-symbol-color: #6cd1c7;
+		--json-tree-boolean-color: #9681f7;
+		--json-tree-function-color: #e59b6f;
+		--json-tree-number-color: #9681f7;
+		--json-tree-label-color: #9ca0a5;
+		--json-tree-arrow-color: #e8eaed;
+		--json-tree-null-color: #81868a;
+		--json-tree-undefined-color: #81868a;
+		--json-tree-date-color: #9ca0a5;
+		--json-tree-operator-color: #e8eaed;
+		--json-tree-regex-color: #6cd1c7;
+	}
 </style>