Skip to content

fix(nav-menu): [nav-menu] add dark theme #3097

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

fix(nav-menu): [nav-menu] add dark theme #3097

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2dadcd5
fix(nav-menu): [nav-menu] add dark theme
wuyiping0628 Mar 10, 2025
adf4a57
Merge branch 'dev' of github.com:opentiny/tiny-vue into wyp/nav-menu-…
wuyiping0628 Mar 10, 2025
26bdcbf
fix(nav-menu): [nav-menu] add dark theme
wuyiping0628 Mar 10, 2025
3f5df87
fix(nav-menu): [nav-menu] add dark theme
wuyiping0628 Mar 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions packages/theme/src/nav-menu/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
height: var(--tv-NavMenu-height);
position: relative;
padding: 0 var(--tv-NavMenu-padding);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
border: 1px solid var(--tv-color-border-disabled);
Copy link
Collaborator

@MomoPoppy MomoPoppy Mar 10, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 首先这里要用组件级变量
2 场景不对，这里不是禁用场景的话不该用禁用边框色，而是常规边框色
3 关于阴影，设计规范有暗黑主题的阴影，具体在tokens的表格里


> .slot-logo {
float: left;
Expand Down Expand Up @@ -391,10 +391,6 @@
fill: var(--tv-NavMenu-item-more-button-fill);
font-size: var(--tv-NavMenu-item-font-size);

&:hover {
background: var(--tv-NavMenu-item-hover-bg-color);
}

&.float-right {
float: right;
margin-left: 10px;
Expand Down
6 changes: 2 additions & 4 deletions packages/theme/src/nav-menu/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,22 +27,20 @@
--tv-NavMenu-item-more-button-fill: var(--tv-color-icon-active);
// 导航菜单栏选中后字体大小
--tv-NavMenu-item-text-font-weight: var(--tv-font-weight-bold);
// 导航菜单栏项悬浮背景色
--tv-NavMenu-item-hover-bg-color: var(--tv-color-bg-hover-secondary);
// 导航菜单栏项选中下划线背景色
--tv-NavMenu-item-selected-underline-bg-color: var(--tv-color-bg-primary);
// 导航菜单菜单栏下拉框阴影
--tv-NavMenu-popmenu-box-shadow: var(--tv-shadow-3-down);
// 导航菜单菜单栏下拉框选中文本色
--tv-NavMenu-popmenu-selected-text-color: var(--tv-color-text);
// 导航菜单菜单栏下拉背景色
--tv-NavMenu-popmenu-bg-color: var(--tv-color-bg-3, #fff);
--tv-NavMenu-popmenu-bg-color: var(--tv-color-bg-hover-4, #fff);
Copy link
Collaborator

@MomoPoppy MomoPoppy Mar 10, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 首先场景不对
2 设计规范有关于顶部导航的下拉背景色
Uploading image.png…

// 导航菜单菜单栏下拉框选中字重
--tv-NavMenu-popmenu-selected-font-weight: var(--tv-font-weight-bold);
// 导航菜单菜单栏下拉框文本色
--tv-NavMenu-popmenu-text-color: var(--tv-color-text);
// 导航菜单更多按钮展示的下拉框右边框色
--tv-NavMenu-popmenu-more-menu-border-color-right: var(--tv-color-border);
--tv-NavMenu-popmenu-more-menu-border-color-right: var(--tv-color-border-disabled);
Copy link
Collaborator

@MomoPoppy MomoPoppy Mar 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

场景不对，如果确实是缺场景，要补充对应场景的变量

// 导航菜单更多按钮展示的下拉框字体大小
--tv-NavMenu-popmenu-more-menu-font-size: var(--tv-font-size-default);
// 导航菜单更多按钮展示的下拉框图标大小
Expand Down