From 88929a842b62e88cc4ca5fa0731523ddea54b204 Mon Sep 17 00:00:00 2001
From: hzrd149 <github@hzrd149.com>
Date: Fri, 6 Oct 2023 09:07:58 -0500
Subject: [PATCH] tweak menu theme

---
 src/theme/default/components/drawer.ts |  2 +-
 src/theme/default/components/menu.ts   | 23 +++++++++++++++++++++++
 src/theme/default/index.ts             |  2 ++
 3 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 src/theme/default/components/menu.ts

diff --git a/src/theme/default/components/drawer.ts b/src/theme/default/components/drawer.ts
index 3d5a89be2..1d9b857f8 100644
--- a/src/theme/default/components/drawer.ts
+++ b/src/theme/default/components/drawer.ts
@@ -1,5 +1,5 @@
 import { drawerAnatomy as parts } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers, cssVar, defineStyle } from "@chakra-ui/styled-system";
+import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/styled-system";
 
 const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts.keys);
 
diff --git a/src/theme/default/components/menu.ts b/src/theme/default/components/menu.ts
new file mode 100644
index 000000000..b3e64cc1e
--- /dev/null
+++ b/src/theme/default/components/menu.ts
@@ -0,0 +1,23 @@
+import { menuAnatomy as parts } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers, cssVar, defineStyle } from "@chakra-ui/styled-system";
+
+// https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/menu.ts
+
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(parts.keys);
+
+const $bg = cssVar("menu-bg");
+
+const baseStyleList = defineStyle({
+  [$bg.variable]: "#fff",
+  _dark: {
+    [$bg.variable]: "colors.gray.800",
+  },
+});
+
+const baseStyle = definePartsStyle({
+  list: baseStyleList,
+});
+
+export const menuTheme = defineMultiStyleConfig({
+  baseStyle,
+});
diff --git a/src/theme/default/index.ts b/src/theme/default/index.ts
index 9d870e410..6706e2114 100644
--- a/src/theme/default/index.ts
+++ b/src/theme/default/index.ts
@@ -6,6 +6,7 @@ import { pallet } from "../helpers";
 import { buttonTheme } from "./components/button";
 import { drawerTheme } from "./components/drawer";
 import { modalTheme } from "./components/modal";
+import { menuTheme } from "./components/menu";
 
 const defaultTheme = extendTheme({
   colors: {
@@ -16,6 +17,7 @@ const defaultTheme = extendTheme({
     Button: buttonTheme,
     Drawer: drawerTheme,
     Modal: modalTheme,
+    Menu: menuTheme,
   },
   semanticTokens: {
     colors: {