Skip to content
This repository was archived by the owner on Jan 20, 2021. It is now read-only.

Commit 01eeb9b

Browse files
author
Hoang Nguyen
authored
FIX - Changing project no longer changes the sidebar background/theme (#821)
* fix customize navigation background color when change project view * remove change color for the logo when switch project view * add doc help for customizing the navigation background color of the project view
1 parent 600603a commit 01eeb9b

4 files changed

Lines changed: 92 additions & 41 deletions

File tree

‎docs/customize.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ Customize themes like colors, border color, etc.
4848
```
4949

5050
- `@logo-background-color` changes the logo background color.
51+
- `@project-nav-background-color` changes the navigation menu background color of the project .
52+
- `@project-nav-text-color` changes the navigation menu background color of the project view.
5153
- `@navigation-background-color` changes the navigation menu background color.
5254
- `@navigation-text-color` changes the navigation text color.
5355
- `@primary-color` change the major background color of the page (background button, icon hover, etc).

‎public/config.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
"theme": {
1414
"@logo-background-color": "#ffffff",
1515
"@navigation-background-color": "#ffffff",
16+
"@project-nav-background-color": "#001529",
17+
"@project-nav-text-color": "rgba(255, 255, 255, 0.65)",
1618
"@navigation-text-color": "rgba(0, 0, 0, 0.65)",
1719
"@primary-color": "#1890ff",
1820
"@link-color": "#1890ff",

‎src/style/vars.less‎

Lines changed: 86 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@
2424

2525
@logo-background-color: #ffffff;
2626
@navigation-background-color: #ffffff;
27+
@project-nav-background-color: #001529;
28+
@project-nav-text-color: rgba(255, 255, 255, 0.65);
2729
@navigation-text-color: rgba(0, 0, 0, 0.65);
2830
@primary-color: #1890ff;
2931
@link-color: @primary-color;
@@ -83,30 +85,30 @@ a {
8385
}
8486
}
8587

86-
.sider .logo,
8788
.sider.light .logo {
8889
background-color: @logo-background-color;
8990
box-shadow: 1px 1px 0px 0px #e8e8e8;
9091
}
9192

9293
.sider.light {
9394
background: @navigation-background-color;
95+
96+
.ant-menu-submenu > .ant-menu {
97+
background: @navigation-background-color;
98+
}
9499
}
95100

96-
.ant-menu {
101+
.sider.light .ant-menu-light {
97102
background: @navigation-background-color;
98103
}
99104

100-
.ant-menu-submenu-popup,
101-
.ant-menu-submenu > .ant-menu,
102-
.ant-menu-dark .ant-menu-inline.ant-menu-sub {
103-
background-color: @navigation-background-color;
105+
.ant-menu-submenu-popup.ant-menu-light,
106+
.ant-menu-light > .ant-menu {
107+
background: @navigation-background-color;
104108
}
105109

106-
.ant-menu-item > a,
107-
.ant-menu-dark .ant-menu-item,
108-
.ant-menu-dark .ant-menu-item-group-title,
109-
.ant-menu-dark .ant-menu-item > a {
110+
.ant-menu-item > a
111+
{
110112
color: @navigation-text-color;
111113
}
112114

@@ -144,12 +146,7 @@ a {
144146
.ant-menu-item-active,
145147
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
146148
.ant-menu-submenu-active,
147-
.ant-menu-submenu-title:hover,
148-
.ant-menu-dark .ant-menu-item:hover > a,
149-
.ant-menu-dark .ant-menu-submenu-title:hover > a,
150-
.ant-menu-dark .ant-menu-submenu-title:hover,
151-
.ant-menu-dark .ant-menu-item:hover,
152-
.ant-menu-dark .ant-menu-submenu-title:hover
149+
.ant-menu-submenu-title:hover
153150
{
154151
color: @primary-color;
155152

@@ -169,29 +166,77 @@ a {
169166
background-color: @navigation-text-color;
170167
}
171168

172-
.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
173-
.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
174-
.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
175-
.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
176-
.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
177-
.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
178-
.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
179-
.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
180-
.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
181-
.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
182-
.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
183-
.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
184-
.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
185-
.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
186-
.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
187-
.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
188-
.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
189-
.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
190-
.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
191-
.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
192-
.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
193-
.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
194-
.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
195-
.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before {
196-
background-color: @primary-color;
169+
.sider.dark {
170+
.ant-menu-vertical .ant-menu-item,
171+
.ant-menu-vertical-left .ant-menu-item,
172+
.ant-menu-vertical-right .ant-menu-item,
173+
.ant-menu-inline .ant-menu-item,
174+
.ant-menu-vertical .ant-menu-submenu-title,
175+
.ant-menu-vertical-left .ant-menu-submenu-title,
176+
.ant-menu-vertical-right .ant-menu-submenu-title,
177+
.ant-menu-inline .ant-menu-submenu-title {
178+
color: @project-nav-text-color;
179+
}
180+
181+
.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
182+
.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
183+
.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
184+
.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
185+
.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
186+
.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
187+
.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
188+
.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::after
189+
{
190+
background-color: @project-nav-text-color;
191+
}
192+
193+
.ant-menu-submenu-active .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
194+
.ant-menu-submenu-active .ant-menu-submenu-title .ant-menu-submenu-arrow::after
195+
{
196+
background-color: @primary-color;
197+
}
198+
199+
.ant-menu-dark .ant-menu-item:hover > a,
200+
.ant-menu-dark .ant-menu-submenu-title:hover > a,
201+
.ant-menu-dark .ant-menu-submenu-title:hover,
202+
.ant-menu-dark .ant-menu-item:hover,
203+
.ant-menu-dark .ant-menu-submenu-title:hover
204+
{
205+
color: @primary-color;
206+
207+
.custom-icon path {
208+
color: @primary-color;
209+
}
210+
}
211+
212+
.ant-menu-submenu-selected {
213+
.ant-menu-submenu-title {
214+
color: @primary-color;
215+
}
216+
}
217+
}
218+
219+
.ant-menu-dark,
220+
.ant-menu-dark .ant-menu-sub,
221+
.ant-menu-dark .ant-menu-inline.ant-menu-sub{
222+
background-color: @project-nav-background-color;
223+
}
224+
225+
.ant-menu-dark .ant-menu-item,
226+
.ant-menu-dark .ant-menu-item-group-title,
227+
.ant-menu-dark .ant-menu-item > a {
228+
color: @project-nav-text-color;
229+
}
230+
231+
.ant-menu-dark .ant-menu-item:hover > a,
232+
.ant-menu-dark .ant-menu-submenu-title:hover > a,
233+
.ant-menu-dark .ant-menu-submenu-title:hover,
234+
.ant-menu-dark .ant-menu-item:hover,
235+
.ant-menu-dark .ant-menu-submenu-title:hover
236+
{
237+
color: @primary-color;
238+
239+
.custom-icon path {
240+
color: @primary-color;
241+
}
197242
}

‎theme.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ const options = {
2828
varFile: resolve('./src/style/vars.less'),
2929
themeVariables: [
3030
'@logo-background-color',
31+
'@project-nav-background-color',
32+
'@project-nav-text-color',
3133
'@navigation-background-color',
3234
'@navigation-text-color',
3335
'@primary-color',

0 commit comments

Comments
 (0)