tweak menu theme

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);
 

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,
+});

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: {