feat: add theming support

app/src/lib/settings/app-settings.ts

@@ -1,4 +1,5 @@
 import localStore from "$lib/helpers/localStore";
+import { label } from "three/examples/jsm/nodes/Nodes.js";
 
 export const AppSettings = localStore("node-settings", {
   theme: 0,
@@ -7,31 +8,42 @@ export const AppSettings = localStore("node-settings", {
   showIndices: false,
 });
 
+const themes = ["dark", "light", "catppuccin", "solarized", "high-contrast", "nord", "dracula"];
+
 AppSettings.subscribe((value) => {
-  if (value.theme === 0) {
-    document.body.classList.remove("theme-catppuccin");
-  } else {
-    document.body.classList.add("theme-catppuccin");
+  const classes = document.body.classList;
+  const newClassName = `theme-${themes[value.theme]}`;
+  for (const className of classes) {
+    if (className.startsWith("theme-") && className !== newClassName) {
+      classes.remove(className);
+    }
   }
+  document.body.classList.add(newClassName);
 });
 
 export const AppSettingTypes = {
   theme: {
     type: "select",
-    options: ["dark", "cat"],
-    value: "dark",
+    options: themes,
+    label: "Theme",
+    value: themes[0],
   },
   showGrid: {
     type: "boolean",
+    label: "Show Grid",
     value: true,
   },
-  wireframe: {
-    type: "boolean",
-    value: false,
-  },
-  showIndices: {
-    type: "boolean",
-    value: false,
-  },
+  debug: {
+    wireframe: {
+      type: "boolean",
+      label: "Wireframe",
+      value: false,
+    },
+    showIndices: {
+      type: "boolean",
+      label: "Show Indices",
+      value: false,
+    },
+  }
 }