dark mode technically works

but it is terrible
2025-07-15 12:55:27 -07:00
parent 5fd48bc958
commit 022f37b086
5 changed files with 150 additions and 91 deletions
@@ -1,18 +1,99 @@
-import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react";
+import { defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe } from "@chakra-ui/react";

-const config = defineConfig({
-  theme: {
-    tokens: {
-      colors: {
-        primaryBG: { value: {base: "#FFFFF", _dark: "AAB8C5"} },
-        secondaryBG: { value: "#EDF1F1" },
-        border: {value: "#000000"}
-      },
-      fonts: {
-        body: { value: "georgia, system-ui, sans-serif" },
-      },
-    }
+// RECIPES
+const headerRecipe = defineRecipe({
+  base: {
+    bg: "{secondaryBG}",
+    color: "text",
+    width: "100%",
+    height: "100%",
+    borderBottom: "1px solid",
+    borderBottomColor:"{border}",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
  }
 });

+const sidebarRecipe = defineSlotRecipe({
+  slots: ["root", "close_button", "buttons", "dark_mode_button"],
+  base: {
+    root: {
+      bg: "{primaryBG}",
+      borderRight: "1px solid",
+      borderColor: "{border}", 
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "start", 
+      alignItems: "start",
+      gap: 2,
+      p: 2,
+    },
+    buttons: {
+      bg: {base: "transparent", _dark: "#414141"},
+      fontSize: "xl",
+      color: {base: "#19332D", _dark: "#CBCBCB"}
+    },
+  }
+});
+
+
+// const sidebarRecipe = defineRecipe({
+//   base: {
+//     bg: "{primaryBG}",
+//     borderRight: "1px solid",
+//     borderColor: "{border}", 
+//     width: "100%",
+//     height: "100%",
+//     display: "flex",
+//     flexDirection: "column",
+//     justifyContent: "start", 
+//     alignItems: "start",
+//     gap: 2,
+//     p: 2,
+//   },
+//   variants: {
+//     dark: {
+//       borderRight: "2px solid",
+//     }
+//   }
+// });
+
+// const sidebarBtnRecipe = defineRecipe({
+//   base: {
+//     bg: "{sidebarBtnBG}"
+//   }
+// });
+
+const config = defineConfig({
+  theme: {
+    semanticTokens: {
+      colors: {
+        primaryBG: { value: {base: "#FFFFFF", _dark: "#121212"}},
+        secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
+        border: {value: {base: "#000000", _dark: "#CBCBCB"}},
+        text: {value: {base: "#19332D", _dark: "#CBCBCB"}},
+        iconFill: { value: {base: "#FFFFFF", _dark: "#CBCBCB"}},
+        icon: {value: {base: "#19332D", _dark: "#CBCBCB"}},
+      },
+    },
+    tokens: {
+      fonts: {
+        body: { value: "georgia, system-ui, sans-serif" },
+      },
+    },
+    recipes: {
+      // sidebar: sidebarRecipe,
+      // sidebarBTN: sidebarBtnRecipe,
+      header: headerRecipe,
+    },
+    slotRecipes: {
+      sidebar: sidebarRecipe,
+    }
+  },
+});
+
 export const system = createSystem(defaultConfig, config);