ant-design / ant-design/pro-components

🧐[问题]不是暗黑模式,如何只让菜单部分表先暗黑模式的效果

Open
#8,593 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

下面是根据官方文档进行的配置,但是效果不理想。想问一下,有没有现成的配置值,是暗黑模式的菜单表现
```
token={{
sider: {
colorMenuBackground: '#141414', // menu 的背景颜色
colorTextMenuTitle: '#ffffff', // sider 的标题字体颜色
colorMenuItemDivider: '#303030', // menuItem 分割线的颜色
colorTextMenu: '#ffffff', // menuItem 的字体颜色
colorTextMenuSecondary: 'rgba(255, 255, 255, 0.65)', // menu 的二级字体颜色,比如 footer 和 action 的 icon
colorTextMenuSelected: 'rgba(255, 255, 255, 0.85)', // menuItem 的选中字体颜色
colorTextMenuActive: 'rgba(255, 255, 255, 0.85)', // menuItem hover 的选中字体颜色
colorTextMenuItemHover: 'rgba(255, 255, 255, 0.75)', // menuItem 的 hover 字体颜色
colorBgMenuItemActive: '#1890ff', // menuItem 的点击时背景颜色
colorBgMenuItemHover: 'rgba(24, 144, 255, 0.1)', // menuItem 的 hover 背景颜色
colorBgMenuItemSelected: '#1890ff', // menuItem 的选中背景颜色
colorBgMenuItemCollapsedElevated: '#141414', // 收起 menuItem 的弹出菜单背景颜色
colorBgCollapsedButton: '#141414', // 展开收起按钮背景颜色
colorTextCollapsedButton: '#ffffff', // 展开收起按钮字体颜色
colorTextCollapsedButtonHover: 'rgba(255, 255, 255, 0.85)', // 展开收起按钮 hover 时字体颜色
},
}}
```
另外,好像菜单折叠后,展开的二级菜单背景色没有被自定义。
![image](https://github.com/user-attachments/assets/cd99e193-a681-47bd-9c72-42709461dcd1)

官方的示例也有这个问题
![image](https://github.com/user-attachments/assets/7b369b29-465c-4e5c-90b5-1a43afd6fcfc)

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the supplied token.sider configuration and the behavior shown in the official examples. Check how the menu behaves normally and after collapsing, especially the expanded secondary menu background. Done means the menu-only dark appearance and the collapsed submenu background both follow the documented custom colors.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
design, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.