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 <rohit.yadav@shapeblue.com>

ui/docs/customize.md

@@ -47,7 +47,13 @@ Customize themes like colors, border color, etc.
 }
 ```
 
+- `@logo-background-color` changes the logo background color.
+- `@navigation-background-color` changes the navigation menu background color.
+- `@navigation-text-color` changes the navigation text color.
 - `@primary-color` change the major background color of the page (background button, icon hover, etc).
+- `@link-color` changes the link color.
+- `@link-hover-color` changes the link hover color.
+- `@loading-color` changes the message loading color and page loading bar at the top page.
 - `@success-color` change success state color.
 - `@processing-color` change processing state color. Exp: progress status.
 - `@warning-color` change warning state color.

ui/public/config.json

@@ -11,8 +11,13 @@
     "500": "assets/500.png"
   },
   "theme": {
+    "@logo-background-color": "#ffffff",
+    "@navigation-background-color": "#ffffff",
+    "@navigation-text-color": "rgba(0, 0, 0, 0.65)",
     "@primary-color": "#1890ff",
     "@link-color": "#1890ff",
+    "@link-hover-color": "#40a9ff",
+    "@loading-color": "#1890ff",
     "@processing-color": "#1890ff",
     "@success-color": "#52c41a",
     "@warning-color": "#faad14",

ui/src/components/header/Logo.vue

@@ -56,12 +56,10 @@ export default {
   line-height: 64px;
   -webkit-transition: all .3s;
   transition: all .3s;
-  background: #002140;
   overflow: hidden;
 }
 
 .sider.light .logo {
-  background: #fff;
   box-shadow: 1px 1px 0px 0px #e8e8e8;
 }
 

ui/src/style/vars.less

@@ -15,8 +15,6 @@
 // specific language governing permissions and limitations
 // under the License.
 
-@import "~ant-design-vue/lib/style/themes/default.less";
-
 @logo-width: 256px;
 @logo-height: 64px;
 @banner-width: 450px;
@@ -24,6 +22,26 @@
 @error-width: 256px;
 @error-height: 256px;
 
+@logo-background-color: #ffffff;
+@navigation-background-color: #ffffff;
+@navigation-text-color:  rgba(0, 0, 0, 0.65);
+@primary-color: #1890ff;
+@link-color: @primary-color;
+@link-hover-color: #40a9ff;
+@processing-color: @primary-color;
+@success-color: #52c41a;
+@warning-color: #faad14;
+@error-color: #f5222d;
+@font-size-base: 14px;
+@heading-color: rgba(0, 0, 0, 0.85);
+@text-color: rgba(0, 0, 0, 0.65);
+@text-color-secondary: rgba(0, 0, 0, 0.45);
+@disabled-color: rgba(0, 0, 0, 0.25);
+@border-color-base: #d9d9d9;
+@border-radius-base: 4px;
+@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15);
+@loading-color: @primary-color;
+
 .ant-layout-sider-children .logo-image {
   width: @logo-width;
   height: @logo-height;
@@ -48,10 +66,128 @@
 a {
   color: @link-color;
   background-color: transparent;
+
+  &:hover {
+    color: @link-hover-color;
+  }
 }
-a:hover {
+
-  color: color(~`colorPalette("@{primary-color}", 5)`);
+.ant-message-info .anticon,
+.ant-message-loading .anticon {
+  color: @loading-color;
 }
-a:active {
+
-  color: color(~`colorPalette("@{primary-color}", 7)`);
+#nprogress {
+  .bar {
+    background-color: @loading-color;
+  }
 }
+
+.sider .logo,
+.sider.light .logo {
+  background-color: @logo-background-color;
+  box-shadow: 1px 1px 0px 0px #e8e8e8;
+}
+
+.ant-menu {
+  background: @navigation-background-color;
+}
+
+.ant-menu-submenu-popup,
+.ant-menu-submenu > .ant-menu,
+.ant-menu-dark .ant-menu-inline.ant-menu-sub {
+  background-color: @navigation-background-color;
+}
+
+.ant-menu-item > a,
+.ant-menu-dark .ant-menu-item,
+.ant-menu-dark .ant-menu-item-group-title,
+.ant-menu-dark .ant-menu-item > a {
+  color: @navigation-text-color;
+}
+
+.ant-menu-item-selected > a, .ant-menu-item-selected > a:hover {
+  color: @primary-color;
+}
+
+.ant-menu-vertical .ant-menu-item,
+.ant-menu-vertical-left .ant-menu-item,
+.ant-menu-vertical-right .ant-menu-item,
+.ant-menu-inline .ant-menu-item,
+.ant-menu-vertical .ant-menu-submenu-title,
+.ant-menu-vertical-left .ant-menu-submenu-title,
+.ant-menu-vertical-right .ant-menu-submenu-title,
+.ant-menu-inline .ant-menu-submenu-title {
+  color: @navigation-text-color;
+}
+
+.ant-menu-submenu-vertical ant-menu-submenu-selected,
+.ant-menu-vertical .ant-menu-submenu-selected,
+.ant-menu-vertical-left .ant-menu-submenu-selected,
+.ant-menu-vertical-right .ant-menu-submenu-selected {
+  color: @primary-color;
+
+  .ant-menu-submenu-title {
+    color: @primary-color;
+  }
+}
+
+.kubernet-icon path {
+  color: @navigation-text-color;
+}
+
+.ant-menu-item:hover,
+.ant-menu-item-active,
+.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
+.ant-menu-submenu-active,
+.ant-menu-submenu-title:hover,
+.ant-menu-dark .ant-menu-item:hover > a,
+.ant-menu-dark .ant-menu-submenu-title:hover > a,
+.ant-menu-dark .ant-menu-submenu-title:hover,
+.ant-menu-dark .ant-menu-item:hover,
+.ant-menu-dark .ant-menu-submenu-title:hover
+{
+  color: @primary-color;
+
+  .custom-icon path {
+    color: @primary-color;
+  }
+}
+
+.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
+.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
+.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
+.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
+.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
+.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
+.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
+.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::after {
+  background-color: @navigation-text-color;
+}
+
+.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
+.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
+.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
+.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
+.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
+.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
+.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
+.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
+.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
+.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
+.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
+.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
+.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
+.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
+.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
+.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
+.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
+.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
+.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
+.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
+.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
+.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
+.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
+.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before {
+  background-color: @primary-color;
+}

ui/theme.config.js

@@ -27,8 +27,13 @@ const options = {
   antDir: resolve('./node_modules/ant-design-vue'),
   varFile: resolve('./src/style/vars.less'),
   themeVariables: [
+    '@logo-background-color',
+    '@navigation-background-color',
+    '@navigation-text-color',
     '@primary-color',
     '@link-color',
+    '@link-hover-color',
+    '@loading-color',
     '@success-color',
     '@warning-color',
     '@processing-color',