Skip to content

Commit 8ad082d

Browse files
Hoang Nguyenyadvr
Hoang Nguyen
authored and
yadvr
committed
config: extend basic customize theming options (#718)
Customize link hover color Customize loading color Customize navigation menu color Fixes #712 Fixes #713 Fixes #714 Signed-off-by: Rohit Yadav <[email protected]>
1 parent 173b8e3 commit 8ad082d

File tree

6 files changed

+160
-9
lines changed

6 files changed

+160
-9
lines changed

‎ui/docs/customize.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,13 @@ Customize themes like colors, border color, etc.
4747
}
4848
```
4949

50+
- `@logo-background-color` changes the logo background color.
51+
- `@navigation-background-color` changes the navigation menu background color.
52+
- `@navigation-text-color` changes the navigation text color.
5053
- `@primary-color` change the major background color of the page (background button, icon hover, etc).
54+
- `@link-color` changes the link color.
55+
- `@link-hover-color` changes the link hover color.
56+
- `@loading-color` changes the message loading color and page loading bar at the top page.
5157
- `@success-color` change success state color.
5258
- `@processing-color` change processing state color. Exp: progress status.
5359
- `@warning-color` change warning state color.

‎ui/public/config.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,13 @@
1111
"500": "assets/500.png"
1212
},
1313
"theme": {
14+
"@logo-background-color": "#ffffff",
15+
"@navigation-background-color": "#ffffff",
16+
"@navigation-text-color": "rgba(0, 0, 0, 0.65)",
1417
"@primary-color": "#1890ff",
1518
"@link-color": "#1890ff",
19+
"@link-hover-color": "#40a9ff",
20+
"@loading-color": "#1890ff",
1621
"@processing-color": "#1890ff",
1722
"@success-color": "#52c41a",
1823
"@warning-color": "#faad14",

‎ui/src/assets/icons/kubernetes.svg‎

Lines changed: 2 additions & 1 deletion
Loading

‎ui/src/components/header/Logo.vue‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,10 @@ export default {
5656
line-height: 64px;
5757
-webkit-transition: all .3s;
5858
transition: all .3s;
59-
background: #002140;
6059
overflow: hidden;
6160
}
6261
6362
.sider.light .logo {
64-
background: #fff;
6563
box-shadow: 1px 1px 0px 0px #e8e8e8;
6664
}
6765

‎ui/src/style/vars.less‎

Lines changed: 142 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,33 @@
1515
// specific language governing permissions and limitations
1616
// under the License.
1717

18-
@import "~ant-design-vue/lib/style/themes/default.less";
19-
2018
@logo-width: 256px;
2119
@logo-height: 64px;
2220
@banner-width: 450px;
2321
@banner-height: 110px;
2422
@error-width: 256px;
2523
@error-height: 256px;
2624

25+
@logo-background-color: #ffffff;
26+
@navigation-background-color: #ffffff;
27+
@navigation-text-color: rgba(0, 0, 0, 0.65);
28+
@primary-color: #1890ff;
29+
@link-color: @primary-color;
30+
@link-hover-color: #40a9ff;
31+
@processing-color: @primary-color;
32+
@success-color: #52c41a;
33+
@warning-color: #faad14;
34+
@error-color: #f5222d;
35+
@font-size-base: 14px;
36+
@heading-color: rgba(0, 0, 0, 0.85);
37+
@text-color: rgba(0, 0, 0, 0.65);
38+
@text-color-secondary: rgba(0, 0, 0, 0.45);
39+
@disabled-color: rgba(0, 0, 0, 0.25);
40+
@border-color-base: #d9d9d9;
41+
@border-radius-base: 4px;
42+
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15);
43+
@loading-color: @primary-color;
44+
2745
.ant-layout-sider-children .logo-image {
2846
width: @logo-width;
2947
height: @logo-height;
@@ -48,10 +66,128 @@
4866
a {
4967
color: @link-color;
5068
background-color: transparent;
69+
70+
&:hover {
71+
color: @link-hover-color;
72+
}
73+
}
74+
75+
.ant-message-info .anticon,
76+
.ant-message-loading .anticon {
77+
color: @loading-color;
78+
}
79+
80+
#nprogress {
81+
.bar {
82+
background-color: @loading-color;
83+
}
84+
}
85+
86+
.sider .logo,
87+
.sider.light .logo {
88+
background-color: @logo-background-color;
89+
box-shadow: 1px 1px 0px 0px #e8e8e8;
90+
}
91+
92+
.ant-menu {
93+
background: @navigation-background-color;
94+
}
95+
96+
.ant-menu-submenu-popup,
97+
.ant-menu-submenu > .ant-menu,
98+
.ant-menu-dark .ant-menu-inline.ant-menu-sub {
99+
background-color: @navigation-background-color;
100+
}
101+
102+
.ant-menu-item > a,
103+
.ant-menu-dark .ant-menu-item,
104+
.ant-menu-dark .ant-menu-item-group-title,
105+
.ant-menu-dark .ant-menu-item > a {
106+
color: @navigation-text-color;
107+
}
108+
109+
.ant-menu-item-selected > a, .ant-menu-item-selected > a:hover {
110+
color: @primary-color;
111+
}
112+
113+
.ant-menu-vertical .ant-menu-item,
114+
.ant-menu-vertical-left .ant-menu-item,
115+
.ant-menu-vertical-right .ant-menu-item,
116+
.ant-menu-inline .ant-menu-item,
117+
.ant-menu-vertical .ant-menu-submenu-title,
118+
.ant-menu-vertical-left .ant-menu-submenu-title,
119+
.ant-menu-vertical-right .ant-menu-submenu-title,
120+
.ant-menu-inline .ant-menu-submenu-title {
121+
color: @navigation-text-color;
122+
}
123+
124+
.ant-menu-submenu-vertical ant-menu-submenu-selected,
125+
.ant-menu-vertical .ant-menu-submenu-selected,
126+
.ant-menu-vertical-left .ant-menu-submenu-selected,
127+
.ant-menu-vertical-right .ant-menu-submenu-selected {
128+
color: @primary-color;
129+
130+
.ant-menu-submenu-title {
131+
color: @primary-color;
132+
}
133+
}
134+
135+
.kubernet-icon path {
136+
color: @navigation-text-color;
51137
}
52-
a:hover {
53-
color: color(~`colorPalette("@{primary-color}", 5)`);
138+
139+
.ant-menu-item:hover,
140+
.ant-menu-item-active,
141+
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
142+
.ant-menu-submenu-active,
143+
.ant-menu-submenu-title:hover,
144+
.ant-menu-dark .ant-menu-item:hover > a,
145+
.ant-menu-dark .ant-menu-submenu-title:hover > a,
146+
.ant-menu-dark .ant-menu-submenu-title:hover,
147+
.ant-menu-dark .ant-menu-item:hover,
148+
.ant-menu-dark .ant-menu-submenu-title:hover
149+
{
150+
color: @primary-color;
151+
152+
.custom-icon path {
153+
color: @primary-color;
154+
}
54155
}
55-
a:active {
56-
color: color(~`colorPalette("@{primary-color}", 7)`);
156+
157+
.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
158+
.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
159+
.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
160+
.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
161+
.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
162+
.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
163+
.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
164+
.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::after {
165+
background-color: @navigation-text-color;
57166
}
167+
168+
.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
169+
.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
170+
.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
171+
.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
172+
.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
173+
.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
174+
.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
175+
.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
176+
.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
177+
.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
178+
.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
179+
.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
180+
.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
181+
.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
182+
.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
183+
.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
184+
.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
185+
.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
186+
.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
187+
.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
188+
.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
189+
.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
190+
.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
191+
.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before {
192+
background-color: @primary-color;
193+
}

‎ui/theme.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,13 @@ const options = {
2727
antDir: resolve('./node_modules/ant-design-vue'),
2828
varFile: resolve('./src/style/vars.less'),
2929
themeVariables: [
30+
'@logo-background-color',
31+
'@navigation-background-color',
32+
'@navigation-text-color',
3033
'@primary-color',
3134
'@link-color',
35+
'@link-hover-color',
36+
'@loading-color',
3237
'@success-color',
3338
'@warning-color',
3439
'@processing-color',

0 commit comments

Comments
 (0)