themes lol

src/components/sheet/drawer.tsx

@@ -1,7 +1,13 @@
 import { Box, Container, Title, useComputedColorScheme } from "@mantine/core";
 import { PropsWithChildren, useEffect, useRef } from "react";
 import { Drawer as VaulDrawer } from "vaul";
-import { CHROME_COLORS, setThemeColorMeta } from "@/lib/mantine/theme-colors";
+import {
+  pushDimmedThemeColor,
+  popDimmedThemeColor,
+} from "@/lib/mantine/theme-colors";
+import { getTheme } from "@/themes/registry";
+import { resolveChromeColors } from "@/themes/chrome";
+import { useAuth } from "@/contexts/auth-context";
 import styles from "./styles.module.css";
 
 interface DrawerProps extends PropsWithChildren {
@@ -20,22 +26,24 @@ const Drawer: React.FC<DrawerProps> = ({
   onExited,
 }) => {
   const colorScheme = useComputedColorScheme("light");
+  const { metadata } = useAuth();
   const contentRef = useRef<HTMLDivElement>(null);
+  const themeId = metadata.theme;
 
   useEffect(() => {
     if (!opened) return;
 
     const appElement = document.querySelector<HTMLElement>(".app");
-    const colors = CHROME_COLORS[colorScheme];
+    const colors = resolveChromeColors(getTheme(themeId))[colorScheme];
 
     appElement?.classList.add("drawer-scaling");
-    setThemeColorMeta(colors.dimmed);
+    pushDimmedThemeColor(colors.dimmed);
 
     return () => {
       appElement?.classList.remove("drawer-scaling");
-      setThemeColorMeta(colors.base);
+      popDimmedThemeColor(colors.base);
     };
-  }, [opened, colorScheme]);
+  }, [opened, colorScheme, themeId]);
 
   useEffect(() => {
     if (!opened || !contentRef.current) return;

src/components/sheet/styles.module.css

@@ -1,7 +1,7 @@
 .drawerOverlay {
     position: fixed;
     inset: 0;
-    background-color: rgba(0, 0, 0, 0.4);
+    background-color: var(--flxn-overlay);
     z-index: 101;
 }