Support dynamic dark/light themes

svelte/src/util/Chart.svelte

@@ -1,6 +1,7 @@
 <script>
 import { onMount } from "svelte";
 import { formatDataVolume, formatNumber } from "./Formatting.svelte";
+import { color_by_name } from "./Util.svelte";
 import {
 	Chart,
 	PointElement,
@@ -38,7 +39,7 @@ export const update = () => {
 	return chart_object.update()
 }
 
-Chart.defaults.color = "#"+window.style.bodyTextColor;
+Chart.defaults.color = color_by_name("body_text_color");
 Chart.defaults.font.size = 15;
 Chart.defaults.font.family = "system-ui, sans-serif";
 Chart.defaults.maintainAspectRatio = false;
@@ -91,7 +92,7 @@ onMount(() => {
 						grid: {
 							display: true,
 							drawBorder: false,
-							color: "#"+window.style.separatorColor,
+							color: color_by_name("separator"),
 						},
 					},
 					x: {

svelte/src/util/ThemePicker.svelte

@@ -33,10 +33,13 @@ let set = s => {
 		Canta
 	</button>
 	<button class:button_highlight={theme==="nord"} on:click={() => {set("nord")}}>
-		Nord
+		Nord (dynamic)
 	</button>
-	<button class:button_highlight={theme==="snowstorm"} on:click={() => {set("snowstorm")}}>
-		Snowstorm
+	<button class:button_highlight={theme==="nord_dark"} on:click={() => {set("nord_dark")}}>
+		Nord (dark)
+	</button>
+	<button class:button_highlight={theme==="nord_light"} on:click={() => {set("nord_light")}}>
+		Nord (light)
 	</button>
 	<button class:button_highlight={theme==="skeuos"} on:click={() => {set("skeuos")}}>
 		Skeuos

svelte/src/util/Util.svelte

@@ -59,4 +59,11 @@ export const add_upload_history = id => {
 	// Save the new ID
 	localStorage.setItem("uploaded_files", id + "," + uploads);
 }
+
+export const color_by_name = name => {
+	return getComputedStyle(document.documentElement).getPropertyValue("--"+name);
+}
+export const color_by_name_no_prefix = name => {
+	return color_by_name(name).replace(/^#/, "");
+}
 </script>