From 2a0da9bc86ad4c59836c4d9e07e1cb818ad0dc9a Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Mon, 31 May 2021 16:34:28 +0700
Subject: [PATCH 01/17] add button toggle dark mode

---
 ui/public/locales/en.json               |  1 +
 ui/src/components/header/UserMenu.vue   | 14 ++++++++++++--
 ui/src/components/page/GlobalLayout.vue | 13 +++++++++++++
 ui/src/layouts/UserLayout.vue           | 14 +++++++++++++-
 ui/src/store/getters.js                 |  3 ++-
 ui/src/store/modules/user.js            | 17 +++++++++++++++--
 ui/src/store/mutation-types.js          |  1 +
 7 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 15d90bc0ae55..29c62f5830c1 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -646,6 +646,7 @@
 "label.daily": "Daily",
 "label.dashboard": "Dashboard",
 "label.dashboard.endpoint": "Dashboard endpoint",
+"label.dark.mode": "Dark mode",
 "label.data.disk": "Data Disk",
 "label.data.disk.offering": "Data Disk Offering",
 "label.date": "Date",
diff --git a/ui/src/components/header/UserMenu.vue b/ui/src/components/header/UserMenu.vue
index 33335c6efd15..b9cb5d25270e 100644
--- a/ui/src/components/header/UserMenu.vue
+++ b/ui/src/components/header/UserMenu.vue
@@ -40,14 +40,21 @@
               :checked="$store.getters.usebrowsertimezone" />
           </a>
         </a-menu-item>
-        <a-menu-item class="user-menu-item" key="2" disabled>
+        <a-menu-item class="user-menu-item" key="2">
+          <a @click="toggleDarkMode">
+            <a-icon class="user-menu-item-icon" type="bulb"/>
+            <span class="user-menu-item-name" style="margin-right: 5px">{{ $t('label.dark.mode') }}</span>
+            <a-switch :checked="$store.getters.darkMode" />
+          </a>
+        </a-menu-item>
+        <a-menu-item class="user-menu-item" key="3" disabled>
           <a :href="$config.docBase" target="_blank">
             <a-icon class="user-menu-item-icon" type="question-circle-o"></a-icon>
             <span class="user-menu-item-name">{{ $t('label.help') }}</span>
           </a>
         </a-menu-item>
         <a-menu-divider/>
-        <a-menu-item class="user-menu-item" key="3">
+        <a-menu-item class="user-menu-item" key="4">
           <a href="javascript:;" @click="handleLogout">
             <a-icon class="user-menu-item-icon" type="logout"/>
             <span class="user-menu-item-name">{{ $t('label.logout') }}</span>
@@ -75,6 +82,9 @@ export default {
     toggleUseBrowserTimezone () {
       this.$store.dispatch('SetUseBrowserTimezone', !this.$store.getters.usebrowsertimezone)
     },
+    toggleDarkMode () {
+      this.$store.dispatch('SetDarkMode', !this.$store.getters.darkMode)
+    },
     handleLogout () {
       return this.Logout({}).then(() => {
         this.$router.push('/user/login')
diff --git a/ui/src/components/page/GlobalLayout.vue b/ui/src/components/page/GlobalLayout.vue
index 0ddf934b8682..da8572a95165 100644
--- a/ui/src/components/page/GlobalLayout.vue
+++ b/ui/src/components/page/GlobalLayout.vue
@@ -129,6 +129,13 @@ export default {
     },
     mainMenu (newMenu) {
       this.menus = newMenu.find((item) => item.path === '/').children
+    },
+    '$store.getters.darkMode' (darkMode) {
+      if (darkMode) {
+        document.body.classList.add('dark')
+      } else {
+        document.body.classList.remove('dark')
+      }
     }
   },
   created () {
@@ -136,6 +143,9 @@ export default {
     this.collapsed = !this.sidebarOpened
   },
   mounted () {
+    if (this.$store.getters.darkMode) {
+      document.body.classList.add('dark')
+    }
     const userAgent = navigator.userAgent
     if (userAgent.indexOf('Edge') > -1) {
       this.$nextTick(() => {
@@ -146,6 +156,9 @@ export default {
       })
     }
   },
+  beforeDestroy () {
+    document.body.classList.remove('dark')
+  },
   methods: {
     ...mapActions(['setSidebar']),
     toggle () {
diff --git a/ui/src/layouts/UserLayout.vue b/ui/src/layouts/UserLayout.vue
index f5bb5a482c98..2aea7aed3dc8 100644
--- a/ui/src/layouts/UserLayout.vue
+++ b/ui/src/layouts/UserLayout.vue
@@ -45,11 +45,24 @@ export default {
   data () {
     return {}
   },
+  watch: {
+    '$store.getters.darkMode' (darkMode) {
+      if (darkMode) {
+        document.body.classList.add('dark')
+      } else {
+        document.body.classList.remove('dark')
+      }
+    }
+  },
   mounted () {
     document.body.classList.add('userLayout')
+    if (this.$store.getters.darkMode) {
+      document.body.classList.add('dark')
+    }
   },
   beforeDestroy () {
     document.body.classList.remove('userLayout')
+    document.body.classList.remove('dark')
   }
 }
 </script>
@@ -57,7 +70,6 @@ export default {
 <style lang="less" scoped>
 .user-layout {
   height: 100%;
-  background: #fff;
 
   &-container {
     padding: 3rem 0;
diff --git a/ui/src/store/getters.js b/ui/src/store/getters.js
index 359dccc7c6f7..22ae9626d838 100644
--- a/ui/src/store/getters.js
+++ b/ui/src/store/getters.js
@@ -36,7 +36,8 @@ const getters = {
   zones: state => state.user.zones,
   timezoneoffset: state => state.user.timezoneoffset,
   usebrowsertimezone: state => state.user.usebrowsertimezone,
-  domainStore: state => state.user.domainStore
+  domainStore: state => state.user.domainStore,
+  darkMode: state => state.user.darkMode
 }
 
 export default getters
diff --git a/ui/src/store/modules/user.js b/ui/src/store/modules/user.js
index d764ae40ad68..32040bd5c869 100644
--- a/ui/src/store/modules/user.js
+++ b/ui/src/store/modules/user.js
@@ -33,7 +33,8 @@ import {
   TIMEZONE_OFFSET,
   USE_BROWSER_TIMEZONE,
   ASYNC_JOB_IDS,
-  DOMAIN_STORE
+  DOMAIN_STORE,
+  DARK_MODE
 } from '@/store/mutation-types'
 
 const user = {
@@ -51,7 +52,8 @@ const user = {
     zones: {},
     timezoneoffset: 0.0,
     usebrowsertimezone: false,
-    domainStore: {}
+    domainStore: {},
+    darkMode: false
   },
 
   mutations: {
@@ -106,6 +108,10 @@ const user = {
     SET_DOMAIN_STORE (state, domainStore) {
       state.domainStore = domainStore
       Vue.ls.set(DOMAIN_STORE, domainStore)
+    },
+    SET_DARK_MODE (state, darkMode) {
+      state.darkMode = darkMode
+      Vue.ls.set(DARK_MODE, darkMode)
     }
   },
 
@@ -142,6 +148,7 @@ const user = {
           commit('SET_LDAP', {})
           commit('SET_CLOUDIAN', {})
           commit('SET_DOMAIN_STORE', {})
+          commit('SET_DARK_MODE', {})
 
           notification.destroy()
 
@@ -159,9 +166,11 @@ const user = {
         const cachedTimezoneOffset = Vue.ls.get(TIMEZONE_OFFSET, 0.0)
         const cachedUseBrowserTimezone = Vue.ls.get(USE_BROWSER_TIMEZONE, false)
         const domainStore = Vue.ls.get(DOMAIN_STORE, {})
+        const darkMode = Vue.ls.get(DARK_MODE, {})
         const hasAuth = Object.keys(cachedApis).length > 0
 
         commit('SET_DOMAIN_STORE', domainStore)
+        commit('SET_DARK_MODE', darkMode)
         if (hasAuth) {
           console.log('Login detected, using cached APIs')
           commit('SET_ZONES', cachedZones)
@@ -270,6 +279,7 @@ const user = {
         commit('SET_CLOUDIAN', {})
         commit('RESET_THEME')
         commit('SET_DOMAIN_STORE', {})
+        commit('SET_DARK_MODE', {})
         Vue.ls.remove(CURRENT_PROJECT)
         Vue.ls.remove(ACCESS_TOKEN)
         Vue.ls.remove(ASYNC_JOB_IDS)
@@ -337,6 +347,9 @@ const user = {
     },
     SetDomainStore ({ commit }, domainStore) {
       commit('SET_DOMAIN_STORE', domainStore)
+    },
+    SetDarkMode ({ commit }, darkMode) {
+      commit('SET_DARK_MODE', darkMode)
     }
   }
 }
diff --git a/ui/src/store/mutation-types.js b/ui/src/store/mutation-types.js
index 01a9755cb58f..7c0f946db8f6 100644
--- a/ui/src/store/mutation-types.js
+++ b/ui/src/store/mutation-types.js
@@ -33,6 +33,7 @@ export const ASYNC_JOB_IDS = 'ASYNC_JOB_IDS'
 export const TIMEZONE_OFFSET = 'TIMEZONE_OFFSET'
 export const USE_BROWSER_TIMEZONE = 'USE_BROWSER_TIMEZONE'
 export const DOMAIN_STORE = 'DOMAIN_STORE'
+export const DARK_MODE = 'DARK_MODE'
 
 export const CONTENT_WIDTH_TYPE = {
   Fluid: 'Fluid',

From 6fe21fdb3fc97673924cc23a82f5366a53e14c25 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 1 Jun 2021 16:59:45 +0700
Subject: [PATCH 02/17] switch components corresponding to dark mode

---
 ui/src/components/page/GlobalFooter.vue       |  10 -
 ui/src/components/view/DetailSettings.vue     |   6 +-
 ui/src/components/view/InfoCard.vue           |  12 +-
 ui/src/components/view/ListView.vue           |   8 -
 ui/src/components/view/SearchView.vue         |   8 +-
 ui/src/components/view/TreeView.vue           |   2 -
 ui/src/components/widgets/OsLogo.vue          |  15 +-
 ui/src/store/modules/user.js                  |   6 +-
 ui/src/style/dark-mode.less                   | 627 ++++++++++++++++++
 ui/src/style/index.less                       |   1 +
 ui/src/style/vars.less                        |  70 +-
 ui/src/views/AutogenView.vue                  |   2 +-
 .../views/compute/CreateKubernetesCluster.vue |  30 +-
 ui/src/views/compute/CreateSnapshotWizard.vue |   8 +-
 ui/src/views/compute/DeployVM.vue             |   6 +-
 ui/src/views/compute/DestroyVM.vue            |   4 +-
 ui/src/views/compute/EditVM.vue               |  12 +-
 .../views/compute/ScaleKubernetesCluster.vue  |   4 +-
 ui/src/views/compute/StartVirtualMachine.vue  |   8 +-
 .../compute/UpgradeKubernetesCluster.vue      |   2 +-
 .../compute/wizard/NetworkConfiguration.vue   |   4 +-
 ui/src/views/iam/AddAccount.vue               |  24 +-
 ui/src/views/iam/AddLdapAccount.vue           |   8 -
 ui/src/views/iam/AddUser.vue                  |  20 +-
 ui/src/views/iam/ChangeUserPassword.vue       |   6 +-
 ui/src/views/iam/CreateRole.vue               |  10 +-
 ui/src/views/iam/DomainActionForm.vue         |   2 +-
 ui/src/views/iam/EditUser.vue                 |  10 +-
 ui/src/views/iam/ImportRole.vue               |  10 +-
 .../image/AddKubernetesSupportedVersion.vue   |  14 +-
 ui/src/views/infra/AddPrimaryStorage.vue      |  34 +-
 ui/src/views/infra/InfraSummary.vue           |  10 +-
 .../views/infra/network/EditTrafficLabel.vue  |  12 +-
 .../views/infra/routers/RouterHealthCheck.vue |   2 +-
 .../infra/zone/ZoneWizardZoneTypeStep.vue     |   2 -
 .../network/CreateIsolatedNetworkForm.vue     |  25 +-
 ui/src/views/network/CreateL2NetworkForm.vue  |  21 +-
 .../views/network/CreateSharedNetworkForm.vue |  47 +-
 ui/src/views/network/CreateVlanIpRange.vue    |  16 +-
 ui/src/views/network/CreateVpc.vue            |  14 +-
 .../network/CreateVpnCustomerGateway.vue      |  20 +-
 ui/src/views/network/PortForwarding.vue       |   6 +-
 ui/src/views/network/VpcTiersTab.vue          |   2 +-
 ui/src/views/offering/AddComputeOffering.vue  |  64 +-
 ui/src/views/offering/AddDiskOffering.vue     |  38 +-
 ui/src/views/offering/AddNetworkOffering.vue  |  32 +-
 ui/src/views/offering/AddVpcOffering.vue      |  12 +-
 .../views/offering/ImportBackupOffering.vue   |  10 +-
 .../project/AddAccountOrUserToProject.vue     |  16 +-
 ui/src/views/project/iam/ProjectRoleTab.vue   |   2 +-
 ui/src/views/storage/CreateVolume.vue         |   8 +-
 ui/src/views/storage/FormSchedule.vue         |   9 +-
 ui/src/views/storage/TakeSnapshot.vue         |   9 +-
 ui/src/views/storage/UploadLocalVolume.vue    |   8 +-
 54 files changed, 1034 insertions(+), 334 deletions(-)
 create mode 100644 ui/src/style/dark-mode.less

diff --git a/ui/src/components/page/GlobalFooter.vue b/ui/src/components/page/GlobalFooter.vue
index c19f8258f9c7..070a32b0d126 100644
--- a/ui/src/components/page/GlobalFooter.vue
+++ b/ui/src/components/page/GlobalFooter.vue
@@ -49,18 +49,8 @@ export default {
 
     .line {
       margin-bottom: 8px;
-
-      a {
-        color: rgba(0, 0, 0, .45);
-
-        &:hover {
-          color: rgba(0, 0, 0, .65);
-        }
-
-      }
     }
     .copyright {
-      color: rgba(0, 0, 0, .45);
       font-size: 14px;
     }
   }
diff --git a/ui/src/components/view/DetailSettings.vue b/ui/src/components/view/DetailSettings.vue
index 2571bed9e657..b4aaf68772f9 100644
--- a/ui/src/components/view/DetailSettings.vue
+++ b/ui/src/components/view/DetailSettings.vue
@@ -44,7 +44,11 @@
             :dataSource="Object.keys(detailOptions)"
             :placeholder="$t('label.name')"
             @change="e => onAddInputChange(e, 'newKey')" />
-          <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
+          <a-input
+            class="tag-disabled-input"
+            style=" width: 30px; border-left: 0; pointer-events: none; text-align: center"
+            placeholder="="
+            disabled />
           <a-auto-complete
             class="detail-input"
             :filterOption="filterOption"
diff --git a/ui/src/components/view/InfoCard.vue b/ui/src/components/view/InfoCard.vue
index e25eb393983f..5fd0fab1a376 100644
--- a/ui/src/components/view/InfoCard.vue
+++ b/ui/src/components/view/InfoCard.vue
@@ -620,13 +620,21 @@
                 @keyup.enter="handleInputConfirm"
                 compact>
                 <a-input ref="input" :value="inputKey" @change="handleKeyChange" style="width: 30%; text-align: center" :placeholder="$t('label.key')" />
-                <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
+                <a-input
+                  class="tag-disabled-input"
+                  style="width: 30px; border-left: 0; pointer-events: none; text-align: center"
+                  placeholder="="
+                  disabled />
                 <a-input :value="inputValue" @change="handleValueChange" style="width: 30%; text-align: center; border-left: 0" :placeholder="$t('label.value')" />
                 <tooltip-button :tooltip="$t('label.ok')" icon="check" size="small" @click="handleInputConfirm" />
                 <tooltip-button :tooltip="$t('label.cancel')" icon="close" size="small" @click="inputVisible=false" />
               </a-input-group>
             </div>
-            <a-tag @click="showInput" style="background: #fff; borderStyle: dashed;" v-else-if="isAdminOrOwner() && 'createTags' in $store.getters.apis">
+            <a-tag
+              @click="showInput"
+              class="btn-add-tag"
+              style="borderStyle: dashed;"
+              v-else-if="isAdminOrOwner() && 'createTags' in $store.getters.apis">
               <a-icon type="plus" /> {{ $t('label.new.tag') }}
             </a-tag>
           </div>
diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index 85f49b3f8460..7c0c8a512c7e 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/src/components/view/ListView.vue
@@ -588,14 +588,6 @@ export default {
 /deep/ .ant-table-small > .ant-table-content > .ant-table-body {
   margin: 0;
 }
-
-/deep/ .light-row {
-  background-color: #fff;
-}
-
-/deep/ .dark-row {
-  background-color: #f9f9f9;
-}
 </style>
 
 <style scoped lang="scss">
diff --git a/ui/src/components/view/SearchView.vue b/ui/src/components/view/SearchView.vue
index 100acf0d47bd..81d91ab8e8d4 100644
--- a/ui/src/components/view/SearchView.vue
+++ b/ui/src/components/view/SearchView.vue
@@ -74,7 +74,11 @@
                       size="small"
                       compact>
                       <a-input ref="input" :value="inputKey" @change="e => inputKey = e.target.value" style="width: 50px; text-align: center" :placeholder="$t('label.key')" />
-                      <a-input style=" width: 20px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
+                      <a-input
+                        class="tag-disabled-input"
+                        style=" width: 20px; border-left: 0; pointer-events: none; text-align: center"
+                        placeholder="="
+                        disabled />
                       <a-input :value="inputValue" @change="handleValueChange" style="width: 50px; text-align: center; border-left: 0" :placeholder="$t('label.value')" />
                       <tooltip-button icon="close" size="small" @click="inputKey = inputValue = ''" />
                     </a-input-group>
@@ -112,9 +116,11 @@
 
 <script>
 import { api } from '@/api'
+import TooltipButton from './TooltipButton.vue'
 
 export default {
   name: 'SearchView',
+  components: { TooltipButton },
   props: {
     searchFilters: {
       type: Array,
diff --git a/ui/src/components/view/TreeView.vue b/ui/src/components/view/TreeView.vue
index 832f5b3e3547..feb0ad6392bc 100644
--- a/ui/src/components/view/TreeView.vue
+++ b/ui/src/components/view/TreeView.vue
@@ -594,8 +594,6 @@ export default {
 }
 
 /deep/.ant-tree-icon__customize {
-  color: rgba(0, 0, 0, 0.45);
-  background: #fff;
   padding-right: 5px;
 }
 
diff --git a/ui/src/components/widgets/OsLogo.vue b/ui/src/components/widgets/OsLogo.vue
index edbb3a4b3439..a1de108c7a75 100644
--- a/ui/src/components/widgets/OsLogo.vue
+++ b/ui/src/components/widgets/OsLogo.vue
@@ -20,8 +20,19 @@
     <template slot="title">
       {{ name }}
     </template>
-    <font-awesome-icon :icon="['fab', logo]" :size="size" style="color: #666;" v-if="logo !== 'debian'" />
-    <debian-icon v-else-if="logo === 'debian'" :style="{ height: size === '4x' ? '56px' : '16px', width: size === '4x' ? '56px' : '16px', marginBottom: '-4px' }" />
+    <font-awesome-icon
+      :icon="['fab', logo]"
+      :size="size"
+      :style="[$store.getters.darkMode ? { color: 'rgba(255, 255, 255, 0.65)' } : { color: '#666' }]"
+      v-if="logo !== 'debian'" />
+    <debian-icon
+      v-else-if="logo === 'debian'"
+      :style="{
+        height: size === '4x' ? '56px' : '16px',
+        width: size === '4x' ? '56px' : '16px',
+        marginBottom: '-4px',
+        background: $store.getters.darkMode ? 'rgba(255, 255, 255, 0.65)' : ''
+      }" />
   </a-tooltip>
 </template>
 
diff --git a/ui/src/store/modules/user.js b/ui/src/store/modules/user.js
index 32040bd5c869..dcf59f8327e3 100644
--- a/ui/src/store/modules/user.js
+++ b/ui/src/store/modules/user.js
@@ -137,6 +137,8 @@ const user = {
 
           const cachedUseBrowserTimezone = Vue.ls.get(USE_BROWSER_TIMEZONE, false)
           commit('SET_USE_BROWSER_TIMEZONE', cachedUseBrowserTimezone)
+          const darkMode = Vue.ls.get(DARK_MODE, false)
+          commit('SET_DARK_MODE', darkMode)
 
           commit('SET_APIS', {})
           commit('SET_NAME', '')
@@ -148,7 +150,6 @@ const user = {
           commit('SET_LDAP', {})
           commit('SET_CLOUDIAN', {})
           commit('SET_DOMAIN_STORE', {})
-          commit('SET_DARK_MODE', {})
 
           notification.destroy()
 
@@ -166,7 +167,7 @@ const user = {
         const cachedTimezoneOffset = Vue.ls.get(TIMEZONE_OFFSET, 0.0)
         const cachedUseBrowserTimezone = Vue.ls.get(USE_BROWSER_TIMEZONE, false)
         const domainStore = Vue.ls.get(DOMAIN_STORE, {})
-        const darkMode = Vue.ls.get(DARK_MODE, {})
+        const darkMode = Vue.ls.get(DARK_MODE, false)
         const hasAuth = Object.keys(cachedApis).length > 0
 
         commit('SET_DOMAIN_STORE', domainStore)
@@ -279,7 +280,6 @@ const user = {
         commit('SET_CLOUDIAN', {})
         commit('RESET_THEME')
         commit('SET_DOMAIN_STORE', {})
-        commit('SET_DARK_MODE', {})
         Vue.ls.remove(CURRENT_PROJECT)
         Vue.ls.remove(ACCESS_TOKEN)
         Vue.ls.remove(ASYNC_JOB_IDS)
diff --git a/ui/src/style/dark-mode.less b/ui/src/style/dark-mode.less
new file mode 100644
index 000000000000..f96dc1c37564
--- /dev/null
+++ b/ui/src/style/dark-mode.less
@@ -0,0 +1,627 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+@primary-color: #1890ff;
+@dark-background-color: #090c10;
+// @dark-secondary-bgColor: #161b22;
+@dark-secondary-bgColor: #141414;
+@dark-text-color-1: rgba(255, 255, 255, 0.25);
+@dark-text-color-2: rgba(255, 255, 255, 0.45);
+@dark-text-color-3: rgba(255, 255, 255, 0.65);
+@dark-text-color-4: rgba(255, 255, 255, 0.85);
+@dark-border-color: #434343;
+@light-text-color-1: rgba(0, 0, 0, 0.25);
+@light-text-color-2: rgba(0, 0, 0, 0.45);
+@light-text-color-3: rgba(0, 0, 0, 0.65);
+@light-text-color-4: rgba(0, 0, 0, 0.85);
+
+.dark {
+  background: @dark-background-color;
+
+  .user-layout, .ant-layout {
+    background: @dark-background-color;
+  }
+
+  .user-layout .ant-input-affix-wrapper .ant-input-prefix, 
+  .user-layout .ant-input-affix-wrapper .ant-input-suffix {
+    color: @dark-text-color-3;
+  }
+
+  .layout.ant-layout .header {
+    background: @dark-secondary-bgColor;
+    box-shadow: 0 1px 4px #090c10;
+  }
+
+  .sider.light .logo {
+    background-color: @dark-secondary-bgColor;
+    box-shadow: 1px 1px 0px 0px #e8e8e8;
+  }
+
+  .sider.light {
+    background: @dark-secondary-bgColor;
+  
+    .ant-menu-submenu > .ant-menu {
+      background: @dark-secondary-bgColor;
+    }
+  }
+  
+  .sider.light .ant-menu-light {
+    background: @dark-secondary-bgColor;
+  }
+  
+  .ant-menu-submenu-popup.ant-menu-light,
+  .ant-menu-light > .ant-menu {
+    background: @dark-secondary-bgColor;
+  }
+
+  .ant-menu-item:not(.ant-menu-item-selected, :hover) > a,
+  .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:not(:hover),
+  .ant-menu-vertical-left .ant-menu-submenu-title,
+  .ant-menu-vertical-right .ant-menu-submenu-title,
+  .ant-menu-inline .ant-menu-submenu-title:not(:hover),
+  .kubernet-icon path
+  {
+    color: @dark-text-color-3;
+  }
+
+  .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: @dark-text-color-3;
+  }
+
+  .ant-card {
+    background: @dark-secondary-bgColor;
+
+    &-head, &-bottom, &-body {
+      color: @dark-text-color-3;
+      border-color: @dark-border-color;
+    }
+  }
+
+  .ant-layout-footer {
+    background: @dark-secondary-bgColor;
+    color: @dark-text-color-3;
+
+    .footer {
+      .line {
+        a {
+          color: @dark-text-color-3;
+
+          &:hover {
+            color: @dark-text-color-4;
+          }
+        }
+      }
+
+      .copyright {
+        color: @dark-text-color-3;
+      }
+    }
+  }
+
+  .ant-breadcrumb a:not(:hover),
+  .ant-breadcrumb-separator {
+    color: @dark-text-color-3;
+  }
+
+  .ant-breadcrumb > span:last-child,
+  .ant-breadcrumb > span:last-child a {
+    color: @dark-text-color-4;
+  }
+
+  .ant-btn:not(.ant-btn-primary, .ant-btn-danger) {
+    color: @dark-text-color-3;
+    background-color: transparent;
+    border-color: @dark-border-color;
+  }
+
+  .ant-input,
+  .ant-select-selection,
+  .ant-input-group-addon,
+  .ant-checkbox-inner,
+  .ant-radio-inner {
+    background-color: transparent;
+    background-image: none;
+    border-color: @dark-border-color;
+    color: @dark-text-color-3;
+  }
+
+  .ant-checkbox-wrapper {
+    color: @dark-text-color-3;
+  }
+
+  .ant-switch {
+    color: @light-text-color-3;
+    background-color: @dark-text-color-2;
+
+    &-checked {
+      background-color: #1890ff;
+    }
+
+    &-loading-icon, &:after {
+      background-color: @dark-secondary-bgColor;
+    }
+  }
+
+  .ant-dropdown-menu-item > a:hover {
+    .ant-switch:not(.ant-switch-checked) {
+      background-color: @light-text-color-3;
+    }
+  }
+
+  .layout.ant-layout .trigger,
+  .layout.ant-layout .header .user-menu .action,
+  .layout.ant-layout .top-nav-header-index .user-menu .action,
+  .ant-tabs {
+    color: @dark-text-color-3;
+  }
+
+  .ant-input-affix-wrapper .ant-input-prefix,
+  .ant-input-affix-wrapper .ant-input-suffix,
+  .ant-input-password-icon {
+    color: @dark-text-color-3;
+  }
+
+  .has-error .ant-input-affix-wrapper .ant-input,
+  .has-error .ant-input-affix-wrapper .ant-input:hover {
+    background-color: transparent;
+    background-image: none;
+  }
+
+  .ant-btn-primary-disabled,
+  .ant-btn-primary.disabled,
+  .ant-btn-primary[disabled],
+  .ant-btn-primary-disabled:hover,
+  .ant-btn-primary.disabled:hover,
+  .ant-btn-primary[disabled]:hover,
+  .ant-btn-primary-disabled:focus,
+  .ant-btn-primary.disabled:focus,
+  .ant-btn-primary[disabled]:focus,
+  .ant-btn-primary-disabled:active,
+  .ant-btn-primary.disabled:active,
+  .ant-btn-primary[disabled]:active,
+  .ant-btn-primary-disabled.active,
+  .ant-btn-primary.disabled.active,
+  .ant-btn-primary[disabled].active {
+    color: @dark-text-color-3;
+    background-color: transparent;
+  }
+
+  .ant-dropdown-menu {
+    background-color: @dark-secondary-bgColor;
+    border: 1px solid @dark-border-color;
+  }
+
+
+  .ant-dropdown-menu-item:not(.ant-dropdown-menu-item-selected, :hover), .ant-dropdown-menu-submenu-title,
+  .ant-dropdown-menu-item > a:not(:hover),
+  .ant-dropdown-menu-submenu-title > a:not(:hover) {
+    color: @dark-text-color-3;
+  }
+
+  .ant-card {
+    color: @dark-text-color-3;
+
+    .ant-progress-circle .ant-progress-text,
+    h1, h2, h3, h4, h5, h6 {
+      color: @dark-text-color-3;
+    }
+  }
+
+  .ant-table, .ant-badge-status-text {
+    color: @dark-text-color-3;
+  }
+
+  .ant-table-thead {
+    background-color: @dark-secondary-bgColor;
+  }
+
+  .ant-table-thead tr th {
+    color: @dark-text-color-3;
+    background-color: @dark-secondary-bgColor;
+    border-color: @dark-border-color;
+  }
+
+  .ant-table-small {
+    border-color: @dark-border-color;
+  }
+
+  .ant-table-tbody > tr > td {
+    border-color: @dark-border-color;
+  }
+
+  .light-row, .dark-row {
+    background-color: @dark-secondary-bgColor;
+  }
+
+  .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover,
+  .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover,
+  .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover .ant-table-filter-icon,
+  .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover .anticon-filter {
+    background-color: @dark-background-color;
+  }
+
+  .ant-table-tbody > tr.ant-table-row-selected td,
+  .ant-table-thead > tr:hover.ant-table-row-selected > td,
+  .ant-table-tbody > tr:hover.ant-table-row-selected > td,
+  .ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
+  .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
+  .ant-table-thead > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
+  .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
+    background-color: transparent;
+  }
+
+  .ant-table-thead>tr>th.ant-table-column-sort,
+  tr.ant-table-expanded-row,
+  tr.ant-table-expanded-row:hover {
+    background-color: @dark-background-color;
+  }
+
+  .ant-table-placeholder {
+    border-color: @dark-border-color;
+    background-color: @dark-secondary-bgColor;
+  }
+
+  .ant-table-footer {
+    background-color: @dark-secondary-bgColor;
+    color: @dark-text-color-3;
+    border-color: @dark-border-color;
+  }
+
+  .ant-table-footer::before {
+    background-color: @dark-border-color;
+  }
+
+  .ant-table-header {
+    background-color: @dark-secondary-bgColor;
+  }
+
+  .ant-table-row-expand-icon {
+    border-color: @dark-text-color-3;
+    color: @dark-text-color-3;
+    background-color: transparent;
+  }
+
+  .ant-table-filter-dropdown {
+    background-color: @dark-secondary-bgColor;
+
+    &-btns {
+      border-color: @dark-border-color;
+    }
+  }
+
+  .ant-pagination,
+  .ant-pagination-prev,
+  .ant-pagination-next,
+  .ant-pagination-jump-prev,
+  .ant-pagination-jump-next,
+  .ant-pagination-prev a,
+  .ant-pagination-next a {
+    color: @dark-text-color-3;
+  }
+
+  .ant-pagination-disabled a,
+  .ant-pagination-disabled:hover a,
+  .ant-pagination-disabled:focus a,
+  .ant-pagination-disabled .ant-pagination-item-link,
+  .ant-pagination-disabled:hover .ant-pagination-item-link,
+  .ant-pagination-disabled:focus .ant-pagination-item-link {
+    color: @dark-text-color-1;
+  }
+
+  .ant-pagination-item a:not(:hover) {
+    color: @dark-text-color-3;
+  }
+
+  .ant-pagination-item-active {
+    background-color: transparent;
+  }
+
+  .ant-pagination-options-quick-jumper input {
+    background-color: transparent;
+    background-image: none;
+    border-color: @dark-border-color;
+    color: @dark-text-color-3;
+  }
+
+  .ant-popover-message {
+    color: @dark-text-color-3;
+  }
+
+  .ant-popover-inner-content {
+    color: @dark-text-color-3;
+    background-color: @dark-secondary-bgColor;
+    border: 1px solid @dark-border-color;
+    box-shadow:
+      0 3px 6px -4px @light-text-color-3,
+      0 6px 16px 0 @light-text-color-2,
+      0 9px 28px 8px @light-text-color-1;
+  }
+
+  .ant-list-item-meta-title {
+    color: @dark-text-color-3;
+  }
+
+  .ant-popover-placement-bottom>.ant-popover-content>.ant-popover-arrow,
+  .ant-popover-placement-bottomLeft>.ant-popover-content>.ant-popover-arrow,
+  .ant-popover-placement-bottomRight>.ant-popover-content>.ant-popover-arrow {
+    border-top-color: @dark-border-color;
+    border-left-color: @dark-border-color;
+  }
+
+  .ant-popover-placement-top>.ant-popover-content>.ant-popover-arrow,
+  .ant-popover-placement-topLeft>.ant-popover-content>.ant-popover-arrow,
+  .ant-popover-placement-topRight>.ant-popover-content>.ant-popover-arrow {
+    border-right-color: @dark-border-color;
+    border-bottom-color: @dark-border-color;
+  }
+
+  .ant-tag {
+    background-color: transparent;
+    background-image: none;
+    border-color: @dark-border-color;
+    color: @dark-text-color-3;
+  }
+
+  .ant-list-item {
+    color: @dark-text-color-3;
+    border-color: @dark-border-color;
+  }
+
+  .ant-list-item-meta-description {
+    color: @dark-text-color-3;
+  }
+
+  .ant-avatar {
+    background-color: transparent;
+    background-image: none;
+    border: 1px solid @dark-border-color;
+    color: @dark-text-color-3;
+  }
+
+  .ant-form {
+    color: @dark-text-color-3;
+
+    &-item-label > label {
+      color: @dark-text-color-3;
+    }
+  }
+
+  .ant-modal {
+    color: @dark-text-color-3;
+  }
+
+  .ant-modal-content {
+    box-shadow:
+      0 3px 6px -4px @light-text-color-3,
+      0 6px 16px 0 @light-text-color-2,
+      0 9px 28px 8px @light-text-color-1;
+  }
+
+  .ant-modal-content, .ant-modal-header {
+    background-color: @dark-secondary-bgColor;
+  }
+
+  .ant-modal-header, .ant-modal-footer {
+    border-color: @dark-border-color;
+  }
+
+  .ant-modal-confirm-body .ant-modal-confirm-title,
+  .ant-modal-title, .ant-modal-close-x {
+    color: @dark-text-color-3;
+  }
+
+  .ant-radio-button-wrapper,
+  .ant-input-number,
+  .ant-time-picker-input {
+    background-color: transparent;
+    border-color: @dark-border-color;
+    color: @dark-text-color-3;
+  }
+
+  .ant-input-number-handler-wrap {
+    background-color: @dark-secondary-bgColor;
+  }
+
+  .ant-input-number-handler,
+  .ant-time-picker-icon,
+  .ant-time-picker-clear,
+  .ant-time-picker-icon .ant-time-picker-clock-icon,
+  .ant-time-picker-clear .ant-time-picker-clock-icon {
+    color: @dark-text-color-3;
+  }
+
+  .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title,
+  .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-description {
+    color: @dark-text-color-3;
+  }
+
+  .ant-steps-item-wait .ant-steps-item-icon {
+    background-color: transparent;
+    border-color: @dark-border-color;
+  }
+
+  .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-tail::after,
+  .ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-tail::after {
+    background-color: @dark-border-color;
+  }
+
+  .ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon,
+  .ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
+    color: @dark-text-color-3;
+  }
+
+  .ant-form-item,
+  .ant-radio-wrapper,
+  .vm-info-card .resource-detail-item__details a,
+  .vm-info-card .resource-detail-item a {
+    color: @dark-text-color-3;
+  }
+
+  .ant-table-fixed-left table, .ant-table-fixed-right table,
+  .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
+    background-color: @dark-secondary-bgColor;
+  }
+
+  .ant-upload.ant-upload-drag {
+    background-color: transparent;
+    border-color: @dark-border-color;
+  }
+
+  .ant-upload.ant-upload-drag p.ant-upload-text {
+    color: @dark-text-color-3;
+  }
+
+  .ant-tree.ant-tree-show-line li span.ant-tree-switcher {
+    background-color: transparent;
+    color: @dark-text-color-3;
+  }
+
+  .ant-tree li .ant-tree-node-content-wrapper {
+    color: @dark-text-color-3;
+  }
+
+  .ant-tree-icon__customize {
+    color: @dark-text-color-3;
+    background-color: transparent;
+  }
+
+  .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
+    .ant-tree-icon__customize {
+      color: #000;
+    }
+
+    color: #000;
+  }
+
+  .ant-tree li .ant-tree-node-content-wrapper:hover {
+    .ant-tree-icon__customize {
+      color: #000;
+    }
+
+    .ant-tree-title {
+      color: #000;
+    }
+  }
+
+  .form-content, .zone-support {
+    background-color: @dark-background-color;
+    border-color: @dark-border-color;
+  }
+
+  .ant-card-bordered {
+    border-color: @dark-border-color;
+  }
+
+  .ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
+    background-color: @dark-text-color-3;
+  }
+
+  .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
+    color: @dark-text-color-3;
+  }
+
+  .ant-select-selection__clear {
+    background-color: transparent;
+    color: @dark-text-color-3;
+
+    &:hover {
+      color: @dark-text-color-2;
+    }
+  }
+
+  .anticon {
+    &-info-circle {
+      color: @dark-text-color-3;
+    }
+  }
+
+  .ant-message-notice-content {
+    background-color: @dark-secondary-bgColor;
+    color: @dark-text-color-3;
+    box-shadow:
+      0 3px 6px -4px @light-text-color-3,
+      0 6px 16px 0 @light-text-color-2,
+      0 9px 28px 8px @light-text-color-1;
+    border: 1px solid @dark-border-color;
+  }
+
+  .btn-add-tag {
+    background-color: transparent;
+  }
+
+  .tag-disabled-input.ant-input-disabled {
+    background-color: transparent;
+  }
+
+  .tagsTitle {
+    color: @dark-text-color-3;
+  }
+
+  .ant-notification {
+    color: @dark-text-color-3;
+
+    &-notice {
+      background-color: @dark-secondary-bgColor;
+      border: 1px solid @dark-border-color;
+      box-shadow:
+        0 3px 6px -4px @light-text-color-3,
+        0 6px 16px 0 @light-text-color-2,
+        0 9px 28px 8px @light-text-color-1;
+
+      &-message {
+        color: @dark-text-color-4;
+      }
+
+      &-close {
+        color: @dark-text-color-3;
+
+        &:hover {
+          color: @dark-text-color-4;
+        }
+      }
+    }
+  }
+
+  .ant-collapse, .ant-collapse--borderless {
+    background-color: @dark-secondary-bgColor;
+  }
+
+  .ant-collapse>.ant-collapse-item>.ant-collapse-header {
+    color: @dark-text-color-3;
+  }
+
+  .ant-collapse .ant-collapse-item-disabled>.ant-collapse-header,
+  .ant-collapse .ant-collapse-item-disabled>.ant-collapse-header>.arrow {
+    color: @dark-text-color-1;
+  }
+
+  .chart-card-footer {
+    border-color: @dark-border-color;
+  }
+}
+
diff --git a/ui/src/style/index.less b/ui/src/style/index.less
index 0cb6be41c7fa..38b4c6b7d5fa 100644
--- a/ui/src/style/index.less
+++ b/ui/src/style/index.less
@@ -37,3 +37,4 @@
 @import "frame/top-menu";
 
 @import "objects/table";
+@import "dark-mode";
diff --git a/ui/src/style/vars.less b/ui/src/style/vars.less
index 7ee21618a5ca..ccb13dbb5e32 100644
--- a/ui/src/style/vars.less
+++ b/ui/src/style/vars.less
@@ -245,4 +245,72 @@ a {
   .ant-pagination-options {
     display: inline-block;
   }
-} 
\ No newline at end of file
+}
+
+.user-layout {
+  background: #ffffff;
+
+  .ant-input-affix-wrapper .ant-input-prefix,
+  .ant-input-affix-wrapper .ant-input-suffix {
+    color: rgba(0,0,0,.25);
+  }
+}
+
+.footer {
+  .line {
+    a {
+      color: rgba(0, 0, 0, .45);
+
+      &:hover {
+        color: rgba(0, 0, 0, .65);
+      }
+    }
+  }
+
+ .copyright {
+    color: rgba(0, 0, 0, .45);
+  }
+}
+
+.ant-tree-icon__customize {
+  color: rgba(0, 0, 0, 0.45);
+  background: #fff;
+}
+
+.form-content {
+  background-color: #fafafa;
+}
+
+.zone-support {
+  background: #fafafa;
+}
+
+.anticon {
+  &-info-circle {
+    color: rgba(0,0,0,.45);
+  }
+}
+
+.light-row {
+  background-color: #fff;
+}
+
+.dark-row {
+  background-color: #f9f9f9;
+}
+
+.tag-disabled-input, .btn-add-tag {
+  background-color: #fff;
+}
+
+.tagsTitle {
+  color: rgba(0, 0, 0, 0.85);
+}
+
+.ant-btn.filter-button:hover,
+.ant-dropdown-menu-item:hover,
+.ant-dropdown-menu-submenu-title:hover,
+.ant-dropdown-menu-item > a:hover, 
+.ant-dropdown-menu-submenu-title > a:hover {
+  color: @primary-color;
+}
\ No newline at end of file
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index c51487c3b7a5..2b5403162ee3 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -162,7 +162,7 @@
               <span slot="label">
                 {{ $t('label.' + field.name) }}
                 <a-tooltip :title="field.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                  <a-icon type="info-circle" />
                 </a-tooltip>
               </span>
 
diff --git a/ui/src/views/compute/CreateKubernetesCluster.vue b/ui/src/views/compute/CreateKubernetesCluster.vue
index b824e8bf633f..3a66107ef158 100644
--- a/ui/src/views/compute/CreateKubernetesCluster.vue
+++ b/ui/src/views/compute/CreateKubernetesCluster.vue
@@ -26,7 +26,7 @@
           <span slot="label">
             {{ $t('label.name') }}
             <a-tooltip :title="apiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -40,7 +40,7 @@
           <span slot="label">
             {{ $t('label.description') }}
             <a-tooltip :title="apiParams.description.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -53,7 +53,7 @@
           <span slot="label">
             {{ $t('label.zoneid') }}
             <a-tooltip :title="apiParams.zoneid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -78,7 +78,7 @@
           <span slot="label">
             {{ $t('label.kubernetesversionid') }}
             <a-tooltip :title="apiParams.kubernetesversionid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -103,7 +103,7 @@
           <span slot="label">
             {{ $t('label.serviceofferingid') }}
             <a-tooltip :title="apiParams.serviceofferingid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -127,7 +127,7 @@
           <span slot="label">
             {{ $t('label.noderootdisksize') }}
             <a-tooltip :title="apiParams.noderootdisksize.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -147,7 +147,7 @@
           <span slot="label">
             {{ $t('label.networkid') }}
             <a-tooltip :title="apiParams.networkid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -172,7 +172,7 @@
           <span slot="label">
             {{ $t('label.masternodes') }}
             <a-tooltip :title="apiParams.masternodes.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -195,7 +195,7 @@
           <span slot="label">
             {{ $t('label.externalloadbalanceripaddress') }}
             <a-tooltip :title="apiParams.externalloadbalanceripaddress.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -206,7 +206,7 @@
           <span slot="label">
             {{ $t('label.cks.cluster.size') }}
             <a-tooltip :title="apiParams.size.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -229,7 +229,7 @@
           <span slot="label">
             {{ $t('label.keypair') }}
             <a-tooltip :title="apiParams.keypair.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -256,7 +256,7 @@
               <span slot="label">
                 {{ $t('label.username') }}
                 <a-tooltip :title="apiParams.dockerregistryusername.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                  <a-icon type="info-circle" />
                 </a-tooltip>
               </span>
               <a-input
@@ -269,7 +269,7 @@
               <span slot="label">
                 {{ $t('label.password') }}
                 <a-tooltip :title="apiParams.dockerregistrypassword.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                  <a-icon type="info-circle" />
                 </a-tooltip>
               </span>
               <a-input-password
@@ -282,7 +282,7 @@
               <span slot="label">
                 {{ $t('label.url') }}
                 <a-tooltip :title="apiParams.dockerregistryurl.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                  <a-icon type="info-circle" />
                 </a-tooltip>
               </span>
               <a-input
@@ -295,7 +295,7 @@
               <span slot="label">
                 {{ $t('label.email') }}
                 <a-tooltip :title="apiParams.dockerregistryemail.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                  <a-icon type="info-circle" />
                 </a-tooltip>
               </span>
               <a-input
diff --git a/ui/src/views/compute/CreateSnapshotWizard.vue b/ui/src/views/compute/CreateSnapshotWizard.vue
index 4fc391624794..8cff814e255c 100644
--- a/ui/src/views/compute/CreateSnapshotWizard.vue
+++ b/ui/src/views/compute/CreateSnapshotWizard.vue
@@ -26,7 +26,7 @@
           <span slot="label" :title="apiParams.volumeid.description">
             {{ $t('label.volumeid') }}
             <a-tooltip>
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -49,7 +49,7 @@
           <span slot="label" :title="apiParams.name.description">
             {{ $t('label.name') }}
             <a-tooltip>
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -60,7 +60,7 @@
           <span slot="label" :title="apiParams.quiescevm.description">
             {{ $t('label.quiescevm') }}
             <a-tooltip>
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-switch v-decorator="['quiescevm', { initialValue: false }]"/>
@@ -69,7 +69,7 @@
           <span slot="label" :title="apiParams.asyncbackup.description">
             {{ $t('label.asyncbackup') }}
             <a-tooltip>
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-switch v-decorator="['asyncbackup', { initialValue: false }]"/>
diff --git a/ui/src/views/compute/DeployVM.vue b/ui/src/views/compute/DeployVM.vue
index c0965bfd593e..ea30b68ad1d9 100644
--- a/ui/src/views/compute/DeployVM.vue
+++ b/ui/src/views/compute/DeployVM.vue
@@ -165,7 +165,7 @@
                       <span slot="label">
                         {{ $t('label.configuration') }}
                         <a-tooltip :title="$t('message.ovf.configurations')">
-                          <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                          <a-icon type="info-circle" />
                         </a-tooltip>
                       </span>
                       <a-select
@@ -288,7 +288,7 @@
                         <span slot="label">
                           {{ nic.elementName + ' - ' + nic.name }}
                           <a-tooltip :title="nic.networkDescription">
-                            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                            <a-icon type="info-circle" />
                           </a-tooltip>
                         </span>
                         <a-select
@@ -380,7 +380,7 @@
                         <span slot="label" style="text-transform: capitalize">
                           {{ property.label }}
                           <a-tooltip :title="property.description">
-                            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                            <a-icon type="info-circle" />
                           </a-tooltip>
                         </span>
 
diff --git a/ui/src/views/compute/DestroyVM.vue b/ui/src/views/compute/DestroyVM.vue
index 4c09b1282f70..c6e62a9e8e1f 100644
--- a/ui/src/views/compute/DestroyVM.vue
+++ b/ui/src/views/compute/DestroyVM.vue
@@ -27,7 +27,7 @@
           <span slot="label">
             {{ $t('label.expunge') }}
             <a-tooltip placement="bottom" :title="apiParams.expunge.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-switch v-decorator="['expunge']" :auto-focus="true" />
@@ -37,7 +37,7 @@
           <span slot="label">
             {{ $t('label.delete.volumes') }}
             <a-tooltip placement="bottom" :title="apiParams.volumeids.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
diff --git a/ui/src/views/compute/EditVM.vue b/ui/src/views/compute/EditVM.vue
index c9f342ba3928..ef0d29a0629c 100644
--- a/ui/src/views/compute/EditVM.vue
+++ b/ui/src/views/compute/EditVM.vue
@@ -26,7 +26,7 @@
         <span slot="label">
           {{ $t('label.name') }}
           <a-tooltip :title="apiParams.name.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-input
@@ -37,7 +37,7 @@
         <span slot="label">
           {{ $t('label.displayname') }}
           <a-tooltip :title="apiParams.displayname.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-input
@@ -47,7 +47,7 @@
         <span slot="label">
           {{ $t('label.ostypeid') }}
           <a-tooltip :title="apiParams.ostypeid.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-select
@@ -67,7 +67,7 @@
         <span slot="label">
           {{ $t('label.isdynamicallyscalable') }}
           <a-tooltip :title="apiParams.isdynamicallyscalable.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-switch
@@ -78,7 +78,7 @@
         <span slot="label">
           {{ $t('label.haenable') }}
           <a-tooltip :title="apiParams.haenable.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-switch
@@ -89,7 +89,7 @@
         <span slot="label">
           {{ $t('label.group') }}
           <a-tooltip :title="apiParams.group.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-auto-complete
diff --git a/ui/src/views/compute/ScaleKubernetesCluster.vue b/ui/src/views/compute/ScaleKubernetesCluster.vue
index 11dd4bf7f95f..51b2dc565ef5 100644
--- a/ui/src/views/compute/ScaleKubernetesCluster.vue
+++ b/ui/src/views/compute/ScaleKubernetesCluster.vue
@@ -30,7 +30,7 @@
           <span slot="label">
             {{ $t('label.cks.cluster.size') }}
             <a-tooltip :title="apiParams.size.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -52,7 +52,7 @@
           <span slot="label">
             {{ $t('label.serviceofferingid') }}
             <a-tooltip :title="apiParams.serviceofferingid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
diff --git a/ui/src/views/compute/StartVirtualMachine.vue b/ui/src/views/compute/StartVirtualMachine.vue
index beb82c74807a..512cd9f6bfd6 100644
--- a/ui/src/views/compute/StartVirtualMachine.vue
+++ b/ui/src/views/compute/StartVirtualMachine.vue
@@ -31,7 +31,7 @@
             <span slot="label">
               {{ $t('label.podid') }}
               <a-tooltip :title="apiParams.podid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -54,7 +54,7 @@
             <span slot="label">
               {{ $t('label.clusterid') }}
               <a-tooltip :title="apiParams.clusterid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -77,7 +77,7 @@
             <span slot="label">
               {{ $t('label.hostid') }}
               <a-tooltip :title="apiParams.hostid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -101,7 +101,7 @@
           <span slot="label">
             {{ $t('label.bootintosetup') }}
             <a-tooltip :title="apiParams.bootintosetup.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-switch
diff --git a/ui/src/views/compute/UpgradeKubernetesCluster.vue b/ui/src/views/compute/UpgradeKubernetesCluster.vue
index e681b2f228da..e5e3140dbec9 100644
--- a/ui/src/views/compute/UpgradeKubernetesCluster.vue
+++ b/ui/src/views/compute/UpgradeKubernetesCluster.vue
@@ -30,7 +30,7 @@
           <span slot="label">
             {{ $t('label.kubernetesversionid') }}
             <a-tooltip :title="apiParams.kubernetesversionid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
diff --git a/ui/src/views/compute/wizard/NetworkConfiguration.vue b/ui/src/views/compute/wizard/NetworkConfiguration.vue
index 5a9c7ed0d1de..0d9a2a5dabd3 100644
--- a/ui/src/views/compute/wizard/NetworkConfiguration.vue
+++ b/ui/src/views/compute/wizard/NetworkConfiguration.vue
@@ -45,7 +45,7 @@
           :placeholder="record.cidr"
           @change="($event) => updateNetworkData('ipAddress', record.id, $event.target.value)">
           <a-tooltip v-if="record.type !== 'L2'" slot="suffix" :title="getIpRangeDescription(record)">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </a-input>
       </a-form-item>
@@ -63,7 +63,7 @@
           }]"
           @change="($event) => updateNetworkData('macAddress', record.id, $event.target.value)">
           <a-tooltip slot="suffix" :title="$t('label.macaddress.example')">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </a-input>
       </a-form-item>
diff --git a/ui/src/views/iam/AddAccount.vue b/ui/src/views/iam/AddAccount.vue
index bb0359b23728..ae59fe74c2ae 100644
--- a/ui/src/views/iam/AddAccount.vue
+++ b/ui/src/views/iam/AddAccount.vue
@@ -23,7 +23,7 @@
           <span slot="label">
             {{ $t('label.role') }}
             <a-tooltip :title="apiParams.roleid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -42,7 +42,7 @@
           <span slot="label">
             {{ $t('label.username') }}
             <a-tooltip :title="apiParams.username.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -57,7 +57,7 @@
               <span slot="label">
                 {{ $t('label.password') }}
                 <a-tooltip :title="apiParams.password.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                  <a-icon type="info-circle" />
                 </a-tooltip>
               </span>
               <a-input-password
@@ -72,7 +72,7 @@
               <span slot="label">
                 {{ $t('label.confirmpassword') }}
                 <a-tooltip :title="apiParams.password.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                  <a-icon type="info-circle" />
                 </a-tooltip>
               </span>
               <a-input-password
@@ -90,7 +90,7 @@
           <span slot="label">
             {{ $t('label.email') }}
             <a-tooltip :title="apiParams.email.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -105,7 +105,7 @@
               <span slot="label">
                 {{ $t('label.firstname') }}
                 <a-tooltip :title="apiParams.firstname.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                  <a-icon type="info-circle" />
                 </a-tooltip>
               </span>
               <a-input
@@ -120,7 +120,7 @@
               <span slot="label">
                 {{ $t('label.lastname') }}
                 <a-tooltip :title="apiParams.lastname.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                  <a-icon type="info-circle" />
                 </a-tooltip>
               </span>
               <a-input
@@ -135,7 +135,7 @@
           <span slot="label">
             {{ $t('label.domain') }}
             <a-tooltip :title="apiParams.domainid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -153,7 +153,7 @@
           <span slot="label">
             {{ $t('label.account') }}
             <a-tooltip :title="apiParams.account.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input v-decorator="['account']" :placeholder="apiParams.account.description" />
@@ -162,7 +162,7 @@
           <span slot="label">
             {{ $t('label.timezone') }}
             <a-tooltip :title="apiParams.timezone.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -179,7 +179,7 @@
           <span slot="label">
             {{ $t('label.networkdomain') }}
             <a-tooltip :title="apiParams.networkdomain.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -194,7 +194,7 @@
             <span slot="label">
               {{ $t('label.samlentity') }}
               <a-tooltip :title="apiParams.entityid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
diff --git a/ui/src/views/iam/AddLdapAccount.vue b/ui/src/views/iam/AddLdapAccount.vue
index 2190443a3ca2..b7bf89e5c270 100644
--- a/ui/src/views/iam/AddLdapAccount.vue
+++ b/ui/src/views/iam/AddLdapAccount.vue
@@ -476,12 +476,4 @@ export default {
   }
 }
 
-/deep/ .light-row {
-  background-color: #fff;
-}
-
-/deep/ .dark-row {
-  background-color: #f9f9f9;
-}
-
 </style>
diff --git a/ui/src/views/iam/AddUser.vue b/ui/src/views/iam/AddUser.vue
index 8ef88eb64cee..7237e0a340e8 100644
--- a/ui/src/views/iam/AddUser.vue
+++ b/ui/src/views/iam/AddUser.vue
@@ -23,7 +23,7 @@
           <span slot="label">
             {{ $t('label.username') }}
             <a-tooltip :title="apiParams.username.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -39,7 +39,7 @@
               <span slot="label">
                 {{ $t('label.password') }}
                 <a-tooltip :title="apiParams.password.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                  <a-icon type="info-circle" />
                 </a-tooltip>
               </span>
               <a-input-password
@@ -54,7 +54,7 @@
               <span slot="label">
                 {{ $t('label.confirmpassword') }}
                 <a-tooltip :title="apiParams.password.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                  <a-icon type="info-circle" />
                 </a-tooltip>
               </span>
               <a-input-password
@@ -72,7 +72,7 @@
           <span slot="label">
             {{ $t('label.email') }}
             <a-tooltip :title="apiParams.email.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -87,7 +87,7 @@
               <span slot="label">
                 {{ $t('label.firstname') }}
                 <a-tooltip :title="apiParams.firstname.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                  <a-icon type="info-circle" />
                 </a-tooltip>
               </span>
               <a-input
@@ -102,7 +102,7 @@
               <span slot="label">
                 {{ $t('label.lastname') }}
                 <a-tooltip :title="apiParams.lastname.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                  <a-icon type="info-circle" />
                 </a-tooltip>
               </span>
               <a-input
@@ -117,7 +117,7 @@
           <span slot="label">
             {{ $t('label.domain') }}
             <a-tooltip :title="apiParams.domainid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -133,7 +133,7 @@
           <span slot="label">
             {{ $t('label.account') }}
             <a-tooltip :title="apiParams.account.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -149,7 +149,7 @@
           <span slot="label">
             {{ $t('label.timezone') }}
             <a-tooltip :title="apiParams.timezone.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -169,7 +169,7 @@
             <span slot="label">
               {{ $t('label.samlentity') }}
               <a-tooltip :title="apiParams.entityid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
diff --git a/ui/src/views/iam/ChangeUserPassword.vue b/ui/src/views/iam/ChangeUserPassword.vue
index 27fc269bf38b..a2cbedd69b92 100644
--- a/ui/src/views/iam/ChangeUserPassword.vue
+++ b/ui/src/views/iam/ChangeUserPassword.vue
@@ -26,7 +26,7 @@
           <span slot="label">
             {{ $t('label.currentpassword') }}
             <a-tooltip :title="apiParams.currentpassword.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input-password
@@ -40,7 +40,7 @@
           <span slot="label">
             {{ $t('label.new.password') }}
             <a-tooltip :title="apiParams.password.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input-password
@@ -53,7 +53,7 @@
           <span slot="label">
             {{ $t('label.confirmpassword') }}
             <a-tooltip :title="apiParams.password.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input-password
diff --git a/ui/src/views/iam/CreateRole.vue b/ui/src/views/iam/CreateRole.vue
index 7531f74b0542..14d68c43991e 100644
--- a/ui/src/views/iam/CreateRole.vue
+++ b/ui/src/views/iam/CreateRole.vue
@@ -26,7 +26,7 @@
           <span slot="label">
             {{ $t('label.name') }}
             <a-tooltip :title="createRoleApiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -41,7 +41,7 @@
           <span slot="label">
             {{ $t('label.description') }}
             <a-tooltip :title="createRoleApiParams.description.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -53,7 +53,7 @@
           <span slot="label">
             {{ $t('label.based.on') }}
             <a-tooltip :title="$t('label.based.on.role.id.or.type')">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-radio-group
@@ -75,7 +75,7 @@
           <span slot="label">
             {{ $t('label.type') }}
             <a-tooltip :title="createRoleApiParams.type.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -93,7 +93,7 @@
           <span slot="label">
             {{ $t('label.role') }}
             <a-tooltip :title="createRoleApiParams.roleid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
diff --git a/ui/src/views/iam/DomainActionForm.vue b/ui/src/views/iam/DomainActionForm.vue
index b5152a61d6b1..85ac9233f7eb 100644
--- a/ui/src/views/iam/DomainActionForm.vue
+++ b/ui/src/views/iam/DomainActionForm.vue
@@ -49,7 +49,7 @@
             <span slot="label">
               {{ $t('label.' + field.name) }}
               <a-tooltip :title="field.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
 
diff --git a/ui/src/views/iam/EditUser.vue b/ui/src/views/iam/EditUser.vue
index e9662b1cb4a0..3e79844aa076 100644
--- a/ui/src/views/iam/EditUser.vue
+++ b/ui/src/views/iam/EditUser.vue
@@ -23,7 +23,7 @@
           <span slot="label">
             {{ $t('label.username') }}
             <a-tooltip :title="apiParams.username.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -37,7 +37,7 @@
           <span slot="label">
             {{ $t('label.email') }}
             <a-tooltip :title="apiParams.email.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -52,7 +52,7 @@
               <span slot="label">
                 {{ $t('label.firstname') }}
                 <a-tooltip :title="apiParams.firstname.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                  <a-icon type="info-circle" />
                 </a-tooltip>
               </span>
               <a-input
@@ -67,7 +67,7 @@
               <span slot="label">
                 {{ $t('label.lastname') }}
                 <a-tooltip :title="apiParams.lastname.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                  <a-icon type="info-circle" />
                 </a-tooltip>
               </span>
               <a-input
@@ -82,7 +82,7 @@
           <span slot="label">
             {{ $t('label.timezone') }}
             <a-tooltip :title="apiParams.timezone.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
diff --git a/ui/src/views/iam/ImportRole.vue b/ui/src/views/iam/ImportRole.vue
index 278f8dae8635..fbdf98ab298a 100644
--- a/ui/src/views/iam/ImportRole.vue
+++ b/ui/src/views/iam/ImportRole.vue
@@ -26,7 +26,7 @@
           <span slot="label">
             {{ $t('label.rules.file') }}
             <a-tooltip :title="$t('label.rules.file.to.import')">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-upload-dragger
@@ -55,7 +55,7 @@
           <span slot="label">
             {{ $t('label.name') }}
             <a-tooltip :title="importRoleApiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -70,7 +70,7 @@
           <span slot="label">
             {{ $t('label.description') }}
             <a-tooltip :title="importRoleApiParams.description.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -82,7 +82,7 @@
           <span slot="label">
             {{ $t('label.type') }}
             <a-tooltip :title="importRoleApiParams.type.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -100,7 +100,7 @@
           <span slot="label">
             {{ $t('label.forced') }}
             <a-tooltip :title="importRoleApiParams.forced.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-switch
diff --git a/ui/src/views/image/AddKubernetesSupportedVersion.vue b/ui/src/views/image/AddKubernetesSupportedVersion.vue
index 863be6328de4..8c79f1c54cda 100644
--- a/ui/src/views/image/AddKubernetesSupportedVersion.vue
+++ b/ui/src/views/image/AddKubernetesSupportedVersion.vue
@@ -26,7 +26,7 @@
           <span slot="label">
             {{ $t('label.semanticversion') }}
             <a-tooltip :title="apiParams.semanticversion.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -40,7 +40,7 @@
           <span slot="label">
             {{ $t('label.name') }}
             <a-tooltip :title="apiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -53,7 +53,7 @@
           <span slot="label">
             {{ $t('label.zoneid') }}
             <a-tooltip :title="apiParams.zoneid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -86,7 +86,7 @@
           <span slot="label">
             {{ $t('label.url') }}
             <a-tooltip :title="apiParams.url.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -99,7 +99,7 @@
           <span slot="label">
             {{ $t('label.checksum') }}
             <a-tooltip :title="apiParams.checksum.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -112,7 +112,7 @@
           <span slot="label">
             {{ $t('label.mincpunumber') }}
             <a-tooltip :title="apiParams.mincpunumber.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -134,7 +134,7 @@
           <span slot="label">
             {{ $t('label.minmemory') }}
             <a-tooltip :title="apiParams.minmemory.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
diff --git a/ui/src/views/infra/AddPrimaryStorage.vue b/ui/src/views/infra/AddPrimaryStorage.vue
index 061f84ce5f9e..a65a819a02a2 100644
--- a/ui/src/views/infra/AddPrimaryStorage.vue
+++ b/ui/src/views/infra/AddPrimaryStorage.vue
@@ -23,7 +23,7 @@
           <span slot="label">
             {{ $t('label.scope') }}
             <a-tooltip :title="apiParams.scope.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -39,7 +39,7 @@
             <span slot="label">
               {{ $t('label.hypervisor') }}
               <a-tooltip :title="apiParams.hypervisor.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -55,7 +55,7 @@
           <span slot="label">
             {{ $t('label.zoneid') }}
             <a-tooltip :title="apiParams.zoneid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -71,7 +71,7 @@
             <span slot="label">
               {{ $t('label.podid') }}
               <a-tooltip :title="apiParams.podid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -86,7 +86,7 @@
             <span slot="label">
               {{ $t('label.clusterid') }}
               <a-tooltip :title="apiParams.clusterid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -113,7 +113,7 @@
           <span slot="label">
             {{ $t('label.name') }}
             <a-tooltip :title="apiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input v-decorator="['name', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
@@ -122,7 +122,7 @@
           <span slot="label">
             {{ $t('label.protocol') }}
             <a-tooltip :title="$t('message.protocol.description')">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -140,7 +140,7 @@
             <span slot="label">
               {{ $t('label.server') }}
               <a-tooltip :title="$t('message.server.description')">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input v-decorator="['server', { rules: [{ required: true, message: `${$t('label.required')}` }] }]" />
@@ -151,7 +151,7 @@
             <span slot="label">
               {{ $t('label.path') }}
               <a-tooltip :title="$t('message.path.description')">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input v-decorator="['path', { rules: [{ required: true, message: `${$t('label.required')}` }] }]" />
@@ -181,7 +181,7 @@
             <span slot="label">
               {{ $t('label.vcenterdatacenter') }}
               <a-tooltip :title="$t('message.datacenter.description')">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input v-decorator="['vCenterDataCenter', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
@@ -190,7 +190,7 @@
             <span slot="label">
               {{ $t('label.vcenterdatastore') }}
               <a-tooltip :title="$t('message.datastore.description')">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input v-decorator="['vCenterDataStore', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
@@ -200,7 +200,7 @@
           <span slot="label">
             {{ $t('label.providername') }}
             <a-tooltip :title="apiParams.provider.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -216,7 +216,7 @@
             <span slot="label">
               {{ $t('label.ismanaged') }}
               <a-tooltip :title="apiParams.managed.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-checkbox-group v-decorator="['managed']" >
@@ -227,7 +227,7 @@
             <span slot="label">
               {{ $t('label.capacitybytes') }}
               <a-tooltip :title="apiParams.capacitybytes.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input v-decorator="['capacityBytes']" />
@@ -236,7 +236,7 @@
             <span slot="label">
               {{ $t('label.capacityiops') }}
               <a-tooltip :title="apiParams.capacityiops.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input v-decorator="['capacityIops']" />
@@ -245,7 +245,7 @@
             <span slot="label">
               {{ $t('label.url') }}
               <a-tooltip :title="apiParams.url.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input v-decorator="['url']" />
@@ -278,7 +278,7 @@
           <span slot="label">
             {{ $t('label.storagetags') }}
             <a-tooltip :title="apiParams.tags.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
diff --git a/ui/src/views/infra/InfraSummary.vue b/ui/src/views/infra/InfraSummary.vue
index 46707a400212..d2d23bb50d43 100644
--- a/ui/src/views/infra/InfraSummary.vue
+++ b/ui/src/views/infra/InfraSummary.vue
@@ -54,7 +54,7 @@
                 <span slot="label">
                   {{ $t('label.root.certificate') }}
                   <a-tooltip placement="bottom" :title="apiParams.name.description">
-                    <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                    <a-icon type="info-circle" />
                   </a-tooltip>
                 </span>
                 <a-textarea
@@ -78,7 +78,7 @@
                   <span slot="label">
                     {{ $t('label.intermediate.certificate') + ` ${index + 1} ` }}
                     <a-tooltip placement="bottom" :title="apiParams.id.description">
-                      <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                      <a-icon type="info-circle" />
                     </a-tooltip>
                   </span>
                   <a-textarea
@@ -105,7 +105,7 @@
                 <span slot="label">
                   {{ $t('label.server.certificate') }}
                   <a-tooltip placement="bottom" :title="apiParams.certificate.description">
-                    <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                    <a-icon type="info-circle" />
                   </a-tooltip>
                 </span>
                 <a-textarea
@@ -124,7 +124,7 @@
                 <span slot="label">
                   {{ $t('label.pkcs.private.certificate') }}
                   <a-tooltip placement="bottom" :title="apiParams.privatekey.description">
-                    <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                    <a-icon type="info-circle" />
                   </a-tooltip>
                 </span>
                 <a-textarea
@@ -143,7 +143,7 @@
                 <span slot="label">
                   {{ $t('label.domain.suffix') }}
                   <a-tooltip placement="bottom" :title="apiParams.domainsuffix.description">
-                    <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                    <a-icon type="info-circle" />
                   </a-tooltip>
                 </span>
                 <a-input
diff --git a/ui/src/views/infra/network/EditTrafficLabel.vue b/ui/src/views/infra/network/EditTrafficLabel.vue
index 559e85756f51..1327ef593c1e 100644
--- a/ui/src/views/infra/network/EditTrafficLabel.vue
+++ b/ui/src/views/infra/network/EditTrafficLabel.vue
@@ -23,7 +23,7 @@
           <span slot="label">
             {{ $t('label.traffictype') }}
             <a-tooltip :title="apiParams.id.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -43,7 +43,7 @@
           <span slot="label">
             {{ $t('label.kvmnetworklabel') }}
             <a-tooltip :title="apiParams.kvmnetworklabel.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -56,7 +56,7 @@
           <span slot="label">
             {{ $t('label.vmwarenetworklabel') }}
             <a-tooltip :title="apiParams.vmwarenetworklabel.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -69,7 +69,7 @@
           <span slot="label">
             {{ $t('label.xennetworklabel') }}
             <a-tooltip :title="apiParams.xennetworklabel.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -82,7 +82,7 @@
           <span slot="label">
             {{ $t('label.hypervnetworklabel') }}
             <a-tooltip :title="apiParams.hypervnetworklabel.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -95,7 +95,7 @@
           <span slot="label">
             {{ $t('label.ovm3networklabel') }}
             <a-tooltip :title="apiParams.ovm3networklabel.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
diff --git a/ui/src/views/infra/routers/RouterHealthCheck.vue b/ui/src/views/infra/routers/RouterHealthCheck.vue
index 86ff8e4d1af6..e802dc78e669 100644
--- a/ui/src/views/infra/routers/RouterHealthCheck.vue
+++ b/ui/src/views/infra/routers/RouterHealthCheck.vue
@@ -58,7 +58,7 @@
               <span slot="label">
                 {{ $t('label.perform.fresh.checks') }}
                 <a-tooltip :title="apiParams.performfreshchecks.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                  <a-icon type="info-circle" />
                 </a-tooltip>
               </span>
               <a-switch
diff --git a/ui/src/views/infra/zone/ZoneWizardZoneTypeStep.vue b/ui/src/views/infra/zone/ZoneWizardZoneTypeStep.vue
index 72b4a60dd19c..f304315da797 100644
--- a/ui/src/views/infra/zone/ZoneWizardZoneTypeStep.vue
+++ b/ui/src/views/infra/zone/ZoneWizardZoneTypeStep.vue
@@ -139,7 +139,6 @@ export default {
   .form-content {
     border: 1px dashed #e9e9e9;
     border-radius: 6px;
-    background-color: #fafafa;
     min-height: 200px;
     text-align: center;
     vertical-align: center;
@@ -161,7 +160,6 @@ export default {
 
     .zone-support {
       text-align: justify;
-      background: #fafafa;
     }
   }
 </style>
diff --git a/ui/src/views/network/CreateIsolatedNetworkForm.vue b/ui/src/views/network/CreateIsolatedNetworkForm.vue
index 135e6bc3ff16..74c3b87e3ec2 100644
--- a/ui/src/views/network/CreateIsolatedNetworkForm.vue
+++ b/ui/src/views/network/CreateIsolatedNetworkForm.vue
@@ -27,7 +27,7 @@
             <span slot="label">
               {{ $t('label.name') }}
               <a-tooltip :title="apiParams.name.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -41,7 +41,7 @@
             <span slot="label">
               {{ $t('label.displaytext') }}
               <a-tooltip :title="apiParams.displaytext.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -54,7 +54,7 @@
             <span slot="label">
               {{ $t('label.zoneid') }}
               <a-tooltip :title="apiParams.zoneid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -83,7 +83,7 @@
             <span slot="label">
               {{ $t('label.domain') }}
               <a-tooltip :title="apiParams.domainid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -105,7 +105,7 @@
             <span slot="label">
               {{ $t('label.networkofferingid') }}
               <a-tooltip :title="apiParams.networkofferingid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -134,7 +134,7 @@
             <span slot="label">
               {{ $t('label.vlan') }}
               <a-tooltip :title="apiParams.vlan.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -147,7 +147,7 @@
             <span slot="label">
               {{ $t('label.vpcid') }}
               <a-tooltip :title="apiParams.vpcid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -176,7 +176,7 @@
             <span slot="label">
               {{ $t('label.externalid') }}
               <a-tooltip :title="apiParams.externalid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -187,7 +187,7 @@
             <span slot="label">
               {{ $t('label.gateway') }}
               <a-tooltip :title="apiParams.gateway.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -198,7 +198,7 @@
             <span slot="label">
               {{ $t('label.netmask') }}
               <a-tooltip :title="apiParams.netmask.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -209,7 +209,7 @@
             <span slot="label">
               {{ $t('label.networkdomain') }}
               <a-tooltip :title="apiParams.networkdomain.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -220,7 +220,7 @@
             <span slot="label">
               {{ $t('label.account') }}
               <a-tooltip :title="apiParams.account.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -542,7 +542,6 @@ export default {
 
 .tagsTitle {
   font-weight: 500;
-  color: rgba(0, 0, 0, 0.85);
   margin-bottom: 12px;
 }
 
diff --git a/ui/src/views/network/CreateL2NetworkForm.vue b/ui/src/views/network/CreateL2NetworkForm.vue
index 9771e2822386..3a3a69a004a8 100644
--- a/ui/src/views/network/CreateL2NetworkForm.vue
+++ b/ui/src/views/network/CreateL2NetworkForm.vue
@@ -27,7 +27,7 @@
             <span slot="label">
               {{ $t('label.name') }}
               <a-tooltip :title="apiParams.name.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -41,7 +41,7 @@
             <span slot="label">
               {{ $t('label.displaytext') }}
               <a-tooltip :title="apiParams.displaytext.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -54,7 +54,7 @@
             <span slot="label">
               {{ $t('label.zoneid') }}
               <a-tooltip :title="apiParams.zoneid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -83,7 +83,7 @@
             <span slot="label">
               {{ $t('label.domain') }}
               <a-tooltip :title="apiParams.domainid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -105,7 +105,7 @@
             <span slot="label">
               {{ $t('label.networkofferingid') }}
               <a-tooltip :title="apiParams.networkofferingid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -134,7 +134,7 @@
             <span slot="label">
               {{ $t('label.vlan') }}
               <a-tooltip :title="apiParams.vlan.description" v-if="'vlan' in apiParams">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -147,7 +147,7 @@
             <span slot="label">
               {{ $t('label.bypassvlanoverlapcheck') }}
               <a-tooltip :title="apiParams.bypassvlanoverlapcheck.description" v-if="'bypassvlanoverlapcheck' in apiParams">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-switch v-decorator="['bypassvlanoverlapcheck']" />
@@ -156,7 +156,7 @@
             <span slot="label">
               {{ $t('label.isolatedpvlantype') }}
               <a-tooltip :title="apiParams.isolatedpvlantype.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-radio-group
@@ -183,7 +183,7 @@
             <span slot="label">
               {{ $t('label.isolatedpvlanid') }}
               <a-tooltip :title="apiParams.isolatedpvlan.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -194,7 +194,7 @@
             <span slot="label">
               {{ $t('label.account') }}
               <a-tooltip :title="apiParams.account.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -484,7 +484,6 @@ export default {
 
 .tagsTitle {
   font-weight: 500;
-  color: rgba(0, 0, 0, 0.85);
   margin-bottom: 12px;
 }
 
diff --git a/ui/src/views/network/CreateSharedNetworkForm.vue b/ui/src/views/network/CreateSharedNetworkForm.vue
index e25560473804..922973537d65 100644
--- a/ui/src/views/network/CreateSharedNetworkForm.vue
+++ b/ui/src/views/network/CreateSharedNetworkForm.vue
@@ -27,7 +27,7 @@
             <span slot="label">
               {{ $t('label.name') }}
               <a-tooltip :title="apiParams.name.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -41,7 +41,7 @@
             <span slot="label">
               {{ $t('label.displaytext') }}
               <a-tooltip :title="apiParams.displaytext.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -54,7 +54,7 @@
             <span slot="label">
               {{ $t('label.zoneid') }}
               <a-tooltip :title="apiParams.zoneid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -83,7 +83,7 @@
             <span slot="label">
               {{ $t('label.physicalnetworkid') }}
               <a-tooltip :title="apiParams.physicalnetworkid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -105,7 +105,7 @@
             <span slot="label">
               {{ $t('label.vlan') }}
               <a-tooltip :title="apiParams.vlan.description" v-if="'vlan' in apiParams">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -118,7 +118,7 @@
             <span slot="label">
               {{ $t('label.bypassvlanoverlapcheck') }}
               <a-tooltip :title="apiParams.bypassvlanoverlapcheck.description" v-if="'bypassvlanoverlapcheck' in apiParams">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-switch v-decorator="['bypassvlanoverlapcheck']" />
@@ -127,7 +127,7 @@
             <span slot="label">
               {{ $t('label.isolatedpvlantype') }}
               <a-tooltip :title="apiParams.isolatedpvlantype.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-radio-group
@@ -154,7 +154,7 @@
             <span slot="label">
               {{ $t('label.isolatedpvlanid') }}
               <a-tooltip :title="apiParams.isolatedpvlan.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -186,7 +186,7 @@
             <span slot="label">
               {{ $t('label.domain') }}
               <a-tooltip :title="apiParams.domainid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -215,7 +215,7 @@
             <span slot="label">
               {{ $t('label.subdomainaccess') }}
               <a-tooltip :title="apiParams.subdomainaccess.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-switch v-decorator="['subdomainaccess']" />
@@ -224,7 +224,7 @@
             <span slot="label">
               {{ $t('label.account') }}
               <a-tooltip :title="apiParams.account.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -235,7 +235,7 @@
             <span slot="label">
               {{ $t('label.projectid') }}
               <a-tooltip :title="apiParams.projectid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -264,7 +264,7 @@
             <span slot="label">
               {{ $t('label.networkofferingid') }}
               <a-tooltip :title="apiParams.networkofferingid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -293,7 +293,7 @@
             <span slot="label">
               {{ $t('label.ip4gateway') }}
               <a-tooltip :title="apiParams.gateway.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -304,7 +304,7 @@
             <span slot="label">
               {{ $t('label.ip4netmask') }}
               <a-tooltip :title="apiParams.netmask.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -315,7 +315,7 @@
             <span slot="label">
               {{ $t('label.startipv4') }}
               <a-tooltip :title="apiParams.startip.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -326,7 +326,7 @@
             <span slot="label">
               {{ $t('label.endipv4') }}
               <a-tooltip :title="apiParams.endip.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -337,7 +337,7 @@
             <span slot="label">
               {{ $t('label.ip6gateway') }}
               <a-tooltip :title="apiParams.ip6gateway.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -348,7 +348,7 @@
             <span slot="label">
               {{ $t('label.ip6cidr') }}
               <a-tooltip :title="apiParams.ip6cidr.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -359,7 +359,7 @@
             <span slot="label">
               {{ $t('label.startipv6') }}
               <a-tooltip :title="apiParams.startipv6.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -370,7 +370,7 @@
             <span slot="label">
               {{ $t('label.endipv6') }}
               <a-tooltip :title="apiParams.endipv6.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -381,7 +381,7 @@
             <span slot="label">
               {{ $t('label.networkdomain') }}
               <a-tooltip :title="apiParams.networkdomain.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -392,7 +392,7 @@
             <span slot="label">
               {{ $t('label.hideipaddressusage') }}
               <a-tooltip :title="apiParams.hideipaddressusage.description" v-if="'hideipaddressusage' in apiParams">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-switch v-decorator="['hideipaddressusage']" />
@@ -863,7 +863,6 @@ export default {
 
 .tagsTitle {
   font-weight: 500;
-  color: rgba(0, 0, 0, 0.85);
   margin-bottom: 12px;
 }
 
diff --git a/ui/src/views/network/CreateVlanIpRange.vue b/ui/src/views/network/CreateVlanIpRange.vue
index 60f638ee4230..f5290b81b02e 100644
--- a/ui/src/views/network/CreateVlanIpRange.vue
+++ b/ui/src/views/network/CreateVlanIpRange.vue
@@ -38,7 +38,7 @@
             <span slot="label">
               {{ $t('label.gateway') }}
               <a-tooltip :title="apiParams.gateway.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -52,7 +52,7 @@
             <span slot="label">
               {{ $t('label.netmask') }}
               <a-tooltip :title="apiParams.netmask.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -67,7 +67,7 @@
                 <span slot="label">
                   {{ $t('label.startipv4') }}
                   <a-tooltip :title="apiParams.startip.description">
-                    <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                    <a-icon type="info-circle" />
                   </a-tooltip>
                 </span>
                 <a-input
@@ -89,7 +89,7 @@
                 <span slot="label">
                   {{ $t('label.endipv4') }}
                   <a-tooltip :title="apiParams.endip.description">
-                    <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                    <a-icon type="info-circle" />
                   </a-tooltip>
                 </span>
                 <a-input
@@ -111,7 +111,7 @@
             <span slot="label">
               {{ $t('label.ip6cidr') }}
               <a-tooltip :title="apiParams.ip6cidr.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -122,7 +122,7 @@
             <span slot="label">
               {{ $t('label.ip6gateway') }}
               <a-tooltip :title="apiParams.ip6gateway.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -135,7 +135,7 @@
                 <span slot="label">
                   {{ $t('label.startipv6') }}
                   <a-tooltip :title="apiParams.startipv6.description">
-                    <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                    <a-icon type="info-circle" />
                   </a-tooltip>
                 </span>
                 <a-input
@@ -156,7 +156,7 @@
                 <span slot="label">
                   {{ $t('label.endipv6') }}
                   <a-tooltip :title="apiParams.endipv6.description">
-                    <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                    <a-icon type="info-circle" />
                   </a-tooltip>
                 </span>
                 <a-input
diff --git a/ui/src/views/network/CreateVpc.vue b/ui/src/views/network/CreateVpc.vue
index 4d3ebffd03ac..f1def169fce5 100644
--- a/ui/src/views/network/CreateVpc.vue
+++ b/ui/src/views/network/CreateVpc.vue
@@ -24,7 +24,7 @@
           <span slot="label">
             {{ $t('label.name') }}
             <a-tooltip :title="apiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -38,7 +38,7 @@
           <span slot="label">
             {{ $t('label.displaytext') }}
             <a-tooltip :title="apiParams.displaytext.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -51,7 +51,7 @@
           <span slot="label">
             {{ $t('label.zoneid') }}
             <a-tooltip :title="apiParams.zoneid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -70,7 +70,7 @@
           <span slot="label">
             {{ $t('label.cidr') }}
             <a-tooltip :title="apiParams.cidr.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -83,7 +83,7 @@
           <span slot="label">
             {{ $t('label.networkdomain') }}
             <a-tooltip :title="apiParams.networkdomain.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -94,7 +94,7 @@
           <span slot="label">
             {{ $t('label.vpcofferingid') }}
             <a-tooltip :title="apiParams.vpcofferingid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -111,7 +111,7 @@
           <span slot="label">
             {{ $t('label.start') }}
             <a-tooltip :title="apiParams.start.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-switch v-decorator="['start', {initialValue: true}]" defaultChecked />
diff --git a/ui/src/views/network/CreateVpnCustomerGateway.vue b/ui/src/views/network/CreateVpnCustomerGateway.vue
index 666bece867b4..845fffb25566 100644
--- a/ui/src/views/network/CreateVpnCustomerGateway.vue
+++ b/ui/src/views/network/CreateVpnCustomerGateway.vue
@@ -21,7 +21,7 @@
         <span slot="label">
           {{ $t('label.name') }}
           <a-tooltip :title="apiParams.name.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-input
@@ -38,7 +38,7 @@
         <span slot="label">
           {{ $t('label.gateway') }}
           <a-tooltip :title="apiParams.gateway.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-input
@@ -54,7 +54,7 @@
         <span slot="label">
           {{ $t('label.cidrlist') }}
           <a-tooltip :title="apiParams.cidrlist.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-input
@@ -70,7 +70,7 @@
         <span slot="label">
           {{ $t('label.ipsecpsk') }}
           <a-tooltip :title="apiParams.ipsecpsk.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-input
@@ -112,7 +112,7 @@
         <span slot="label">
           {{ $t('label.ikeversion') }}
           <a-tooltip :title="apiParams.ikeversion.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-select
@@ -195,7 +195,7 @@
         <span slot="label">
           {{ $t('label.ikelifetime') }}
           <a-tooltip :title="apiParams.ikelifetime.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-input
@@ -211,7 +211,7 @@
         <span slot="label">
           {{ $t('label.esplifetime') }}
           <a-tooltip :title="apiParams.esplifetime.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-input
@@ -227,7 +227,7 @@
         <span slot="label">
           {{ $t('label.dpd') }}
           <a-tooltip :title="apiParams.dpd.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-switch
@@ -242,7 +242,7 @@
         <span slot="label">
           {{ $t('label.splitconnections') }}
           <a-tooltip :title="apiParams.splitconnections.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-switch
@@ -257,7 +257,7 @@
         <span slot="label">
           {{ $t('label.forceencap') }}
           <a-tooltip :title="apiParams.forceencap.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-switch
diff --git a/ui/src/views/network/PortForwarding.vue b/ui/src/views/network/PortForwarding.vue
index 893187646e2b..d6e65c3b09ad 100644
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@@ -30,7 +30,8 @@
             <a-input
               placeholder="-"
               disabled
-              style="width: 30px; border-left: 0; border-right: 0; pointer-events: none; backgroundColor: #fff; text-align:
+              class="tag-disabled-input"
+              style="width: 30px; border-left: 0; border-right: 0; pointer-events: none; text-align:
               center; margin-right: 0;"></a-input>
             <a-input
               v-model="newRule.privateendport"
@@ -48,7 +49,8 @@
             <a-input
               placeholder="-"
               disabled
-              style="width: 30px; border-left: 0; border-right: 0; pointer-events: none; backgroundColor: #fff;
+              class="tag-disabled-input"
+              style="width: 30px; border-left: 0; border-right: 0; pointer-events: none;
               text-align: center; margin-right: 0;"></a-input>
             <a-input
               v-model="newRule.publicendport"
diff --git a/ui/src/views/network/VpcTiersTab.vue b/ui/src/views/network/VpcTiersTab.vue
index ffa4477be897..b7d6842b146c 100644
--- a/ui/src/views/network/VpcTiersTab.vue
+++ b/ui/src/views/network/VpcTiersTab.vue
@@ -371,7 +371,7 @@ export default {
           scopedSlots: { customRender: 'ip' }
         }
       ],
-      customStyle: 'margin-bottom: -10px; border-bottom-style: none',
+      customStyle: 'margin-bottom: 0; border: none',
       page: 1,
       pageSize: 10,
       itemCounts: {
diff --git a/ui/src/views/offering/AddComputeOffering.vue b/ui/src/views/offering/AddComputeOffering.vue
index 1c13dc3dca16..29567be0066e 100644
--- a/ui/src/views/offering/AddComputeOffering.vue
+++ b/ui/src/views/offering/AddComputeOffering.vue
@@ -26,7 +26,7 @@
           <span slot="label">
             {{ $t('label.name') }}
             <a-tooltip :title="apiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -40,7 +40,7 @@
           <span slot="label">
             {{ $t('label.displaytext') }}
             <a-tooltip :title="apiParams.displaytext.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -53,7 +53,7 @@
           <span slot="label">
             {{ $t('label.systemvmtype') }}
             <a-tooltip :title="apiParams.systemvmtype.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -75,7 +75,7 @@
           <span slot="label">
             {{ $t('label.storagetype') }}
             <a-tooltip :title="apiParams.storagetype.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-radio-group
@@ -96,7 +96,7 @@
           <span slot="label">
             {{ $t('label.provisioningtype') }}
             <a-tooltip :title="apiParams.provisioningtype.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-radio-group
@@ -120,7 +120,7 @@
           <span slot="label">
             {{ $t('label.cachemode') }}
             <a-tooltip :title="apiParams.cachemode.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-radio-group
@@ -162,7 +162,7 @@
           <span slot="label">
             {{ $t('label.cpunumber') }}
             <a-tooltip :title="apiParams.cpunumber.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -184,7 +184,7 @@
           <span slot="label">
             {{ $t('label.cpuspeed') }}
             <a-tooltip :title="apiParams.cpuspeed.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -206,7 +206,7 @@
           <span slot="label">
             {{ $t('label.mincpunumber') }}
             <a-tooltip :title="apiParams.mincpunumber.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -228,7 +228,7 @@
           <span slot="label">
             {{ $t('label.maxcpunumber') }}
             <a-tooltip :title="apiParams.maxcpunumber.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -250,7 +250,7 @@
           <span slot="label">
             {{ $t('label.memory.mb') }}
             <a-tooltip :title="apiParams.memory.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -272,7 +272,7 @@
           <span slot="label">
             {{ $t('label.minmemory') }}
             <a-tooltip :title="apiParams.minmemory.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -294,7 +294,7 @@
           <span slot="label">
             {{ $t('label.maxmemory') }}
             <a-tooltip :title="apiParams.maxmemory.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -316,7 +316,7 @@
           <span slot="label">
             {{ $t('label.networkrate') }}
             <a-tooltip :title="apiParams.networkrate.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -338,7 +338,7 @@
           <span slot="label">
             {{ $t('label.root.disk.size') }}
             <a-tooltip :title="apiParams.rootdisksize.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -378,7 +378,7 @@
           <span slot="label">
             {{ $t('label.diskbytesreadrate') }}
             <a-tooltip :title="apiParams.bytesreadrate.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -398,7 +398,7 @@
           <span slot="label">
             {{ $t('label.diskbyteswriterate') }}
             <a-tooltip :title="apiParams.byteswriterate.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -418,7 +418,7 @@
           <span slot="label">
             {{ $t('label.diskiopsreadrate') }}
             <a-tooltip :title="apiParams.iopsreadrate.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -438,7 +438,7 @@
           <span slot="label">
             {{ $t('label.diskiopswriterate') }}
             <a-tooltip :title="apiParams.iopswriterate.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -458,7 +458,7 @@
           <span slot="label">
             {{ $t('label.iscustomizeddiskiops') }}
             <a-tooltip :title="apiParams.customizediops.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-switch v-decorator="['iscustomizeddiskiops', {initialValue: this.isCustomizedDiskIops}]" :defaultChecked="this.isCustomizedDiskIops" @change="val => { this.isCustomizedDiskIops = val }" />
@@ -467,7 +467,7 @@
           <span slot="label">
             {{ $t('label.diskiopsmin') }}
             <a-tooltip :title="apiParams.miniops.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -487,7 +487,7 @@
           <span slot="label">
             {{ $t('label.diskiopsmax') }}
             <a-tooltip :title="apiParams.maxiops.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -507,7 +507,7 @@
           <span slot="label">
             {{ $t('label.hypervisorsnapshotreserve') }}
             <a-tooltip :title="apiParams.hypervisorsnapshotreserve.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -527,7 +527,7 @@
           <span slot="label">
             {{ $t('label.offerha') }}
             <a-tooltip :title="apiParams.offerha.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-switch v-decorator="['offerha', {initialValue: false}]" />
@@ -536,7 +536,7 @@
           <span slot="label">
             {{ $t('label.hosttags') }}
             <a-tooltip :title="apiParams.hosttags.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -547,7 +547,7 @@
           <span slot="label">
             {{ $t('label.storagetags') }}
             <a-tooltip :title="apiParams.tags.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -570,7 +570,7 @@
           <span slot="label">
             {{ $t('label.limitcpuuse') }}
             <a-tooltip :title="apiParams.limitcpuuse.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-switch v-decorator="['limitcpuuse', {initialValue: false}]" />
@@ -579,7 +579,7 @@
           <span slot="label">
             {{ $t('label.isvolatile') }}
             <a-tooltip :title="apiParams.isvolatile.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-switch v-decorator="['isvolatile', {initialValue: false}]" />
@@ -588,7 +588,7 @@
           <span slot="label">
             {{ $t('label.deploymentplanner') }}
             <a-tooltip :title="apiParams.deploymentplanner.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -659,7 +659,7 @@
           <span slot="label">
             {{ $t('label.domain') }}
             <a-tooltip :title="apiParams.domainid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -688,7 +688,7 @@
           <span slot="label">
             {{ $t('label.zoneid') }}
             <a-tooltip :title="apiParams.zoneid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -723,7 +723,7 @@
           <span slot="label">
             {{ $t('label.vmware.storage.policy') }}
             <a-tooltip :title="apiParams.storagetype.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
diff --git a/ui/src/views/offering/AddDiskOffering.vue b/ui/src/views/offering/AddDiskOffering.vue
index 0b724b69a114..feefd234d053 100644
--- a/ui/src/views/offering/AddDiskOffering.vue
+++ b/ui/src/views/offering/AddDiskOffering.vue
@@ -26,7 +26,7 @@
           <span slot="label">
             {{ $t('label.name') }}
             <a-tooltip :title="apiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -40,7 +40,7 @@
           <span slot="label">
             {{ $t('label.displaytext') }}
             <a-tooltip :title="apiParams.displaytext.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -53,7 +53,7 @@
           <span slot="label">
             {{ $t('label.storagetype') }}
             <a-tooltip :title="apiParams.storagetype.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-radio-group
@@ -74,7 +74,7 @@
           <span slot="label">
             {{ $t('label.provisioningtype') }}
             <a-tooltip :title="apiParams.provisioningtype.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-radio-group
@@ -98,7 +98,7 @@
           <span slot="label">
             {{ $t('label.customdisksize') }}
             <a-tooltip :title="apiParams.customized.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-switch v-decorator="['customdisksize', { initialValue: this.isCustomDiskSize }]" :checked="this.isCustomDiskSize" @change="val => { this.isCustomDiskSize = val }" />
@@ -107,7 +107,7 @@
           <span slot="label">
             {{ $t('label.disksize') }}
             <a-tooltip :title="apiParams.disksize.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -148,7 +148,7 @@
           <span slot="label">
             {{ $t('label.diskbytesreadrate') }}
             <a-tooltip :title="apiParams.bytesreadrate.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -168,7 +168,7 @@
           <span slot="label">
             {{ $t('label.diskbyteswriterate') }}
             <a-tooltip :title="apiParams.byteswriterate.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -188,7 +188,7 @@
           <span slot="label">
             {{ $t('label.diskiopsreadrate') }}
             <a-tooltip :title="apiParams.iopsreadrate.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -208,7 +208,7 @@
           <span slot="label">
             {{ $t('label.diskiopswriterate') }}
             <a-tooltip :title="apiParams.iopswriterate.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -228,7 +228,7 @@
           <span slot="label">
             {{ $t('label.iscustomizeddiskiops') }}
             <a-tooltip :title="apiParams.customizediops.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-switch v-decorator="['iscustomizeddiskiops']" :checked="this.isCustomizedDiskIops" @change="val => { this.isCustomizedDiskIops = val }" />
@@ -237,7 +237,7 @@
           <span slot="label">
             {{ $t('label.diskiopsmin') }}
             <a-tooltip :title="apiParams.miniops.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -257,7 +257,7 @@
           <span slot="label">
             {{ $t('label.diskiopsmax') }}
             <a-tooltip :title="apiParams.maxiops.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -277,7 +277,7 @@
           <span slot="label">
             {{ $t('label.hypervisorsnapshotreserve') }}
             <a-tooltip :title="apiParams.hypervisorsnapshotreserve.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -297,7 +297,7 @@
           <span slot="label">
             {{ $t('label.writecachetype') }}
             <a-tooltip :title="apiParams.cachemode.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-radio-group
@@ -321,7 +321,7 @@
           <span slot="label">
             {{ $t('label.storagetags') }}
             <a-tooltip :title="apiParams.tags.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -347,7 +347,7 @@
           <span slot="label">
             {{ $t('label.domainid') }}
             <a-tooltip :title="apiParams.domainid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -376,7 +376,7 @@
           <span slot="label">
             {{ $t('label.zoneid') }}
             <a-tooltip :title="apiParams.zoneid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -411,7 +411,7 @@
           <span slot="label">
             {{ $t('label.vmware.storage.policy') }}
             <a-tooltip :title="apiParams.storagetype.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
diff --git a/ui/src/views/offering/AddNetworkOffering.vue b/ui/src/views/offering/AddNetworkOffering.vue
index 910bc2bb8ab9..1a1d1bc67d5d 100644
--- a/ui/src/views/offering/AddNetworkOffering.vue
+++ b/ui/src/views/offering/AddNetworkOffering.vue
@@ -26,7 +26,7 @@
           <span slot="label">
             {{ $t('label.name') }}
             <a-tooltip :title="apiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -40,7 +40,7 @@
           <span slot="label">
             {{ $t('label.displaytext') }}
             <a-tooltip :title="apiParams.displaytext.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -53,7 +53,7 @@
           <span slot="label">
             {{ $t('label.networkrate') }}
             <a-tooltip :title="apiParams.networkrate.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -73,7 +73,7 @@
           <span slot="label">
             {{ $t('label.guestiptype') }}
             <a-tooltip :title="apiParams.guestiptype.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-radio-group
@@ -97,7 +97,7 @@
           <span slot="label">
             {{ $t('label.ispersistent') }}
             <a-tooltip :title="apiParams.ispersistent.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-switch v-decorator="['ispersistent', {initialValue: false}]" />
@@ -106,7 +106,7 @@
           <span slot="label">
             {{ $t('label.specifyvlan') }}
             <a-tooltip :title="apiParams.specifyvlan.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-switch v-decorator="['specifyvlan', {initialValue: true}]" :defaultChecked="true" />
@@ -115,7 +115,7 @@
           <span slot="label">
             {{ $t('label.vpc') }}
             <a-tooltip :title="apiParams.forvpc.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-switch v-decorator="['forvpc', {initialValue: this.forVpc}]" :defaultChecked="this.forVpc" @change="val => { this.handleForVpcChange(val) }" />
@@ -195,7 +195,7 @@
           <span slot="label">
             {{ $t('label.supportedservices') }}
             <a-tooltip :title="apiParams.supportedservices.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <div class="supported-services-container" scroll-to="last-child">
@@ -217,7 +217,7 @@
           <span slot="label">
             {{ $t('label.serviceofferingid') }}
             <a-tooltip :title="apiParams.serviceofferingid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -326,7 +326,7 @@
           <span slot="label">
             {{ $t('label.conservemode') }}
             <a-tooltip :title="apiParams.conservemode.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-switch v-decorator="['conservemode', {initialValue: true}]" :defaultChecked="true" />
@@ -335,7 +335,7 @@
           <span slot="label">
             {{ $t('label.tags') }}
             <a-tooltip :title="apiParams.tags.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -346,7 +346,7 @@
           <span slot="label">
             {{ $t('label.availability') }}
             <a-tooltip :title="apiParams.availability.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-radio-group
@@ -366,7 +366,7 @@
           <span slot="label">
             {{ $t('label.egressdefaultpolicy') }}
             <a-tooltip :title="apiParams.egressdefaultpolicy.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-radio-group
@@ -389,7 +389,7 @@
           <span slot="label">
             {{ $t('label.domainid') }}
             <a-tooltip :title="apiParams.domainid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -418,7 +418,7 @@
           <span slot="label">
             {{ $t('label.zoneid') }}
             <a-tooltip :title="apiParams.zoneid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -452,7 +452,7 @@
           <span slot="label">
             {{ $t('label.enable.network.offering') }}
             <a-tooltip :title="apiParams.enable.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-switch v-decorator="['enable', {initialValue: false}]" />
diff --git a/ui/src/views/offering/AddVpcOffering.vue b/ui/src/views/offering/AddVpcOffering.vue
index cbe2db18cadb..730f5a31f4ca 100644
--- a/ui/src/views/offering/AddVpcOffering.vue
+++ b/ui/src/views/offering/AddVpcOffering.vue
@@ -26,7 +26,7 @@
           <span slot="label">
             {{ $t('label.name') }}
             <a-tooltip :title="apiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -40,7 +40,7 @@
           <span slot="label">
             {{ $t('label.displaytext') }}
             <a-tooltip :title="apiParams.displaytext.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -53,7 +53,7 @@
           <span slot="label">
             {{ $t('label.supportedservices') }}
             <a-tooltip :title="apiParams.supportedservices.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <div class="supported-services-container" scroll-to="last-child">
@@ -87,7 +87,7 @@
           <span slot="label">
             {{ $t('label.domainid') }}
             <a-tooltip :title="apiParams.domainid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -116,7 +116,7 @@
           <span slot="label">
             {{ $t('label.zoneid') }}
             <a-tooltip :title="apiParams.zoneid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -150,7 +150,7 @@
           <span slot="label">
             {{ $t('label.enable.vpc.offering') }}
             <a-tooltip :title="apiParams.enable.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-switch v-decorator="['enable', {initialValue: false}]" />
diff --git a/ui/src/views/offering/ImportBackupOffering.vue b/ui/src/views/offering/ImportBackupOffering.vue
index 370b908798b4..c05c9fa4a9e3 100644
--- a/ui/src/views/offering/ImportBackupOffering.vue
+++ b/ui/src/views/offering/ImportBackupOffering.vue
@@ -25,7 +25,7 @@
         <span slot="label">
           {{ $t('label.name') }}
           <a-tooltip :title="apiParams.name.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-input
@@ -38,7 +38,7 @@
         <span slot="label">
           {{ $t('label.description') }}
           <a-tooltip :title="apiParams.description.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-input
@@ -50,7 +50,7 @@
         <span slot="label">
           {{ $t('label.zoneid') }}
           <a-tooltip :title="apiParams.zoneid.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-select
@@ -70,7 +70,7 @@
         <span slot="label">
           {{ $t('label.externalid') }}
           <a-tooltip :title="apiParams.externalid.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-select
@@ -88,7 +88,7 @@
         <span slot="label">
           {{ $t('label.allowuserdrivenbackups') }}
           <a-tooltip :title="apiParams.allowuserdrivenbackups.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-switch
diff --git a/ui/src/views/project/AddAccountOrUserToProject.vue b/ui/src/views/project/AddAccountOrUserToProject.vue
index f65cdc6ae04f..8132357493c0 100644
--- a/ui/src/views/project/AddAccountOrUserToProject.vue
+++ b/ui/src/views/project/AddAccountOrUserToProject.vue
@@ -26,7 +26,7 @@
             <span slot="label">
               {{ $t('label.account') }}
               <a-tooltip :title="apiParams.addAccountToProject.account.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -38,7 +38,7 @@
             <span slot="label">
               {{ $t('label.email') }}
               <a-tooltip :title="apiParams.addAccountToProject.email.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -49,7 +49,7 @@
             <span slot="label">
               {{ $t('label.project.role') }}
               <a-tooltip :title="apiParams.addAccountToProject.projectroleid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -67,7 +67,7 @@
             <span slot="label">
               {{ $t('label.roletype') }}
               <a-tooltip :title="apiParams.addAccountToProject.roletype.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -96,7 +96,7 @@
             <span slot="label">
               {{ $t('label.user') }}
               <a-tooltip :title="apiParams.addUserToProject.username.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -108,7 +108,7 @@
             <span slot="label">
               {{ $t('label.email') }}
               <a-tooltip :title="apiParams.addUserToProject.email.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
@@ -119,7 +119,7 @@
             <span slot="label">
               {{ $t('label.project.role') }}
               <a-tooltip :title="apiParams.addUserToProject.roletype.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -137,7 +137,7 @@
             <span slot="label">
               {{ $t('label.roletype') }}
               <a-tooltip :title="apiParams.addUserToProject.roletype.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
diff --git a/ui/src/views/project/iam/ProjectRoleTab.vue b/ui/src/views/project/iam/ProjectRoleTab.vue
index e1cdbd84e84c..938b70e6e9bb 100644
--- a/ui/src/views/project/iam/ProjectRoleTab.vue
+++ b/ui/src/views/project/iam/ProjectRoleTab.vue
@@ -143,7 +143,7 @@ export default {
       editModalVisible: false,
       selectedRole: null,
       projectPermisssions: [],
-      customStyle: 'margin-bottom: -10px; border-bottom-style: none'
+      customStyle: 'margin-bottom: 0; border: none'
     }
   },
   beforeCreate () {
diff --git a/ui/src/views/storage/CreateVolume.vue b/ui/src/views/storage/CreateVolume.vue
index a27ca6332b16..e63e469fd5bc 100644
--- a/ui/src/views/storage/CreateVolume.vue
+++ b/ui/src/views/storage/CreateVolume.vue
@@ -22,7 +22,7 @@
         <span slot="label">
           {{ $t('label.name') }}
           <a-tooltip :title="apiParams.name.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-input
@@ -36,7 +36,7 @@
         <span slot="label">
           {{ $t('label.zoneid') }}
           <a-tooltip :title="apiParams.zoneid.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-select
@@ -57,7 +57,7 @@
         <span slot="label">
           {{ $t('label.diskoffering') }}
           <a-tooltip :title="apiParams.diskofferingid.description || 'Disk Offering'">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            <a-icon type="info-circle" />
           </a-tooltip>
         </span>
         <a-select
@@ -80,7 +80,7 @@
           <span slot="label">
             {{ $t('label.sizegb') }}
             <a-tooltip :title="apiParams.size.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
diff --git a/ui/src/views/storage/FormSchedule.vue b/ui/src/views/storage/FormSchedule.vue
index bc10f69d2c1e..1628ed0ff713 100644
--- a/ui/src/views/storage/FormSchedule.vue
+++ b/ui/src/views/storage/FormSchedule.vue
@@ -161,13 +161,17 @@
                 @keyup.enter="handleInputConfirm"
                 compact>
                 <a-input ref="input" :value="inputKey" @change="handleKeyChange" style="width: 100px; text-align: center" :placeholder="$t('label.key')" />
-                <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
+                <a-input
+                  class="tag-disabled-input"
+                  style=" width: 30px; border-left: 0; pointer-events: none; text-align: center"
+                  placeholder="="
+                  disabled />
                 <a-input :value="inputValue" @change="handleValueChange" style="width: 100px; text-align: center; border-left: 0" :placeholder="$t('label.value')" />
                 <tooltip-button :tooltip="$t('label.ok')" icon="check" size="small" @click="handleInputConfirm" />
                 <tooltip-button :tooltip="$t('label.cancel')" icon="close" size="small" @click="inputVisible=false" />
               </a-input-group>
             </div>
-            <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
+            <a-tag v-else @click="showInput" class="btn-add-tag" style="borderStyle: dashed;">
               <a-icon type="plus" /> {{ $t('label.new.tag') }}
             </a-tag>
           </div>
@@ -422,7 +426,6 @@ export default {
 
 .tagsTitle {
   font-weight: 500;
-  color: rgba(0, 0, 0, 0.85);
   margin-bottom: 12px;
 }
 
diff --git a/ui/src/views/storage/TakeSnapshot.vue b/ui/src/views/storage/TakeSnapshot.vue
index c6de71f4bca4..f491b165bf6e 100644
--- a/ui/src/views/storage/TakeSnapshot.vue
+++ b/ui/src/views/storage/TakeSnapshot.vue
@@ -62,13 +62,17 @@
               @keyup.enter="handleInputConfirm"
               compact>
               <a-input ref="input" :value="inputKey" @change="handleKeyChange" style="width: 100px; text-align: center" :placeholder="$t('label.key')" />
-              <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
+              <a-input
+                class="tag-disabled-input"
+                style=" width: 30px; border-left: 0; pointer-events: none; text-align: center"
+                placeholder="="
+                disabled />
               <a-input :value="inputValue" @change="handleValueChange" style="width: 100px; text-align: center; border-left: 0" :placeholder="$t('label.value')" />
               <tooltip-button :tooltip="$t('label.ok')" icon="check" size="small" @click="handleInputConfirm" />
               <tooltip-button :tooltip="$t('label.cancel')" icon="close" size="small" @click="inputVisible=false" />
             </a-input-group>
           </div>
-          <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
+          <a-tag v-else @click="showInput" class="btn-add-tag" style="borderStyle: dashed;">
             <a-icon type="plus" /> {{ $t('label.new.tag') }}
           </a-tag>
         </div>
@@ -261,7 +265,6 @@ export default {
 
 .tagsTitle {
   font-weight: 500;
-  color: rgba(0, 0, 0, 0.85);
   margin-bottom: 12px;
 }
 
diff --git a/ui/src/views/storage/UploadLocalVolume.vue b/ui/src/views/storage/UploadLocalVolume.vue
index 7a37182bbec5..aae46d3eebca 100644
--- a/ui/src/views/storage/UploadLocalVolume.vue
+++ b/ui/src/views/storage/UploadLocalVolume.vue
@@ -48,7 +48,7 @@
           <span slot="label">
             {{ $t('label.name') }}
             <a-tooltip :title="apiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -62,7 +62,7 @@
           <span slot="label">
             {{ $t('label.zone') }}
             <a-tooltip :title="apiParams.zoneid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -84,7 +84,7 @@
           <span slot="label">
             {{ $t('label.format') }}
             <a-tooltip :title="apiParams.format.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -106,7 +106,7 @@
           <span slot="label">
             {{ $t('label.volumechecksum') }}
             <a-tooltip :title="apiParams.checksum.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input

From 108fa1675ebac7d3c1c01e7925c2aeceb4dde968 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Wed, 2 Jun 2021 09:06:51 +0700
Subject: [PATCH 03/17] restructure the style dark mode file

---
 ui/src/style/dark-mode.less | 545 ++++++++++++++++++------------------
 ui/src/views/auth/Login.vue |   6 +-
 2 files changed, 283 insertions(+), 268 deletions(-)

diff --git a/ui/src/style/dark-mode.less b/ui/src/style/dark-mode.less
index f96dc1c37564..ecc1f2cf2d9d 100644
--- a/ui/src/style/dark-mode.less
+++ b/ui/src/style/dark-mode.less
@@ -17,8 +17,7 @@
 
 @primary-color: #1890ff;
 @dark-background-color: #090c10;
-// @dark-secondary-bgColor: #161b22;
-@dark-secondary-bgColor: #141414;
+@dark-secondary-bgColor: #161b22;
 @dark-text-color-1: rgba(255, 255, 255, 0.25);
 @dark-text-color-2: rgba(255, 255, 255, 0.45);
 @dark-text-color-3: rgba(255, 255, 255, 0.65);
@@ -32,13 +31,12 @@
 .dark {
   background: @dark-background-color;
 
-  .user-layout, .ant-layout {
-    background: @dark-background-color;
+  h1, h2, h3, h4, h5, h6 {
+    color: @dark-text-color-3;
   }
 
-  .user-layout .ant-input-affix-wrapper .ant-input-prefix, 
-  .user-layout .ant-input-affix-wrapper .ant-input-suffix {
-    color: @dark-text-color-3;
+  .user-layout, .ant-layout {
+    background: @dark-background-color;
   }
 
   .layout.ant-layout .header {
@@ -46,23 +44,48 @@
     box-shadow: 0 1px 4px #090c10;
   }
 
-  .sider.light .logo {
-    background-color: @dark-secondary-bgColor;
-    box-shadow: 1px 1px 0px 0px #e8e8e8;
+  .layout.ant-layout .trigger,
+  .layout.ant-layout .header .user-menu .action,
+  .layout.ant-layout .top-nav-header-index .user-menu .action,
+  .ant-tabs {
+    color: @dark-text-color-3;
+  }
+
+  .ant-layout-footer {
+    background: @dark-secondary-bgColor;
+    color: @dark-text-color-3;
+
+    .footer {
+      .line {
+        a {
+          color: @dark-text-color-3;
+
+          &:hover {
+            color: @dark-text-color-4;
+          }
+        }
+      }
+
+      .copyright {
+        color: @dark-text-color-3;
+      }
+    }
   }
 
   .sider.light {
     background: @dark-secondary-bgColor;
-  
+
+    .logo {
+      background-color: @dark-secondary-bgColor;
+      box-shadow: 1px 1px 0px 0px @dark-border-color;
+    }
+
+    .ant-menu-light,
     .ant-menu-submenu > .ant-menu {
       background: @dark-secondary-bgColor;
     }
   }
-  
-  .sider.light .ant-menu-light {
-    background: @dark-secondary-bgColor;
-  }
-  
+
   .ant-menu-submenu-popup.ant-menu-light,
   .ant-menu-light > .ant-menu {
     background: @dark-secondary-bgColor;
@@ -74,9 +97,13 @@
   .ant-menu-vertical-right .ant-menu-item,
   .ant-menu-inline .ant-menu-item,
   .ant-menu-vertical .ant-menu-submenu-title:not(:hover),
-  .ant-menu-vertical-left .ant-menu-submenu-title,
-  .ant-menu-vertical-right .ant-menu-submenu-title,
-  .ant-menu-inline .ant-menu-submenu-title:not(:hover),
+  .ant-menu-vertical-left .ant-menu-submenu-title:not(:hover),
+  .ant-menu-vertical-right .ant-menu-submenu-title:not(:hover),
+  .ant-menu-inline .ant-menu-submenu-title:not(:hover)
+  {
+    color: @dark-text-color-3;
+  }
+
   .kubernet-icon path
   {
     color: @dark-text-color-3;
@@ -95,95 +122,68 @@
 
   .ant-card {
     background: @dark-secondary-bgColor;
+    color: @dark-text-color-3;
 
     &-head, &-bottom, &-body {
       color: @dark-text-color-3;
       border-color: @dark-border-color;
     }
-  }
-
-  .ant-layout-footer {
-    background: @dark-secondary-bgColor;
-    color: @dark-text-color-3;
-
-    .footer {
-      .line {
-        a {
-          color: @dark-text-color-3;
-
-          &:hover {
-            color: @dark-text-color-4;
-          }
-        }
-      }
 
-      .copyright {
+    .ant-progress-circle {
+      .ant-progress-text {
         color: @dark-text-color-3;
       }
     }
-  }
-
-  .ant-breadcrumb a:not(:hover),
-  .ant-breadcrumb-separator {
-    color: @dark-text-color-3;
-  }
-
-  .ant-breadcrumb > span:last-child,
-  .ant-breadcrumb > span:last-child a {
-    color: @dark-text-color-4;
-  }
 
-  .ant-btn:not(.ant-btn-primary, .ant-btn-danger) {
-    color: @dark-text-color-3;
-    background-color: transparent;
-    border-color: @dark-border-color;
+    &-bordered {
+      border-color: @dark-border-color;
+    }
   }
 
-  .ant-input,
-  .ant-select-selection,
-  .ant-input-group-addon,
-  .ant-checkbox-inner,
-  .ant-radio-inner {
-    background-color: transparent;
-    background-image: none;
+  .chart-card-footer {
     border-color: @dark-border-color;
-    color: @dark-text-color-3;
   }
 
-  .ant-checkbox-wrapper {
+  .vm-info-card .resource-detail-item__details a,
+  .vm-info-card .resource-detail-item a {
     color: @dark-text-color-3;
   }
 
-  .ant-switch {
-    color: @light-text-color-3;
-    background-color: @dark-text-color-2;
-
-    &-checked {
-      background-color: #1890ff;
+  .ant-breadcrumb {
+    a:not(:hover), &-separator {
+      color: @dark-text-color-3;
     }
 
-    &-loading-icon, &:after {
-      background-color: @dark-secondary-bgColor;
+    span:last-child, span:last-child a {
+      color: @dark-text-color-4;
     }
   }
 
-  .ant-dropdown-menu-item > a:hover {
-    .ant-switch:not(.ant-switch-checked) {
-      background-color: @light-text-color-3;
+  .ant-btn {
+    &:not(.ant-btn-primary, .ant-btn-danger) {
+      color: @dark-text-color-3;
+      background-color: transparent;
+      border-color: @dark-border-color;
     }
-  }
-
-  .layout.ant-layout .trigger,
-  .layout.ant-layout .header .user-menu .action,
-  .layout.ant-layout .top-nav-header-index .user-menu .action,
-  .ant-tabs {
-    color: @dark-text-color-3;
-  }
 
-  .ant-input-affix-wrapper .ant-input-prefix,
-  .ant-input-affix-wrapper .ant-input-suffix,
-  .ant-input-password-icon {
-    color: @dark-text-color-3;
+    &-primary-disabled,
+    &-primary.disabled,
+    &-primary[disabled],
+    &-primary-disabled:hover,
+    &-primary.disabled:hover,
+    &-primary[disabled]:hover,
+    &-primary-disabled:focus,
+    &-primary.disabled:focus,
+    &-primary[disabled]:focus,
+    &-primary-disabled:active,
+    &-primary.disabled:active,
+    &-primary[disabled]:active,
+    &-primary-disabled.active,
+    &-primary.disabled.active,
+    &-primary[disabled].active {
+      color: @dark-text-color-3;
+      background-color: transparent;
+    }
   }
 
   .has-error .ant-input-affix-wrapper .ant-input,
@@ -192,192 +192,173 @@
     background-image: none;
   }
 
-  .ant-btn-primary-disabled,
-  .ant-btn-primary.disabled,
-  .ant-btn-primary[disabled],
-  .ant-btn-primary-disabled:hover,
-  .ant-btn-primary.disabled:hover,
-  .ant-btn-primary[disabled]:hover,
-  .ant-btn-primary-disabled:focus,
-  .ant-btn-primary.disabled:focus,
-  .ant-btn-primary[disabled]:focus,
-  .ant-btn-primary-disabled:active,
-  .ant-btn-primary.disabled:active,
-  .ant-btn-primary[disabled]:active,
-  .ant-btn-primary-disabled.active,
-  .ant-btn-primary.disabled.active,
-  .ant-btn-primary[disabled].active {
+  .ant-badge-status-text {
     color: @dark-text-color-3;
-    background-color: transparent;
-  }
-
-  .ant-dropdown-menu {
-    background-color: @dark-secondary-bgColor;
-    border: 1px solid @dark-border-color;
   }
 
-
-  .ant-dropdown-menu-item:not(.ant-dropdown-menu-item-selected, :hover), .ant-dropdown-menu-submenu-title,
-  .ant-dropdown-menu-item > a:not(:hover),
-  .ant-dropdown-menu-submenu-title > a:not(:hover) {
+  .ant-table {
     color: @dark-text-color-3;
-  }
 
-  .ant-card {
-    color: @dark-text-color-3;
+    &-thead {
+      background-color: @dark-secondary-bgColor;
 
-    .ant-progress-circle .ant-progress-text,
-    h1, h2, h3, h4, h5, h6 {
-      color: @dark-text-color-3;
+      tr th {
+        color: @dark-text-color-3;
+        background-color: @dark-secondary-bgColor;
+        border-color: @dark-border-color;
+
+        .ant-table-column-has-actions.ant-table-column-has-sorters:hover,
+        .ant-table-column-has-actions.ant-table-column-has-sorters:hover,
+        .ant-table-column-has-actions.ant-table-column-has-sorters:hover .ant-table-filter-icon,
+        .ant-table-column-has-actions.ant-table-column-has-sorters:hover .anticon-filter {
+          background-color: @dark-background-color;
+        }
+      }
+
+      & > tr:hover.ant-table-row-selected > td,
+      & > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
+      & > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
+        background-color: transparent;
+      }
     }
-  }
 
-  .ant-table, .ant-badge-status-text {
-    color: @dark-text-color-3;
-  }
+    &-tbody {
+      & > tr > td {
+        border-color: @dark-border-color;
+      }
 
-  .ant-table-thead {
-    background-color: @dark-secondary-bgColor;
-  }
+      & > tr.ant-table-row-selected td,
+      & > tr:hover.ant-table-row-selected > td,
+      & > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
+      & > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
+        background-color: transparent;
+      }
 
-  .ant-table-thead tr th {
-    color: @dark-text-color-3;
-    background-color: @dark-secondary-bgColor;
-    border-color: @dark-border-color;
-  }
+      & > tr > th.ant-table-column-sort {
+        background-color: @dark-background-color;
+      }
+    }
 
-  .ant-table-small {
-    border-color: @dark-border-color;
-  }
+    &-footer {
+      background-color: @dark-secondary-bgColor;
+      color: @dark-text-color-3;
+      border-color: @dark-border-color;
 
-  .ant-table-tbody > tr > td {
-    border-color: @dark-border-color;
-  }
+      &::before {
+        background-color: @dark-border-color;
+      }
+    }
 
-  .light-row, .dark-row {
-    background-color: @dark-secondary-bgColor;
-  }
+    &-header {
+      background-color: @dark-secondary-bgColor;
+    }
 
-  .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover,
-  .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover,
-  .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover .ant-table-filter-icon,
-  .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover .anticon-filter {
-    background-color: @dark-background-color;
-  }
+    &-small {
+      border-color: @dark-border-color;
+    }
 
-  .ant-table-tbody > tr.ant-table-row-selected td,
-  .ant-table-thead > tr:hover.ant-table-row-selected > td,
-  .ant-table-tbody > tr:hover.ant-table-row-selected > td,
-  .ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
-  .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
-  .ant-table-thead > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
-  .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
-    background-color: transparent;
-  }
+    tr.ant-table-expanded-row,
+    tr.ant-table-expanded-row:hover {
+      background-color: @dark-background-color;
+    }
 
-  .ant-table-thead>tr>th.ant-table-column-sort,
-  tr.ant-table-expanded-row,
-  tr.ant-table-expanded-row:hover {
-    background-color: @dark-background-color;
-  }
+    &-placeholder {
+      border-color: @dark-border-color;
+      background-color: @dark-secondary-bgColor;
+    }
 
-  .ant-table-placeholder {
-    border-color: @dark-border-color;
-    background-color: @dark-secondary-bgColor;
-  }
+    &-row-expand-icon {
+      border-color: @dark-text-color-3;
+      color: @dark-text-color-3;
+      background-color: transparent;
+    }
 
-  .ant-table-footer {
-    background-color: @dark-secondary-bgColor;
-    color: @dark-text-color-3;
-    border-color: @dark-border-color;
-  }
+    &-filter-dropdown {
+      background-color: @dark-secondary-bgColor;
 
-  .ant-table-footer::before {
-    background-color: @dark-border-color;
+      &-btns {
+        border-color: @dark-border-color;
+      }
+    }
   }
 
-  .ant-table-header {
+  .light-row, .dark-row {
     background-color: @dark-secondary-bgColor;
   }
 
-  .ant-table-row-expand-icon {
-    border-color: @dark-text-color-3;
+  .ant-pagination {
     color: @dark-text-color-3;
-    background-color: transparent;
-  }
 
-  .ant-table-filter-dropdown {
-    background-color: @dark-secondary-bgColor;
+    &-prev, &-next, &-jump-prev, &-jump-next, &-prev a, &-next a {
+      color: @dark-text-color-3;
+    }
 
-    &-btns {
-      border-color: @dark-border-color;
+    &-disabled a,
+    &-disabled:hover a,
+    &-disabled:focus a,
+    &-disabled .ant-pagination-item-link,
+    &-disabled:hover .ant-pagination-item-link,
+    &-disabled:focus .ant-pagination-item-link {
+      color: @dark-text-color-1;
     }
-  }
 
-  .ant-pagination,
-  .ant-pagination-prev,
-  .ant-pagination-next,
-  .ant-pagination-jump-prev,
-  .ant-pagination-jump-next,
-  .ant-pagination-prev a,
-  .ant-pagination-next a {
-    color: @dark-text-color-3;
-  }
+    &-item {
+      a:not(:hover) {
+        color: @dark-text-color-3;
+      }
 
-  .ant-pagination-disabled a,
-  .ant-pagination-disabled:hover a,
-  .ant-pagination-disabled:focus a,
-  .ant-pagination-disabled .ant-pagination-item-link,
-  .ant-pagination-disabled:hover .ant-pagination-item-link,
-  .ant-pagination-disabled:focus .ant-pagination-item-link {
-    color: @dark-text-color-1;
-  }
+      &-active {
+        background-color: transparent;
+      }
+    }
 
-  .ant-pagination-item a:not(:hover) {
-    color: @dark-text-color-3;
+    &-options-quick-jumper input {
+      background-color: transparent;
+      background-image: none;
+      border-color: @dark-border-color;
+      color: @dark-text-color-3;
+    }
   }
 
-  .ant-pagination-item-active {
-    background-color: transparent;
-  }
+  .ant-popover {
+    &-message {
+      color: @dark-text-color-3;
+    }
 
-  .ant-pagination-options-quick-jumper input {
-    background-color: transparent;
-    background-image: none;
-    border-color: @dark-border-color;
-    color: @dark-text-color-3;
-  }
+    &-inner-content {
+      color: @dark-text-color-3;
+      background-color: @dark-secondary-bgColor;
+      border: 1px solid @dark-border-color;
+      box-shadow:
+        0 3px 6px -4px @light-text-color-3,
+        0 6px 16px 0 @light-text-color-2,
+        0 9px 28px 8px @light-text-color-1;
+    }
 
-  .ant-popover-message {
-    color: @dark-text-color-3;
-  }
+    &-placement {
+      &-bottom > .ant-popover-content > .ant-popover-arrow,
+      &-bottomLeft > .ant-popover-content > .ant-popover-arrow,
+      &-bottomRight > .ant-popover-content > .ant-popover-arrow {
+        border-top-color: @dark-border-color;
+        border-left-color: @dark-border-color;
+      }
 
-  .ant-popover-inner-content {
-    color: @dark-text-color-3;
-    background-color: @dark-secondary-bgColor;
-    border: 1px solid @dark-border-color;
-    box-shadow:
-      0 3px 6px -4px @light-text-color-3,
-      0 6px 16px 0 @light-text-color-2,
-      0 9px 28px 8px @light-text-color-1;
+      &-top > .ant-popover-content > .ant-popover-arrow,
+      &-topLeft > .ant-popover-content > .ant-popover-arrow,
+      &-topRight > .ant-popover-content > .ant-popover-arrow {
+        border-right-color: @dark-border-color;
+        border-bottom-color: @dark-border-color;
+      }
+    }
   }
 
-  .ant-list-item-meta-title {
+  .ant-list-item {
     color: @dark-text-color-3;
-  }
-
-  .ant-popover-placement-bottom>.ant-popover-content>.ant-popover-arrow,
-  .ant-popover-placement-bottomLeft>.ant-popover-content>.ant-popover-arrow,
-  .ant-popover-placement-bottomRight>.ant-popover-content>.ant-popover-arrow {
-    border-top-color: @dark-border-color;
-    border-left-color: @dark-border-color;
-  }
+    border-color: @dark-border-color;
 
-  .ant-popover-placement-top>.ant-popover-content>.ant-popover-arrow,
-  .ant-popover-placement-topLeft>.ant-popover-content>.ant-popover-arrow,
-  .ant-popover-placement-topRight>.ant-popover-content>.ant-popover-arrow {
-    border-right-color: @dark-border-color;
-    border-bottom-color: @dark-border-color;
+    &-meta-title, &-meta-description {
+      color: @dark-text-color-3;
+    }
   }
 
   .ant-tag {
@@ -387,15 +368,6 @@
     color: @dark-text-color-3;
   }
 
-  .ant-list-item {
-    color: @dark-text-color-3;
-    border-color: @dark-border-color;
-  }
-
-  .ant-list-item-meta-description {
-    color: @dark-text-color-3;
-  }
-
   .ant-avatar {
     background-color: transparent;
     background-image: none;
@@ -413,28 +385,35 @@
 
   .ant-modal {
     color: @dark-text-color-3;
-  }
 
-  .ant-modal-content {
-    box-shadow:
-      0 3px 6px -4px @light-text-color-3,
-      0 6px 16px 0 @light-text-color-2,
-      0 9px 28px 8px @light-text-color-1;
-  }
+    &-content {
+      background-color: @dark-secondary-bgColor;
+      box-shadow:
+        0 3px 6px -4px @light-text-color-3,
+        0 6px 16px 0 @light-text-color-2,
+        0 9px 28px 8px @light-text-color-1;
+    }
 
-  .ant-modal-content, .ant-modal-header {
-    background-color: @dark-secondary-bgColor;
-  }
+    &-header {
+      background-color: @dark-secondary-bgColor;
+      border-color: @dark-border-color;
+    }
 
-  .ant-modal-header, .ant-modal-footer {
-    border-color: @dark-border-color;
-  }
+    &-footer {
+      border-color: @dark-border-color;
+    }
 
-  .ant-modal-confirm-body .ant-modal-confirm-title,
-  .ant-modal-title, .ant-modal-close-x {
-    color: @dark-text-color-3;
+    &-confirm-body &-confirm-title,
+    &-title, &-close-x {
+      color: @dark-text-color-3;
+    }
   }
 
+  .ant-input,
+  .ant-select-selection,
+  .ant-input-group-addon,
+  .ant-checkbox-inner,
+  .ant-radio-inner,
   .ant-radio-button-wrapper,
   .ant-input-number,
   .ant-time-picker-input {
@@ -443,6 +422,52 @@
     color: @dark-text-color-3;
   }
 
+  .ant-checkbox-wrapper {
+    color: @dark-text-color-3;
+  }
+
+  .ant-switch {
+    color: @light-text-color-3;
+    background-color: @dark-text-color-2;
+
+    &-checked {
+      background-color: #1890ff;
+    }
+
+    &-loading-icon, &:after {
+      background-color: @dark-secondary-bgColor;
+    }
+  }
+
+  .ant-dropdown-menu {
+    background-color: @dark-secondary-bgColor;
+    border: 1px solid @dark-border-color;
+
+    &-item > a:hover {
+      .ant-switch:not(.ant-switch-checked) {
+        background-color: @light-text-color-3;
+      }
+    }
+
+    &-item:not(.ant-dropdown-menu-item-selected, :hover),
+    &-submenu-title,
+    &-item > a:not(:hover),
+    &-submenu-title > a:not(:hover) {
+      color: @dark-text-color-3;
+    }
+  }
+
+  .user-layout .ant-input-affix-wrapper .ant-input-prefix, 
+  .user-layout .ant-input-affix-wrapper .ant-input-suffix {
+    color: @dark-text-color-3;
+  }
+
+  .ant-input-affix-wrapper .ant-input-prefix,
+  .ant-input-affix-wrapper .ant-input-suffix,
+  .ant-input-password-icon {
+    color: @dark-text-color-3;
+  }
+
   .ant-input-number-handler-wrap {
     background-color: @dark-secondary-bgColor;
   }
@@ -476,9 +501,7 @@
   }
 
   .ant-form-item,
-  .ant-radio-wrapper,
-  .vm-info-card .resource-detail-item__details a,
-  .vm-info-card .resource-detail-item a {
+  .ant-radio-wrapper {
     color: @dark-text-color-3;
   }
 
@@ -533,10 +556,6 @@
     border-color: @dark-border-color;
   }
 
-  .ant-card-bordered {
-    border-color: @dark-border-color;
-  }
-
   .ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
     background-color: @dark-text-color-3;
   }
@@ -619,9 +638,5 @@
   .ant-collapse .ant-collapse-item-disabled>.ant-collapse-header>.arrow {
     color: @dark-text-color-1;
   }
-
-  .chart-card-footer {
-    border-color: @dark-border-color;
-  }
 }
 
diff --git a/ui/src/views/auth/Login.vue b/ui/src/views/auth/Login.vue
index 42c713721c7d..b16ecf559547 100644
--- a/ui/src/views/auth/Login.vue
+++ b/ui/src/views/auth/Login.vue
@@ -46,7 +46,7 @@
               {rules: [{ required: true, message: $t('message.error.username') }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
             ]"
           >
-            <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+            <a-icon slot="prefix" type="user" />
           </a-input>
         </a-form-item>
 
@@ -61,7 +61,7 @@
               {rules: [{ required: true, message: $t('message.error.password') }], validateTrigger: 'blur'}
             ]"
           >
-            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+            <a-icon slot="prefix" type="lock" />
           </a-input-password>
         </a-form-item>
 
@@ -75,7 +75,7 @@
               {rules: [{ required: false, message: $t('message.error.domain') }], validateTrigger: 'change'}
             ]"
           >
-            <a-icon slot="prefix" type="block" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+            <a-icon slot="prefix" type="block" />
           </a-input>
         </a-form-item>
 

From e87c6fb764a16ebf4d816f85861c84607c06cc69 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Wed, 2 Jun 2021 09:19:47 +0700
Subject: [PATCH 04/17] fix collapse & login page

---
 ui/src/layouts/UserLayout.vue |  5 ++++-
 ui/src/style/dark-mode.less   | 26 +++++++++++++++++---------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/ui/src/layouts/UserLayout.vue b/ui/src/layouts/UserLayout.vue
index 2aea7aed3dc8..5b7493cf8086 100644
--- a/ui/src/layouts/UserLayout.vue
+++ b/ui/src/layouts/UserLayout.vue
@@ -35,8 +35,10 @@
 </template>
 
 <script>
+import Vue from 'vue'
 import RouteView from '@/layouts/RouteView'
 import { mixinDevice } from '@/utils/mixin.js'
+import { DARK_MODE } from '@/store/mutation-types'
 
 export default {
   name: 'UserLayout',
@@ -56,7 +58,8 @@ export default {
   },
   mounted () {
     document.body.classList.add('userLayout')
-    if (this.$store.getters.darkMode) {
+    const darkMode = Vue.ls.get(DARK_MODE, false)
+    if (this.$store.getters.darkMode || darkMode) {
       document.body.classList.add('dark')
     }
   },
diff --git a/ui/src/style/dark-mode.less b/ui/src/style/dark-mode.less
index ecc1f2cf2d9d..883ca3904617 100644
--- a/ui/src/style/dark-mode.less
+++ b/ui/src/style/dark-mode.less
@@ -457,7 +457,7 @@
     }
   }
 
-  .user-layout .ant-input-affix-wrapper .ant-input-prefix, 
+  .user-layout .ant-input-affix-wrapper .ant-input-prefix,
   .user-layout .ant-input-affix-wrapper .ant-input-suffix {
     color: @dark-text-color-3;
   }
@@ -626,17 +626,25 @@
     }
   }
 
-  .ant-collapse, .ant-collapse--borderless {
+  .ant-collapse {
     background-color: @dark-secondary-bgColor;
-  }
 
-  .ant-collapse>.ant-collapse-item>.ant-collapse-header {
-    color: @dark-text-color-3;
-  }
+    &--borderless {
+      background-color: @dark-secondary-bgColor;
+    }
+
+    & > .ant-collapse-item {
+      background-color: @dark-background-color;
+
+      & > .ant-collapse-header {
+        color: @dark-text-color-3;
+      }
 
-  .ant-collapse .ant-collapse-item-disabled>.ant-collapse-header,
-  .ant-collapse .ant-collapse-item-disabled>.ant-collapse-header>.arrow {
-    color: @dark-text-color-1;
+      &-disabled > .ant-collapse-header,
+      &-disabled > .ant-collapse-header > .arrow {
+        color: @dark-text-color-1;
+      }
+    }
   }
 }
 

From c69d1fa628867dcc91ba86fed037ed41bdcc9e50 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Wed, 2 Jun 2021 09:56:04 +0700
Subject: [PATCH 05/17] fix test failed

---
 ui/src/views/AutogenView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 2b5403162ee3..712438af99cb 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -614,7 +614,6 @@ export default {
 
       params.page = this.page
       params.pagesize = this.pageSize
-      this.searchParams = params
       api(this.apiName, params).then(json => {
         var responseName
         var objectName
@@ -702,6 +701,7 @@ export default {
         }
       }).finally(f => {
         this.loading = false
+        this.searchParams = params
       })
     },
     closeAction () {

From 1b500792416d3fb3bad0fe169ebd5894f9658c8a Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Mon, 7 Jun 2021 11:00:25 +0700
Subject: [PATCH 06/17] fix dark mode styles by refer antd pro

---
 ui/src/style/dark-mode.less | 147 +++++++++++++++++++++++++++---------
 1 file changed, 110 insertions(+), 37 deletions(-)

diff --git a/ui/src/style/dark-mode.less b/ui/src/style/dark-mode.less
index 883ca3904617..45c986d4b57e 100644
--- a/ui/src/style/dark-mode.less
+++ b/ui/src/style/dark-mode.less
@@ -17,16 +17,22 @@
 
 @primary-color: #1890ff;
 @dark-background-color: #090c10;
-@dark-secondary-bgColor: #161b22;
+@dark-secondary-bgColor: #141414;
 @dark-text-color-1: rgba(255, 255, 255, 0.25);
 @dark-text-color-2: rgba(255, 255, 255, 0.45);
 @dark-text-color-3: rgba(255, 255, 255, 0.65);
 @dark-text-color-4: rgba(255, 255, 255, 0.85);
 @dark-border-color: #434343;
-@light-text-color-1: rgba(0, 0, 0, 0.25);
-@light-text-color-2: rgba(0, 0, 0, 0.45);
-@light-text-color-3: rgba(0, 0, 0, 0.65);
-@light-text-color-4: rgba(0, 0, 0, 0.85);
+@light-text-color: rgba(0, 0, 0, 0.65);
+@box-shadow-1: rgba(0, 0, 0, 0.32);
+@box-shadow-2: rgba(0, 0, 0, 0.20);
+@box-shadow-3: rgba(0, 0, 0, 0.12);
+@dropdown-background-color: #1f1f1f;
+@dropdown-menu-hover-color: rgba(255, 255, 255, 0.08);
+@notice-background-color: #1f1f1f;
+@table-header-background: #1d1d1d;
+@table-header-hover: #303030;
+@table-body-hover: #262626;
 
 .dark {
   background: @dark-background-color;
@@ -200,21 +206,25 @@
     color: @dark-text-color-3;
 
     &-thead {
-      background-color: @dark-secondary-bgColor;
+      background-color: @table-header-background;
 
       tr th {
-        color: @dark-text-color-3;
-        background-color: @dark-secondary-bgColor;
+        color: @dark-text-color-4;
+        background-color: @table-header-background;
         border-color: @dark-border-color;
 
         .ant-table-column-has-actions.ant-table-column-has-sorters:hover,
         .ant-table-column-has-actions.ant-table-column-has-sorters:hover,
         .ant-table-column-has-actions.ant-table-column-has-sorters:hover .ant-table-filter-icon,
         .ant-table-column-has-actions.ant-table-column-has-sorters:hover .anticon-filter {
-          background-color: @dark-background-color;
+          background-color: @table-header-hover;
         }
       }
 
+      & > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover {
+        background-color: @table-header-hover;
+      }
+
       & > tr:hover.ant-table-row-selected > td,
       & > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
       & > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
@@ -231,7 +241,7 @@
       & > tr:hover.ant-table-row-selected > td,
       & > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
       & > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
-        background-color: transparent;
+        background-color: @table-body-hover;
       }
 
       & > tr > th.ant-table-column-sort {
@@ -330,9 +340,9 @@
       background-color: @dark-secondary-bgColor;
       border: 1px solid @dark-border-color;
       box-shadow:
-        0 3px 6px -4px @light-text-color-3,
-        0 6px 16px 0 @light-text-color-2,
-        0 9px 28px 8px @light-text-color-1;
+        0 3px 6px -4px @box-shadow-1,
+        0 6px 16px 0 @box-shadow-2,
+        0 9px 28px 8px @box-shadow-3;
     }
 
     &-placement {
@@ -389,9 +399,9 @@
     &-content {
       background-color: @dark-secondary-bgColor;
       box-shadow:
-        0 3px 6px -4px @light-text-color-3,
-        0 6px 16px 0 @light-text-color-2,
-        0 9px 28px 8px @light-text-color-1;
+        0 3px 6px -4px @box-shadow-1,
+        0 6px 16px 0 @box-shadow-2,
+        0 9px 28px 8px @box-shadow-3;
     }
 
     &-header {
@@ -418,16 +428,20 @@
   .ant-input-number,
   .ant-time-picker-input {
     background-color: transparent;
-    border-color: @dark-border-color;
     color: @dark-text-color-3;
+
+    &:not(:hover, :focus) {
+      border-color: @dark-border-color;
+    }
   }
 
-  .ant-checkbox-wrapper {
+  .ant-checkbox-wrapper,
+  .ant-select-arrow {
     color: @dark-text-color-3;
   }
 
   .ant-switch {
-    color: @light-text-color-3;
+    color: @light-text-color;
     background-color: @dark-text-color-2;
 
     &-checked {
@@ -439,20 +453,76 @@
     }
   }
 
-  .ant-dropdown-menu {
-    background-color: @dark-secondary-bgColor;
-    border: 1px solid @dark-border-color;
+  .ant-select-dropdown {
+    background-color: @dropdown-background-color;
+    color: @dark-text-color-3;
+    box-shadow:
+      0 3px 6px -4px @box-shadow-1,
+      0 6px 16px 0 @box-shadow-2,
+      0 9px 28px 8px @box-shadow-3;
+
+    &-menu-item {
+      color: @dark-text-color-3;
+
+      &-selected {
+        background-color: @dropdown-menu-hover-color;
+      }
+    }
+
+    &-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled),
+    &-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
+      background-color: @dropdown-menu-hover-color;
+    }
+  }
 
-    &-item > a:hover {
-      .ant-switch:not(.ant-switch-checked) {
-        background-color: @light-text-color-3;
+  .ant-time {
+    &-picker-panel {
+      color: @dark-text-color-3;
+
+      &-inner {
+        background-color: @dropdown-background-color;
+        box-shadow:
+          0 3px 6px -4px @box-shadow-1,
+          0 6px 16px 0 @box-shadow-2,
+          0 9px 28px 8px @box-shadow-3;
+      }
+
+      &-input {
+        background-color: transparent;
+
+        &-wrap {
+          border-color: @dark-border-color;
+        }
+      }
+
+      &-select {
+        border-color: @dark-border-color;
+
+        li:hover,
+        li.ant-time-picker-panel-select-option-selected,
+        li.ant-time-picker-panel-select-option-selected:hover {
+          background-color: @dropdown-menu-hover-color;
+        }
       }
     }
+  }
+
+  .ant-dropdown-menu {
+    background-color: @dropdown-background-color;
+    box-shadow:
+      0 6px 16px -8px @box-shadow-1,
+      0 9px 28px 0 @box-shadow-2,
+      0 12px 48px 16px @box-shadow-3;
+
+    &-item:not(.ant-dropdown-menu-item-selected):hover,
+    &-submenu-title:not(.ant-dropdown-menu-item-selected):hover {
+      background-color: @dropdown-menu-hover-color;
+    }
 
-    &-item:not(.ant-dropdown-menu-item-selected, :hover),
-    &-submenu-title,
-    &-item > a:not(:hover),
-    &-submenu-title > a:not(:hover) {
+    &-item:not(.ant-dropdown-menu-item-selected),
+    &-submenu-title:not(.ant-dropdown-menu-item-selected),
+    &-item:not(.ant-dropdown-menu-item-selected) > a,
+    &-submenu-title:not(.ant-dropdown-menu-item-selected) > a {
       color: @dark-text-color-3;
     }
   }
@@ -480,6 +550,10 @@
     color: @dark-text-color-3;
   }
 
+  .ant-steps-item-finish .ant-steps-item-icon {
+    background-color: transparent;
+  }
+
   .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title,
   .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-description {
     color: @dark-text-color-3;
@@ -580,13 +654,12 @@
   }
 
   .ant-message-notice-content {
-    background-color: @dark-secondary-bgColor;
+    background-color: @notice-background-color;
     color: @dark-text-color-3;
     box-shadow:
-      0 3px 6px -4px @light-text-color-3,
-      0 6px 16px 0 @light-text-color-2,
-      0 9px 28px 8px @light-text-color-1;
-    border: 1px solid @dark-border-color;
+      0 3px 6px -4px @box-shadow-1,
+      0 6px 16px 0 @box-shadow-2,
+      0 9px 28px 8px @box-shadow-3;
   }
 
   .btn-add-tag {
@@ -608,9 +681,9 @@
       background-color: @dark-secondary-bgColor;
       border: 1px solid @dark-border-color;
       box-shadow:
-        0 3px 6px -4px @light-text-color-3,
-        0 6px 16px 0 @light-text-color-2,
-        0 9px 28px 8px @light-text-color-1;
+        0 3px 6px -4px @box-shadow-1,
+        0 6px 16px 0 @box-shadow-2,
+        0 9px 28px 8px @box-shadow-3;
 
       &-message {
         color: @dark-text-color-4;

From ba7b6ad6c6bd3f7613f8798f8f17e12975e7fb9c Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 8 Jun 2021 08:56:07 +0700
Subject: [PATCH 07/17] fix disabled colors of button, input,... & refactor
 file dark mode styles

---
 ui/src/style/dark-mode.less | 207 ++++++++++++++++++++++++++++++------
 ui/src/style/vars.less      |   2 +-
 2 files changed, 177 insertions(+), 32 deletions(-)

diff --git a/ui/src/style/dark-mode.less b/ui/src/style/dark-mode.less
index 45c986d4b57e..6cfdcb2d9682 100644
--- a/ui/src/style/dark-mode.less
+++ b/ui/src/style/dark-mode.less
@@ -15,34 +15,33 @@
 // specific language governing permissions and limitations
 // under the License.
 
-@primary-color: #1890ff;
-@dark-background-color: #090c10;
+@dark-bgColor: #090c10;
 @dark-secondary-bgColor: #141414;
 @dark-text-color-1: rgba(255, 255, 255, 0.25);
 @dark-text-color-2: rgba(255, 255, 255, 0.45);
 @dark-text-color-3: rgba(255, 255, 255, 0.65);
 @dark-text-color-4: rgba(255, 255, 255, 0.85);
-@dark-border-color: #434343;
-@light-text-color: rgba(0, 0, 0, 0.65);
 @box-shadow-1: rgba(0, 0, 0, 0.32);
 @box-shadow-2: rgba(0, 0, 0, 0.20);
 @box-shadow-3: rgba(0, 0, 0, 0.12);
-@dropdown-background-color: #1f1f1f;
-@dropdown-menu-hover-color: rgba(255, 255, 255, 0.08);
-@notice-background-color: #1f1f1f;
-@table-header-background: #1d1d1d;
-@table-header-hover: #303030;
-@table-body-hover: #262626;
+@light-text-color: rgba(0, 0, 0, 0.65);
+@dark-border-color: #434343;
+@dropdown-bgColor: #1f1f1f;
+@dropdown-hover-bgColor: rgba(255, 255, 255, 0.08);
+@table-header-bgColor: #1d1d1d;
+@table-header-hover-bgColor: #303030;
+@table-body-hover-bgColor: #262626;
+@disabled-bgColor: #555;
 
 .dark {
-  background: @dark-background-color;
+  background: @dark-bgColor;
 
   h1, h2, h3, h4, h5, h6 {
     color: @dark-text-color-3;
   }
 
   .user-layout, .ant-layout {
-    background: @dark-background-color;
+    background: @dark-bgColor;
   }
 
   .layout.ant-layout .header {
@@ -166,12 +165,17 @@
   }
 
   .ant-btn {
-    &:not(.ant-btn-primary, .ant-btn-danger) {
+    &:not(.ant-btn-primary, .ant-btn-danger, :disabled) {
       color: @dark-text-color-3;
       background-color: transparent;
       border-color: @dark-border-color;
     }
 
+    &:disabled {
+      background-color: @disabled-bgColor;
+      color: @dark-text-color-3;
+    }
+
     &-primary-disabled,
     &-primary.disabled,
     &-primary[disabled],
@@ -188,7 +192,7 @@
     &-primary.disabled.active,
     &-primary[disabled].active {
       color: @dark-text-color-3;
-      background-color: transparent;
+      background-color: @disabled-bgColor;
     }
   }
 
@@ -206,23 +210,23 @@
     color: @dark-text-color-3;
 
     &-thead {
-      background-color: @table-header-background;
+      background-color: @table-header-bgColor;
 
       tr th {
         color: @dark-text-color-4;
-        background-color: @table-header-background;
+        background-color: @table-header-bgColor;
         border-color: @dark-border-color;
 
         .ant-table-column-has-actions.ant-table-column-has-sorters:hover,
         .ant-table-column-has-actions.ant-table-column-has-sorters:hover,
         .ant-table-column-has-actions.ant-table-column-has-sorters:hover .ant-table-filter-icon,
         .ant-table-column-has-actions.ant-table-column-has-sorters:hover .anticon-filter {
-          background-color: @table-header-hover;
+          background-color: @table-header-hover-bgColor;
         }
       }
 
       & > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover {
-        background-color: @table-header-hover;
+        background-color: @table-header-hover-bgColor;
       }
 
       & > tr:hover.ant-table-row-selected > td,
@@ -241,11 +245,11 @@
       & > tr:hover.ant-table-row-selected > td,
       & > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
       & > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
-        background-color: @table-body-hover;
+        background-color: @table-body-hover-bgColor;
       }
 
       & > tr > th.ant-table-column-sort {
-        background-color: @dark-background-color;
+        background-color: @dark-bgColor;
       }
     }
 
@@ -265,11 +269,15 @@
 
     &-small {
       border-color: @dark-border-color;
+
+      & > .ant-table-content > .ant-table-body .ant-table-thead {
+        background-color: transparent;
+      }
     }
 
     tr.ant-table-expanded-row,
     tr.ant-table-expanded-row:hover {
-      background-color: @dark-background-color;
+      background-color: @dark-bgColor;
     }
 
     &-placeholder {
@@ -376,6 +384,14 @@
     background-image: none;
     border-color: @dark-border-color;
     color: @dark-text-color-3;
+
+    .anticon-close {
+      color: @dark-text-color-3;
+
+      &:hover {
+        color: @dark-text-color-4;
+      }
+    }
   }
 
   .ant-avatar {
@@ -433,6 +449,14 @@
     &:not(:hover, :focus) {
       border-color: @dark-border-color;
     }
+
+    &:disabled, &-disabled {
+      background-color: @disabled-bgColor;
+    }
+  }
+
+  .ant-select-disabled {
+    background-color: @disabled-bgColor;
   }
 
   .ant-checkbox-wrapper,
@@ -451,10 +475,14 @@
     &-loading-icon, &:after {
       background-color: @dark-secondary-bgColor;
     }
+
+    &:disabled {
+      background-color: @disabled-bgColor;
+    }
   }
 
   .ant-select-dropdown {
-    background-color: @dropdown-background-color;
+    background-color: @dropdown-bgColor;
     color: @dark-text-color-3;
     box-shadow:
       0 3px 6px -4px @box-shadow-1,
@@ -465,13 +493,130 @@
       color: @dark-text-color-3;
 
       &-selected {
-        background-color: @dropdown-menu-hover-color;
+        background-color: @dropdown-hover-bgColor;
       }
     }
 
     &-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled),
     &-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
-      background-color: @dropdown-menu-hover-color;
+      background-color: @dropdown-hover-bgColor;
+    }
+  }
+
+  .ant-calendar {
+    background-color: @dropdown-bgColor;
+    border-color: @dark-border-color;
+
+    &-last-month-cell .ant-calendar-date,
+    &-last-month-cell .ant-calendar-date:hover,
+    &-next-month-btn-day .ant-calendar-date,
+    &-next-month-btn-day .ant-calendar-date:hover {
+      color: @dark-text-color-1;
+    }
+
+    &-picker-container, &-date {
+      color: @dark-text-color-3;
+    }
+
+    &-input-wrap {
+      border-color: @dark-border-color;
+    }
+
+    &-range {
+      .ant-calendar-input,
+      .ant-calendar-time-picker-input,
+      .ant-calendar-input:placeholder-shown,
+      .ant-calendar-time-picker-input:placeholder-shown {
+        background-color: transparent;
+        color: @dark-text-color-3;
+      }
+
+      &-middle, &-picker-separator {
+        color: @dark-text-color-3;
+      }
+
+      .ant-calendar-body,
+      .ant-calendar-decade-panel-body,
+      .ant-calendar-month-panel-body,
+      .ant-calendar-year-panel-body {
+        border-color: @dark-border-color;
+      }
+
+      .ant-calendar-in-range-cell > div {
+        color: #000;
+      }
+    }
+
+    &-header {
+      .ant-calendar-next-century-btn,
+      .ant-calendar-next-decade-btn,
+      .ant-calendar-next-month-btn,
+      .ant-calendar-next-year-btn,
+      .ant-calendar-prev-century-btn,
+      .ant-calendar-prev-decade-btn,
+      .ant-calendar-prev-month-btn,
+      .ant-calendar-prev-year-btn {
+        color: @dark-text-color-2;
+      }
+
+      .ant-calendar-prev-month-btn:after,
+      .ant-calendar-prev-month-btn:before,
+      .ant-calendar-next-month-btn::before,
+      .ant-calendar-next-month-btn::after {
+        border-color: @dark-text-color-2;
+      }
+
+      .ant-calendar-prev-month-btn:hover:after,
+      .ant-calendar-prev-month-btn:hover:before,
+      .ant-calendar-next-month-btn:hover::before,
+      .ant-calendar-next-month-btn:hover::after {
+        border-color: @dark-text-color-4;
+      }
+
+      .ant-calendar-century-select:not(:hover),
+      .ant-calendar-decade-select:not(:hover),
+      .ant-calendar-month-select:not(:hover),
+      .ant-calendar-year-select:not(:hover) {
+        color: @dark-text-color-3;
+      }
+
+
+      .ant-calendar-prev-century-btn::before,
+      .ant-calendar-prev-decade-btn::before,
+      .ant-calendar-prev-year-btn::before,
+      .ant-calendar-prev-century-btn::after,
+      .ant-calendar-prev-decade-btn::after,
+      .ant-calendar-prev-year-btn::after,
+      .ant-calendar-next-century-btn::before,
+      .ant-calendar-next-decade-btn::before,
+      .ant-calendar-next-year-btn::before,
+      .ant-calendar-next-century-btn::after,
+      .ant-calendar-next-decade-btn::after,
+      .ant-calendar-next-year-btn::after {
+        border-color: @dark-text-color-2;
+      }
+
+      .ant-calendar-prev-century-btn:hover::before,
+      .ant-calendar-prev-decade-btn:hover::before,
+      .ant-calendar-prev-year-btn:hover::before,
+      .ant-calendar-prev-century-btn:hover::after,
+      .ant-calendar-prev-decade-btn:hover::after,
+      .ant-calendar-prev-year-btn:hover::after {
+        border-color: @dark-text-color-4;
+      }
+    }
+
+    &-date:hover {
+      color: #000;
+    }
+
+    &-picker-clear {
+      color: @dark-text-color-2;
+      background: transparent;
+
+      &:hover {
+        color: @dark-text-color-4;
+      }
     }
   }
 
@@ -480,7 +625,7 @@
       color: @dark-text-color-3;
 
       &-inner {
-        background-color: @dropdown-background-color;
+        background-color: @dropdown-bgColor;
         box-shadow:
           0 3px 6px -4px @box-shadow-1,
           0 6px 16px 0 @box-shadow-2,
@@ -501,14 +646,14 @@
         li:hover,
         li.ant-time-picker-panel-select-option-selected,
         li.ant-time-picker-panel-select-option-selected:hover {
-          background-color: @dropdown-menu-hover-color;
+          background-color: @dropdown-hover-bgColor;
         }
       }
     }
   }
 
   .ant-dropdown-menu {
-    background-color: @dropdown-background-color;
+    background-color: @dropdown-bgColor;
     box-shadow:
       0 6px 16px -8px @box-shadow-1,
       0 9px 28px 0 @box-shadow-2,
@@ -516,7 +661,7 @@
 
     &-item:not(.ant-dropdown-menu-item-selected):hover,
     &-submenu-title:not(.ant-dropdown-menu-item-selected):hover {
-      background-color: @dropdown-menu-hover-color;
+      background-color: @dropdown-hover-bgColor;
     }
 
     &-item:not(.ant-dropdown-menu-item-selected),
@@ -626,7 +771,7 @@
   }
 
   .form-content, .zone-support {
-    background-color: @dark-background-color;
+    background-color: @dark-bgColor;
     border-color: @dark-border-color;
   }
 
@@ -654,7 +799,7 @@
   }
 
   .ant-message-notice-content {
-    background-color: @notice-background-color;
+    background-color: @dropdown-bgColor;
     color: @dark-text-color-3;
     box-shadow:
       0 3px 6px -4px @box-shadow-1,
@@ -707,7 +852,7 @@
     }
 
     & > .ant-collapse-item {
-      background-color: @dark-background-color;
+      background-color: @dark-bgColor;
 
       & > .ant-collapse-header {
         color: @dark-text-color-3;
diff --git a/ui/src/style/vars.less b/ui/src/style/vars.less
index ccb13dbb5e32..8ce8498bf503 100644
--- a/ui/src/style/vars.less
+++ b/ui/src/style/vars.less
@@ -310,7 +310,7 @@ a {
 .ant-btn.filter-button:hover,
 .ant-dropdown-menu-item:hover,
 .ant-dropdown-menu-submenu-title:hover,
-.ant-dropdown-menu-item > a:hover, 
+.ant-dropdown-menu-item > a:hover,
 .ant-dropdown-menu-submenu-title > a:hover {
   color: @primary-color;
 }
\ No newline at end of file

From 7737f48cebe88a8acd50d9457af6653378b63a38 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Thu, 17 Jun 2021 12:48:51 +0700
Subject: [PATCH 08/17] add setting drawer and save it into local storage

---
 ui/public/locales/en.json               |  20 ++
 ui/src/App.vue                          |   7 +-
 ui/src/assets/icons/dark.svg            |  39 +++
 ui/src/assets/icons/light.svg           |  40 +++
 ui/src/components/header/UserMenu.vue   |  14 +-
 ui/src/components/page/GlobalLayout.vue |  34 ++-
 ui/src/components/view/Setting.vue      | 386 ++++++++++++++++++++++++
 ui/src/components/view/SettingItem.vue  | 185 ++++++++++++
 ui/src/components/widgets/Drawer.vue    | 170 +++++++++++
 ui/src/layouts/UserLayout.vue           |   8 +-
 ui/src/store/getters.js                 |   3 +-
 ui/src/store/modules/user.js            |  17 +-
 ui/src/store/mutation-types.js          |   1 +
 ui/src/style/dark-mode.less             |  45 ++-
 ui/src/style/vars.less                  |  31 +-
 15 files changed, 958 insertions(+), 42 deletions(-)
 create mode 100644 ui/src/assets/icons/dark.svg
 create mode 100644 ui/src/assets/icons/light.svg
 create mode 100644 ui/src/components/view/Setting.vue
 create mode 100644 ui/src/components/view/SettingItem.vue
 create mode 100644 ui/src/components/widgets/Drawer.vue

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 06488e01b7c5..4f55d1d0d834 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -595,6 +595,7 @@
 "label.copy": "Copy",
 "label.copy.clipboard": "Copy to clipboard",
 "label.copy.text": "Copy Text",
+"label.copy.setting.success": "Copy success, Please replace theme setting in public/config.js",
 "label.copyid": "Copy ID",
 "label.copying.iso": "Copying ISO",
 "label.corrections.saved": "Corrections saved",
@@ -1856,6 +1857,7 @@
 "label.save.and.continue": "Save and continue",
 "label.save.changes": "Save changes",
 "label.save.new.rule": "Save new Rule",
+"label.save.setting": "Save setting",
 "label.saving.processing": "Saving....",
 "label.scale.vm": "Scale VM",
 "label.scale.up.policy": "SCALE UP POLICY",
@@ -2102,9 +2104,27 @@
 "label.templatetype": "Template Type",
 "label.tftp.dir": "TFTP Directory",
 "label.tftpdir": "Tftp root directory",
+"label.theme.color": "Theme Color",
+"label.theme.cyan": "Cyan",
+"label.theme.dark": "Dark Style",
+"label.theme.daybreak.blue": "Daybreak Blue",
 "label.theme.default": "Default Theme",
+"label.theme.dust.red": "Dust Red",
+"label.theme.geek.blue": "Geek Blue",
+"label.theme.golden.purple": "Golden Purple",
 "label.theme.grey": "Custom - Grey",
+"label.theme.light": "Light Style",
 "label.theme.lightblue": "Custom - Light Blue",
+"label.theme.navigation.bgColor": "Background Color",
+"label.theme.navigation.setting": "Navigation setting",
+"label.theme.navigation.txtColor": "Text Color",
+"label.theme.page.style.setting": "Page style setting",
+"label.theme.polar.green": "Polar Green",
+"label.theme.project": "Project Style",
+"label.theme.project.navigation.setting": "Project Navigation setting",
+"label.theme.sunset.orange": "Sunset Orange",
+"label.theme.volcano": "Volcano",
+"label.theme.white": "White",
 "label.threshold": "Threshold",
 "label.thursday": "Thursday",
 "label.tier.details": "Tier details",
diff --git a/ui/src/App.vue b/ui/src/App.vue
index fa75a8e635c3..f7aa55892e53 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -36,7 +36,12 @@ export default {
     }
   },
   created () {
-    window.less.modifyVars(this.$config.theme)
+    const userThemeSetting = this.$store.getters.themeSetting || {}
+    if (Object.keys(userThemeSetting).length === 0) {
+      window.less.modifyVars(this.$config.theme)
+    } else {
+      window.less.modifyVars(userThemeSetting)
+    }
     console.log('config and theme applied')
   }
 }
diff --git a/ui/src/assets/icons/dark.svg b/ui/src/assets/icons/dark.svg
new file mode 100644
index 000000000000..731e3f24c82e
--- /dev/null
+++ b/ui/src/assets/icons/dark.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" 
+    xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
+        <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="配置面板" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
+            <g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
+                <g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
+                    <mask id="mask-3" fill="white">
+                        <use xlink:href="#path-2"></use>
+                    </mask>
+                    <g id="Rectangle-18">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                        <use fill="#303648" fill-rule="evenodd" xlink:href="#path-2"></use>
+                    </g>
+                    <rect id="Rectangle-11" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
+                    <rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/ui/src/assets/icons/light.svg b/ui/src/assets/icons/light.svg
new file mode 100644
index 000000000000..80222c21483f
--- /dev/null
+++ b/ui/src/assets/icons/light.svg
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 5</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
+        <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="配置面板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="setting-copy-2" transform="translate(-1254.000000, -136.000000)">
+            <g id="Group-8" transform="translate(1167.000000, 0.000000)">
+                <g id="Group-5" filter="url(#filter-1)" transform="translate(89.000000, 137.000000)">
+                    <mask id="mask-3" fill="white">
+                        <use xlink:href="#path-2"></use>
+                    </mask>
+                    <g id="Rectangle-18">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                        <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
+                    </g>
+                    <rect id="Rectangle-18" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="16" height="44"></rect>
+                    <rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="-1" y="0" width="49" height="10"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/ui/src/components/header/UserMenu.vue b/ui/src/components/header/UserMenu.vue
index b9cb5d25270e..33335c6efd15 100644
--- a/ui/src/components/header/UserMenu.vue
+++ b/ui/src/components/header/UserMenu.vue
@@ -40,21 +40,14 @@
               :checked="$store.getters.usebrowsertimezone" />
           </a>
         </a-menu-item>
-        <a-menu-item class="user-menu-item" key="2">
-          <a @click="toggleDarkMode">
-            <a-icon class="user-menu-item-icon" type="bulb"/>
-            <span class="user-menu-item-name" style="margin-right: 5px">{{ $t('label.dark.mode') }}</span>
-            <a-switch :checked="$store.getters.darkMode" />
-          </a>
-        </a-menu-item>
-        <a-menu-item class="user-menu-item" key="3" disabled>
+        <a-menu-item class="user-menu-item" key="2" disabled>
           <a :href="$config.docBase" target="_blank">
             <a-icon class="user-menu-item-icon" type="question-circle-o"></a-icon>
             <span class="user-menu-item-name">{{ $t('label.help') }}</span>
           </a>
         </a-menu-item>
         <a-menu-divider/>
-        <a-menu-item class="user-menu-item" key="4">
+        <a-menu-item class="user-menu-item" key="3">
           <a href="javascript:;" @click="handleLogout">
             <a-icon class="user-menu-item-icon" type="logout"/>
             <span class="user-menu-item-name">{{ $t('label.logout') }}</span>
@@ -82,9 +75,6 @@ export default {
     toggleUseBrowserTimezone () {
       this.$store.dispatch('SetUseBrowserTimezone', !this.$store.getters.usebrowsertimezone)
     },
-    toggleDarkMode () {
-      this.$store.dispatch('SetDarkMode', !this.$store.getters.darkMode)
-    },
     handleLogout () {
       return this.Logout({}).then(() => {
         this.$router.push('/user/login')
diff --git a/ui/src/components/page/GlobalLayout.vue b/ui/src/components/page/GlobalLayout.vue
index da8572a95165..f5f782faeb6e 100644
--- a/ui/src/components/page/GlobalLayout.vue
+++ b/ui/src/components/page/GlobalLayout.vue
@@ -63,6 +63,17 @@
       </a-drawer>
     </template>
 
+    <template>
+      <drawer :visible="showSetting" placement="right">
+        <div slot="handler">
+          <a-button type="primary" size="large">
+            <a-icon :type="showSetting ? 'close' : 'setting'"/>
+          </a-button>
+        </div>
+        <setting slot="drawer" :visible="showSetting" />
+      </drawer>
+    </template>
+
     <a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }">
       <!-- layout header -->
       <global-header
@@ -94,19 +105,24 @@ import GlobalFooter from '@/components/page/GlobalFooter'
 import { triggerWindowResizeEvent } from '@/utils/util'
 import { mapState, mapActions } from 'vuex'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
+import Drawer from '@/components/widgets/Drawer'
+import Setting from '@/components/view/Setting.vue'
 
 export default {
   name: 'GlobalLayout',
   components: {
     SideMenu,
     GlobalHeader,
-    GlobalFooter
+    GlobalFooter,
+    Drawer,
+    Setting
   },
   mixins: [mixin, mixinDevice],
   data () {
     return {
       collapsed: false,
-      menus: []
+      menus: [],
+      showSetting: true
     }
   },
   computed: {
@@ -132,19 +148,24 @@ export default {
     },
     '$store.getters.darkMode' (darkMode) {
       if (darkMode) {
-        document.body.classList.add('dark')
+        document.body.classList.add('dark-mode')
       } else {
-        document.body.classList.remove('dark')
+        document.body.classList.remove('dark-mode')
       }
     }
   },
+  provide: function () {
+    return {
+      parentToggleSetting: this.toggleSetting
+    }
+  },
   created () {
     this.menus = this.mainMenu.find((item) => item.path === '/').children
     this.collapsed = !this.sidebarOpened
   },
   mounted () {
     if (this.$store.getters.darkMode) {
-      document.body.classList.add('dark')
+      document.body.classList.add('dark-mode')
     }
     const userAgent = navigator.userAgent
     if (userAgent.indexOf('Edge') > -1) {
@@ -179,6 +200,9 @@ export default {
       if (!this.isDesktop()) {
         this.collapsed = false
       }
+    },
+    toggleSetting (showSetting) {
+      this.showSetting = showSetting
     }
   }
 }
diff --git a/ui/src/components/view/Setting.vue b/ui/src/components/view/Setting.vue
new file mode 100644
index 000000000000..45d35e0035d3
--- /dev/null
+++ b/ui/src/components/view/Setting.vue
@@ -0,0 +1,386 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div class="side-setting">
+    <setting-item :title="$t('label.theme.page.style.setting')" view-type="item">
+      <a-radio-group
+        class="setting-group"
+        name="themeGroup"
+        :default-value="layoutMode"
+        @change="switchLayoutMode">
+        <setting-item
+          view-type="radio-group"
+          :items="pageStyles"
+          :checked="layoutMode"></setting-item>
+      </a-radio-group>
+    </setting-item>
+
+    <setting-item :title="$t('label.theme.color')" view-type="item" style="display: block;">
+      <a-radio-group
+        class="setting-group"
+        name="colorGroup"
+        :default-value="colorPick"
+        @change="switchColor">
+        <setting-item
+          view-type="radio-group"
+          :items="colors"
+          :checked="colorPick"></setting-item>
+      </a-radio-group>
+
+      <a-divider style="margin-top: 45px;" />
+    </setting-item>
+
+    <setting-item
+      v-if="!projectView"
+      :title="$t('label.theme.navigation.setting')"
+      view-type="item">
+
+      <a-list :split="false">
+        <a-list-item>
+          <div class="input-group">
+            <label>{{ $t('label.theme.navigation.bgColor') }}</label>
+            <div class="color-picker" :style="{ backgroundColor: navBgColorPick }">
+              <a-input
+                :disabled="layoutMode === 'dark'"
+                type="color"
+                v-model="navBgColorPick"
+                @change="(e) => updateSetting('@navigation-background-color', e.target.value)" />
+            </div>
+          </div>
+        </a-list-item>
+        <a-list-item>
+          <div class="input-group">
+            <label>{{ $t('label.theme.navigation.txtColor') }}</label>
+            <div class="color-picker" :style="{ backgroundColor: navTextColorPick }">
+              <a-input
+                :disabled="layoutMode === 'dark'"
+                type="color"
+                v-model="navBgColorPick"
+                @change="(e) => updateSetting('@navigation-text-color', e.target.value)" />
+            </div>
+          </div>
+        </a-list-item>
+      </a-list>
+    </setting-item>
+
+    <setting-item
+      v-if="projectView"
+      :title="$t('label.theme.project.navigation.setting')"
+      view-type="item">
+      <a-list :split="false">
+        <a-list-item>
+          <div class="input-group">
+            <label>{{ $t('label.theme.navigation.bgColor') }}</label>
+            <div class="color-picker" :style="{ backgroundColor: projectNavBgColorPick }">
+              <a-input
+                type="color"
+                v-model="projectNavBgColorPick"
+                @change="(e) => updateSetting('@project-nav-background-color', e.target.value)" />
+            </div>
+          </div>
+        </a-list-item>
+        <a-list-item>
+          <div class="input-group">
+            <label>{{ $t('label.theme.navigation.txtColor') }}</label>
+            <div class="color-picker" :style="{ backgroundColor: projectNavTextColorPick }">
+              <a-input
+                type="color"
+                v-model="projectNavTextColorPick"
+                @change="(e) => updateSetting('@project-nav-text-color', e.target.value)" />
+            </div>
+          </div>
+        </a-list-item>
+      </a-list>
+    </setting-item>
+
+    <div class="setting-action">
+      <a-divider style="margin: 15px 0;" />
+      <a-button
+        class="setting-action-btn"
+        icon="copy"
+        @click="saveSetting">{{ $t('label.save.setting') }}</a-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import SettingItem from '@/components/view/SettingItem'
+
+export default {
+  name: 'Setting',
+  components: {
+    SettingItem
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      layoutMode: 'light',
+      colorPick: this.$store.getters.themeSetting['@primary-color'] || this.$config.theme['@primary-color'],
+      navBgColorPick: this.$store.getters.themeSetting['@navigation-background-color'] || this.$config.theme['@navigation-background-color'],
+      navTextColorPick: this.$store.getters.themeSetting['@navigation-text-color'] || this.$config.theme['@navigation-text-color'],
+      projectNavBgColorPick: this.$store.getters.themeSetting['@project-nav-background-color'] || this.$config.theme['@project-nav-background-color'],
+      projectNavTextColorPick: this.$store.getters.themeSetting['@project-nav-text-color'] || this.$config.theme['@project-nav-text-color'],
+      uiSettings: {}
+    }
+  },
+  computed: {
+    projectView () {
+      return Boolean(this.$store.getters.project && this.$store.getters.project.id)
+    },
+    pageStyles () {
+      const arrStyle = [
+        {
+          name: 'light',
+          type: 'image-checkbox',
+          component: () => import('@/assets/icons/light.svg?inline')
+        },
+        {
+          name: 'dark',
+          type: 'image-checkbox',
+          component: () => import('@/assets/icons/dark.svg?inline')
+        }
+      ]
+      return arrStyle
+    },
+    colors () {
+      return [
+        {
+          name: 'daybreak.blue',
+          type: 'color-checkbox',
+          color: '#1890ff'
+        },
+        {
+          name: 'dust.red',
+          type: 'color-checkbox',
+          color: '#f5222d'
+        },
+        {
+          name: 'volcano',
+          type: 'color-checkbox',
+          color: '#fa541c'
+        },
+        {
+          name: 'sunset.orange',
+          type: 'color-checkbox',
+          color: '#faad14'
+        },
+        {
+          name: 'cyan',
+          type: 'color-checkbox',
+          color: '#13c2c2'
+        },
+        {
+          name: 'polar.green',
+          type: 'color-checkbox',
+          color: '#52c41a'
+        },
+        {
+          name: 'geek.blue',
+          type: 'color-checkbox',
+          color: '#2f54eb'
+        },
+        {
+          name: 'golden.purple',
+          type: 'color-checkbox',
+          color: '#722ed1'
+        }
+      ]
+    }
+  },
+  inject: ['parentToggleSetting'],
+  watch: {
+    projectView () {
+      this.fetchData()
+    }
+  },
+  created () {
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      this.layoutMode = 'light'
+      if (this.$store.getters.darkMode) {
+        this.layoutMode = 'dark'
+      }
+      this.uiSettings = this.$config.theme
+    },
+    switchLayoutMode (e) {
+      this.layoutMode = e.target.value
+      if (this.layoutMode === 'dark') {
+        this.$store.dispatch('SetDarkMode', true)
+      } else if (this.layoutMode === 'light') {
+        this.$store.dispatch('SetDarkMode', false)
+      }
+    },
+    switchColor (e) {
+      this.colorPick = e.target.value
+      this.updateSetting('@primary-color', this.colorPick)
+    },
+    updateSetting (name, value) {
+      this.uiSettings[name] = value
+      if (['@navigation-background-color'].includes(name)) {
+        this.uiSettings['@logo-background-color'] = value
+      }
+      window.less.modifyVars(this.uiSettings)
+    },
+    onClose () {
+      this.parentToggleSetting(false)
+    },
+    saveSetting () {
+      const loading = this.$message.loading(this.$t('label.save.setting'), 0)
+      this.$store.dispatch('SetThemeSetting', this.uiSettings)
+      setTimeout(() => {
+        loading()
+        this.$message.success(this.$t('label.success'))
+      }, 1000)
+    },
+    formatConfig (obj, dep) {
+      dep = dep || 1
+      const LN = '\n'
+      const TAB = '  '
+      let indent = ''
+      for (let i = 0; i < dep; i++) {
+        indent += TAB
+      }
+      let isArray = false
+      let arrayLastIsObj = false
+      let str = ''
+      let prefix = '{'
+      let subfix = '}'
+
+      if (Array.isArray(obj)) {
+        isArray = true
+        prefix = '['
+        subfix = ']'
+        str = obj.map((item, index) => {
+          let format = ''
+          if (typeof item === 'function') {
+            //
+          } else if (typeof item === 'object') {
+            arrayLastIsObj = true
+            format = `${LN}${indent}${this.formatConfig(item, dep + 1)},`
+          } else if ((typeof item === 'number' && !isNaN(item)) || typeof item === 'boolean') {
+            format = `${item},`
+          } else if (typeof item === 'string') {
+            format = `'${item}',`
+          }
+          if (index === obj.length - 1) {
+            format = format.substring(0, format.length - 1)
+          } else {
+            arrayLastIsObj = false
+          }
+          return format
+        }).join('')
+      } else if (typeof obj !== 'function' && typeof obj === 'object') {
+        str = Object.keys(obj).map((key, index, keys) => {
+          const val = obj[key]
+          let format = ''
+          if (typeof val === 'function') {
+            //
+          } else if (typeof val === 'object') {
+            format = `${LN}${indent}${key}: ${this.formatConfig(val, dep + 1)},`
+          } else if ((typeof val === 'number' && !isNaN(val)) || typeof val === 'boolean') {
+            format = `${LN}${indent}${key}: ${val},`
+          } else if (typeof val === 'string') {
+            format = `${LN}${indent}${key}: '${val}',`
+          }
+          if (index === keys.length - 1) {
+            format = format.substring(0, format.length - 1)
+          }
+          return format
+        }).join('')
+      }
+      const len = TAB.length
+      if (indent.length >= len) {
+        indent = indent.substring(0, indent.length - len)
+      }
+      if (!isArray || arrayLastIsObj) {
+        subfix = LN + indent + subfix
+      }
+
+      return `${prefix}${str}${subfix}`
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.side-setting {
+  min-height: 100%;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+  position: relative;
+  padding: 20px 0;
+
+  .flex{
+    display: flex;
+  }
+  .select-item{
+    width: 80px;
+  }
+}
+
+.setting-group {
+  width: 100%;
+}
+
+.input-group {
+  display: inline-flex;
+  width: 100%;
+  position: relative;
+
+  .color-picker {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    overflow: hidden;
+    top: 0;
+    right: 0;
+    border: 1px solid;
+
+    .ant-input {
+      opacity: 0;
+      height: 20px;
+      width: 20px;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+}
+
+.setting-action {
+  width: 100%;
+  padding: 0 24px;
+
+  &-alert {
+    margin: 20px 0 8px;
+    word-break: break-all
+  }
+
+  &-btn {
+    width: 100%;
+  }
+}
+</style>
diff --git a/ui/src/components/view/SettingItem.vue b/ui/src/components/view/SettingItem.vue
new file mode 100644
index 000000000000..fa458d62d4e0
--- /dev/null
+++ b/ui/src/components/view/SettingItem.vue
@@ -0,0 +1,185 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div>
+    <div class="setting-item" v-if="viewType === 'item'">
+      <h3 class="title">{{ title }}</h3>
+      <slot></slot>
+    </div>
+
+    <div class="setting-image-item" v-if="viewType === 'radio-group'">
+      <a-row :span="24" style="display: flex;">
+        <a-col v-for="(item) in items" :key="item.name" :style="colWidth">
+          <a-tooltip :title="$t(`label.theme.${item.name}`)" placement="top">
+            <div :class="['img-checkbox', item.disabled ? 'disabled' : '']" v-if="item.type==='image-checkbox'">
+              <component
+                :is="item.component"
+                :style="{
+                  height: '56px',
+                  width: '56px'
+                }"/>
+              <div :class="['check-item', item.name === checked ? 'check-item-checked' : '']">
+                <a-radio :value="item.name" :disabled="item.disabled"></a-radio>
+                <a-icon :class="['check-icon', item.name]" type="check" />
+              </div>
+            </div>
+
+            <div class="color-checkbox" v-else>
+              <div
+                :class="['check-color', item.color === checked ? 'check-color-checked' : '']"
+                :style="{ backgroundColor: item.color }">
+                <a-radio :value="item.color"></a-radio>
+                <a-icon class="check-icon" type="check" />
+              </div>
+            </div>
+          </a-tooltip>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import AddNetscalerLoadBalancer from '@/views/infra/network/providers/AddNetscalerLoadBalancer.vue'
+
+export default {
+  components: { AddNetscalerLoadBalancer },
+  name: 'SettingItem',
+  props: {
+    viewType: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    checked: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    colWidth () {
+      if (this.items.length === 2) {
+        return { width: '70px' }
+      }
+
+      return { width: `${(100 / this.items.length)}%` }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.setting-item{
+  margin-bottom: 24px;
+  padding: 0 24px;
+
+  .title {
+    line-height: 22px;
+    margin-bottom: 12px;
+  }
+}
+
+.img-checkbox {
+  margin-right: 16px;
+  position: relative;
+  border-radius: 4px;
+  cursor: pointer;
+  width: 55px;
+  height: 50px;
+
+  .check-item {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    padding-top: 25px;
+    padding-left: 20px;
+    height: 100%;
+    font-size: 14px;
+    font-weight: bold;
+
+    .ant-radio-wrapper {
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 48px;
+      height: 48px;
+    }
+
+    .check-icon {
+      display: none;
+    }
+
+    &-checked {
+      .check-icon {
+        display: block;
+      }
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.9;
+
+    .ant-radio-wrapper {
+      cursor: not-allowed;
+    }
+  }
+}
+
+.color-checkbox {
+  position: relative;
+  cursor: pointer;
+
+  .check-color {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+
+    .ant-radio-wrapper {
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin: 0;
+      width: 20px;
+      height: 20px;
+    }
+
+    .check-icon {
+      display: none;
+      position: absolute;
+      top: 3px;
+      left: 3px;
+    }
+
+    &-checked {
+      .check-icon {
+        display: block;
+      }
+    }
+  }
+}
+</style>
diff --git a/ui/src/components/widgets/Drawer.vue b/ui/src/components/widgets/Drawer.vue
new file mode 100644
index 000000000000..8cfd59da8ce8
--- /dev/null
+++ b/ui/src/components/widgets/Drawer.vue
@@ -0,0 +1,170 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div>
+    <div :class="['mask', visible ? 'open' : 'close']" @click="close"></div>
+    <div :class="['drawer', placement, visible ? 'open' : 'close']">
+      <div ref="drawer" class="content">
+        <slot name="drawer"></slot>
+      </div>
+
+      <div
+        :class="['handler-container', placement, visible ? 'open' : 'close']"
+        ref="handler"
+        @click="toggle">
+        <slot v-if="$slots.handler" name="handler"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Drawer',
+  data () {
+    return {
+    }
+  },
+  model: {
+    prop: 'visible',
+    event: 'change'
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    placement: {
+      type: String,
+      required: false,
+      default: 'left'
+    },
+    showHandler: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  inject: ['parentToggleSetting'],
+  methods: {
+    open () {
+      this.parentToggleSetting(true)
+    },
+    close () {
+      this.parentToggleSetting(false)
+    },
+    toggle () {
+      this.parentToggleSetting(!this.visible)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.mask {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  transition: all 0.5s;
+  z-index: 100;
+  background-color: #000000;
+  opacity: 0.2;
+
+  &.open{
+    display: inline-block;
+  }
+
+  &.close{
+    display: none;
+  }
+}
+
+.drawer{
+  position: fixed;
+  transition: all 0.5s;
+  height: 100vh;
+  z-index: 100;
+
+  &.left{
+    left: 0;
+
+    &.close{
+      transform: translateX(-100%);
+    }
+  }
+
+  &.right{
+    right: 0;
+
+    &.close{
+      transform: translateX(100%);
+    }
+  }
+}
+
+.content {
+  display: inline-block;
+  height: 100vh;
+  overflow-y: auto;
+  width: 300px;
+  background-color: #FFFFFF;
+}
+
+.handler-container {
+  position: absolute;
+  display: inline-block;
+  text-align: center;
+  transition: all 0.5s;
+  cursor: pointer;
+  top: calc(50% - 45px);
+  z-index: 100;
+
+  &.left{
+    right: -40px;
+
+    .handler{
+      border-radius: 0 5px 5px 0;
+    }
+
+    button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      padding-left: 10px;
+      padding-right: 12px;
+    }
+  }
+
+  &.right{
+    left: -40px;
+
+    .handler {
+      border-radius: 5px 0 0 5px;
+    }
+
+    button {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      padding-left: 12px;
+      padding-right: 10px;
+    }
+  }
+}
+</style>
diff --git a/ui/src/layouts/UserLayout.vue b/ui/src/layouts/UserLayout.vue
index 5b7493cf8086..e25bab4c8cbb 100644
--- a/ui/src/layouts/UserLayout.vue
+++ b/ui/src/layouts/UserLayout.vue
@@ -50,9 +50,9 @@ export default {
   watch: {
     '$store.getters.darkMode' (darkMode) {
       if (darkMode) {
-        document.body.classList.add('dark')
+        document.body.classList.add('dark-mode')
       } else {
-        document.body.classList.remove('dark')
+        document.body.classList.remove('dark-mode')
       }
     }
   },
@@ -60,12 +60,12 @@ export default {
     document.body.classList.add('userLayout')
     const darkMode = Vue.ls.get(DARK_MODE, false)
     if (this.$store.getters.darkMode || darkMode) {
-      document.body.classList.add('dark')
+      document.body.classList.add('dark-mode')
     }
   },
   beforeDestroy () {
     document.body.classList.remove('userLayout')
-    document.body.classList.remove('dark')
+    document.body.classList.remove('dark-mode')
   }
 }
 </script>
diff --git a/ui/src/store/getters.js b/ui/src/store/getters.js
index 22ae9626d838..07ef6c62cedf 100644
--- a/ui/src/store/getters.js
+++ b/ui/src/store/getters.js
@@ -37,7 +37,8 @@ const getters = {
   timezoneoffset: state => state.user.timezoneoffset,
   usebrowsertimezone: state => state.user.usebrowsertimezone,
   domainStore: state => state.user.domainStore,
-  darkMode: state => state.user.darkMode
+  darkMode: state => state.user.darkMode,
+  themeSetting: state => state.user.themeSetting
 }
 
 export default getters
diff --git a/ui/src/store/modules/user.js b/ui/src/store/modules/user.js
index dcf59f8327e3..2c178db8fed7 100644
--- a/ui/src/store/modules/user.js
+++ b/ui/src/store/modules/user.js
@@ -34,7 +34,8 @@ import {
   USE_BROWSER_TIMEZONE,
   ASYNC_JOB_IDS,
   DOMAIN_STORE,
-  DARK_MODE
+  DARK_MODE,
+  THEME_SETTING
 } from '@/store/mutation-types'
 
 const user = {
@@ -53,7 +54,8 @@ const user = {
     timezoneoffset: 0.0,
     usebrowsertimezone: false,
     domainStore: {},
-    darkMode: false
+    darkMode: false,
+    themeSetting: {}
   },
 
   mutations: {
@@ -112,6 +114,10 @@ const user = {
     SET_DARK_MODE (state, darkMode) {
       state.darkMode = darkMode
       Vue.ls.set(DARK_MODE, darkMode)
+    },
+    SET_THEME_SETTING (state, setting) {
+      state.themeSetting = setting
+      Vue.ls.set(THEME_SETTING, setting)
     }
   },
 
@@ -139,6 +145,8 @@ const user = {
           commit('SET_USE_BROWSER_TIMEZONE', cachedUseBrowserTimezone)
           const darkMode = Vue.ls.get(DARK_MODE, false)
           commit('SET_DARK_MODE', darkMode)
+          const themeSetting = Vue.ls.get(THEME_SETTING, {})
+          commit('SET_THEME_SETTING', themeSetting)
 
           commit('SET_APIS', {})
           commit('SET_NAME', '')
@@ -168,10 +176,12 @@ const user = {
         const cachedUseBrowserTimezone = Vue.ls.get(USE_BROWSER_TIMEZONE, false)
         const domainStore = Vue.ls.get(DOMAIN_STORE, {})
         const darkMode = Vue.ls.get(DARK_MODE, false)
+        const themeSetting = Vue.ls.get(THEME_SETTING, {})
         const hasAuth = Object.keys(cachedApis).length > 0
 
         commit('SET_DOMAIN_STORE', domainStore)
         commit('SET_DARK_MODE', darkMode)
+        commit('SET_THEME_SETTING', themeSetting)
         if (hasAuth) {
           console.log('Login detected, using cached APIs')
           commit('SET_ZONES', cachedZones)
@@ -350,6 +360,9 @@ const user = {
     },
     SetDarkMode ({ commit }, darkMode) {
       commit('SET_DARK_MODE', darkMode)
+    },
+    SetThemeSetting ({ commit }, setting) {
+      commit('SET_THEME_SETTING', setting)
     }
   }
 }
diff --git a/ui/src/store/mutation-types.js b/ui/src/store/mutation-types.js
index 7c0f946db8f6..bc4b214c8330 100644
--- a/ui/src/store/mutation-types.js
+++ b/ui/src/store/mutation-types.js
@@ -34,6 +34,7 @@ export const TIMEZONE_OFFSET = 'TIMEZONE_OFFSET'
 export const USE_BROWSER_TIMEZONE = 'USE_BROWSER_TIMEZONE'
 export const DOMAIN_STORE = 'DOMAIN_STORE'
 export const DARK_MODE = 'DARK_MODE'
+export const THEME_SETTING = 'THEME_SETTING'
 
 export const CONTENT_WIDTH_TYPE = {
   Fluid: 'Fluid',
diff --git a/ui/src/style/dark-mode.less b/ui/src/style/dark-mode.less
index 6cfdcb2d9682..67c4907b5e7d 100644
--- a/ui/src/style/dark-mode.less
+++ b/ui/src/style/dark-mode.less
@@ -33,7 +33,7 @@
 @table-body-hover-bgColor: #262626;
 @disabled-bgColor: #555;
 
-.dark {
+.dark-mode {
   background: @dark-bgColor;
 
   h1, h2, h3, h4, h5, h6 {
@@ -96,17 +96,28 @@
     background: @dark-secondary-bgColor;
   }
 
-  .ant-menu-item:not(.ant-menu-item-selected, :hover) > a,
-  .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:not(:hover),
-  .ant-menu-vertical-left .ant-menu-submenu-title:not(:hover),
-  .ant-menu-vertical-right .ant-menu-submenu-title:not(:hover),
-  .ant-menu-inline .ant-menu-submenu-title:not(:hover)
-  {
-    color: @dark-text-color-3;
+  .ant-menu {
+    &-vertical:not(.ant-menu-dark) {
+      .ant-menu-item,
+      .ant-menu-submenu-title:not(:hover),
+      .ant-menu-item:not(.ant-menu-item-selected, :hover) > a {
+        color: @dark-text-color-3;
+      }
+    }
+
+    &-inline:not(.ant-menu-dark, .ant-menu-sub) {
+      .ant-menu-item,
+      .ant-menu-item > a:not(:hover),
+      .ant-menu-submenu-title:not(:hover) {
+        color: @dark-text-color-3;
+      }
+    }
+
+    &-submenu:not(.ant-menu-dark, .ant-menu-submenu-inline) {
+      .ant-menu-item:not(.ant-menu-item-selected, :hover) > a {
+        color: @dark-text-color-3;
+      }
+    }
   }
 
   .kubernet-icon path
@@ -864,5 +875,15 @@
       }
     }
   }
+
+  .drawer {
+    .content {
+      background-color: @dark-secondary-bgColor;
+      box-shadow:
+        0 3px 6px -4px @box-shadow-1,
+        0 6px 16px 0 @box-shadow-2,
+        0 9px 28px 8px @box-shadow-3;
+    }
+  }
 }
 
diff --git a/ui/src/style/vars.less b/ui/src/style/vars.less
index 8ce8498bf503..0456685c1e37 100644
--- a/ui/src/style/vars.less
+++ b/ui/src/style/vars.less
@@ -90,6 +90,10 @@ a {
   box-shadow: 1px 1px 0px 0px #e8e8e8;
 }
 
+.sider.dark .logo {
+  background-color: @project-nav-background-color;
+}
+
 .sider.light {
   background: @navigation-background-color;
 
@@ -149,10 +153,6 @@ a {
 .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,
@@ -313,4 +313,25 @@ a {
 .ant-dropdown-menu-item > a:hover,
 .ant-dropdown-menu-submenu-title > a:hover {
   color: @primary-color;
-}
\ No newline at end of file
+}
+
+.drawer {
+  .img-checkbox {
+    .check-icon.light {
+      color: #000;
+    }
+    .check-icon.dark {
+      color: #ffffff;
+    }
+  }
+
+  .color-checkbox {
+    .check-icon {
+      color: #ffffff;
+    }
+  }
+
+  .input-group .color-picker {
+    border-color: @primary-color;
+  }
+}

From a1c7b8ef459752a15fda979c9a1692b4f126e287 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Thu, 17 Jun 2021 13:22:54 +0700
Subject: [PATCH 09/17] add an alert for save the setting

---
 ui/public/locales/en.json          | 3 ++-
 ui/src/components/view/Setting.vue | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 4f55d1d0d834..148d3e11fe8f 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -2104,6 +2104,7 @@
 "label.templatetype": "Template Type",
 "label.tftp.dir": "TFTP Directory",
 "label.tftpdir": "Tftp root directory",
+"label.theme.alert": "The settings panel is only visible in the development environment, please save for the changes to take effect.",
 "label.theme.color": "Theme Color",
 "label.theme.cyan": "Cyan",
 "label.theme.dark": "Dark Style",
@@ -2712,7 +2713,7 @@
 "message.delete.vpn.customer.gateway": "Please confirm that you want to delete this VPN Customer Gateway",
 "message.delete.vpn.gateway": "Please confirm that you want to delete this VPN Gateway",
 "message.deleting.vm": "Deleting VM",
-"message.deployasis": "Selected template is Deploy As-Is i.e., the VM is deployed by importing an OVA with vApps directly into vCenter. Root disk(s) resize is allowed only on stopped VMs for such templates.", 
+"message.deployasis": "Selected template is Deploy As-Is i.e., the VM is deployed by importing an OVA with vApps directly into vCenter. Root disk(s) resize is allowed only on stopped VMs for such templates.",
 "message.desc.add.new.lb.sticky.rule": "Add new LB sticky rule",
 "message.desc.advanced.zone": "For more sophisticated network topologies. This network model provides the most flexibility in defining guest networks and providing custom network offerings such as firewall, VPN, or load balancer support.",
 "message.desc.basic.zone": "Provide a single network where each VM instance is assigned an IP directly from the network. Guest isolation can be provided through layer-3 means such as security groups (IP address source filtering).",
diff --git a/ui/src/components/view/Setting.vue b/ui/src/components/view/Setting.vue
index 45d35e0035d3..62151e670ab8 100644
--- a/ui/src/components/view/Setting.vue
+++ b/ui/src/components/view/Setting.vue
@@ -110,6 +110,7 @@
 
     <div class="setting-action">
       <a-divider style="margin: 15px 0;" />
+      <a-alert class="setting-action-alert" :message="$t('label.theme.alert')" type="warning" show-icon />
       <a-button
         class="setting-action-btn"
         icon="copy"
@@ -376,7 +377,7 @@ export default {
 
   &-alert {
     margin: 20px 0 8px;
-    word-break: break-all
+    word-break: break-word;
   }
 
   &-btn {

From 3da6b80ed4235f9316b929f648c7adefa107cfd0 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Thu, 17 Jun 2021 13:29:54 +0700
Subject: [PATCH 10/17] add `cursor: pointer`

---
 ui/src/components/view/Setting.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ui/src/components/view/Setting.vue b/ui/src/components/view/Setting.vue
index 62151e670ab8..81ded4a9217d 100644
--- a/ui/src/components/view/Setting.vue
+++ b/ui/src/components/view/Setting.vue
@@ -359,6 +359,7 @@ export default {
     top: 0;
     right: 0;
     border: 1px solid;
+    cursor: pointer;
 
     .ant-input {
       opacity: 0;
@@ -367,6 +368,7 @@ export default {
       position: absolute;
       top: 0;
       left: 0;
+      cursor: pointer;
     }
   }
 }

From 76e6a163398672cbe50bfd3aead4f8a48f6a529a Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Thu, 17 Jun 2021 15:07:34 +0700
Subject: [PATCH 11/17] hide drawer when init

---
 ui/src/components/page/GlobalLayout.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/components/page/GlobalLayout.vue b/ui/src/components/page/GlobalLayout.vue
index f5f782faeb6e..ebfd4c4f1a46 100644
--- a/ui/src/components/page/GlobalLayout.vue
+++ b/ui/src/components/page/GlobalLayout.vue
@@ -122,7 +122,7 @@ export default {
     return {
       collapsed: false,
       menus: [],
-      showSetting: true
+      showSetting: false
     }
   },
   computed: {

From 9a28534c0c0cbc573ba013c743d1effb268b98e0 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Thu, 8 Jul 2021 08:28:32 +0700
Subject: [PATCH 12/17] change id name of svg icon

---
 ui/src/assets/icons/dark.svg  | 2 +-
 ui/src/assets/icons/light.svg | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/assets/icons/dark.svg b/ui/src/assets/icons/dark.svg
index 731e3f24c82e..9190c1d3bf80 100644
--- a/ui/src/assets/icons/dark.svg
+++ b/ui/src/assets/icons/dark.svg
@@ -19,7 +19,7 @@
             <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="配置面板" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="darkModeIcon" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
             <g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
                 <g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
diff --git a/ui/src/assets/icons/light.svg b/ui/src/assets/icons/light.svg
index 80222c21483f..fbb1000c1d69 100644
--- a/ui/src/assets/icons/light.svg
+++ b/ui/src/assets/icons/light.svg
@@ -20,7 +20,7 @@
             <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="配置面板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="lightModeIcon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="setting-copy-2" transform="translate(-1254.000000, -136.000000)">
             <g id="Group-8" transform="translate(1167.000000, 0.000000)">
                 <g id="Group-5" filter="url(#filter-1)" transform="translate(89.000000, 137.000000)">

From b4a79e7ed0771c0606574c855f5733b7e9dcde0e Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Sat, 17 Jul 2021 16:51:28 +0700
Subject: [PATCH 13/17] fix after merged 4.15

---
 ui/src/views/iam/CreateRole.vue | 8 ++++----
 ui/src/views/iam/ImportRole.vue | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/ui/src/views/iam/CreateRole.vue b/ui/src/views/iam/CreateRole.vue
index 9003b424b786..b7dfe1f8551c 100644
--- a/ui/src/views/iam/CreateRole.vue
+++ b/ui/src/views/iam/CreateRole.vue
@@ -26,7 +26,7 @@
           <span slot="label">
             {{ $t('label.name') }}
             <a-tooltip :title="apiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -41,7 +41,7 @@
           <span slot="label">
             {{ $t('label.description') }}
             <a-tooltip :title="apiParams.description.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -75,7 +75,7 @@
           <span slot="label">
             {{ $t('label.type') }}
             <a-tooltip :title="apiParams.type.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -93,7 +93,7 @@
           <span slot="label">
             {{ $t('label.role') }}
             <a-tooltip :title="apiParams.roleid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
diff --git a/ui/src/views/iam/ImportRole.vue b/ui/src/views/iam/ImportRole.vue
index b7594931a464..24388c3b65c1 100644
--- a/ui/src/views/iam/ImportRole.vue
+++ b/ui/src/views/iam/ImportRole.vue
@@ -55,7 +55,7 @@
           <span slot="label">
             {{ $t('label.name') }}
             <a-tooltip :title="apiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -70,7 +70,7 @@
           <span slot="label">
             {{ $t('label.description') }}
             <a-tooltip :title="apiParams.description.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-input
@@ -82,7 +82,7 @@
           <span slot="label">
             {{ $t('label.type') }}
             <a-tooltip :title="apiParams.type.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-select
@@ -100,7 +100,7 @@
           <span slot="label">
             {{ $t('label.forced') }}
             <a-tooltip :title="apiParams.forced.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              <a-icon type="info-circle" />
             </a-tooltip>
           </span>
           <a-switch

From 00fa8b5ebefe35d60d4d8e1fa410059034cd8d01 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Wed, 28 Jul 2021 10:26:51 +0700
Subject: [PATCH 14/17] edit active color menu item

---
 ui/src/style/dark-mode.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/style/dark-mode.less b/ui/src/style/dark-mode.less
index 67c4907b5e7d..51a1036e348f 100644
--- a/ui/src/style/dark-mode.less
+++ b/ui/src/style/dark-mode.less
@@ -107,7 +107,7 @@
 
     &-inline:not(.ant-menu-dark, .ant-menu-sub) {
       .ant-menu-item,
-      .ant-menu-item > a:not(:hover),
+      .ant-menu-item:not(.ant-menu-item-selected) > a:not(:hover),
       .ant-menu-submenu-title:not(:hover) {
         color: @dark-text-color-3;
       }

From 5a7b5832c3aff94c148fa381314866e3ff926fa7 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 3 Aug 2021 14:01:11 +0700
Subject: [PATCH 15/17] fix plaholder color, project chart color & reset
 setting

---
 ui/public/locales/en.json                     |  1 +
 ui/src/components/view/Setting.vue            | 35 ++++++++++++++-----
 ui/src/style/dark-mode.less                   | 11 +++++-
 .../views/dashboard/UsageDashboardChart.vue   |  2 +-
 4 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 6a13d008ee18..2b991fd15fbe 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -1790,6 +1790,7 @@
 "label.reservedsystemnetmask": "Reserved system netmask",
 "label.reservedsystemstartip": "Start Reserved system IP",
 "label.reset": "Reset",
+"label.reset.to.default": "Reset to default",
 "label.reset.ssh.key.pair": "Reset SSH Key Pair",
 "label.reset.ssh.key.pair.on.vm": "Reset SSH Key Pair on VM",
 "label.reset.vpn.connection": "Reset VPN connection",
diff --git a/ui/src/components/view/Setting.vue b/ui/src/components/view/Setting.vue
index 81ded4a9217d..e95a1a8588de 100644
--- a/ui/src/components/view/Setting.vue
+++ b/ui/src/components/view/Setting.vue
@@ -21,7 +21,7 @@
       <a-radio-group
         class="setting-group"
         name="themeGroup"
-        :default-value="layoutMode"
+        v-model="layoutMode"
         @change="switchLayoutMode">
         <setting-item
           view-type="radio-group"
@@ -115,6 +115,10 @@
         class="setting-action-btn"
         icon="copy"
         @click="saveSetting">{{ $t('label.save.setting') }}</a-button>
+      <a-button
+        class="setting-action-btn"
+        icon="undo"
+        @click="resetSetting">{{ $t('label.reset.to.default') }}</a-button>
     </div>
   </div>
 </template>
@@ -141,7 +145,8 @@ export default {
       navTextColorPick: this.$store.getters.themeSetting['@navigation-text-color'] || this.$config.theme['@navigation-text-color'],
       projectNavBgColorPick: this.$store.getters.themeSetting['@project-nav-background-color'] || this.$config.theme['@project-nav-background-color'],
       projectNavTextColorPick: this.$store.getters.themeSetting['@project-nav-text-color'] || this.$config.theme['@project-nav-text-color'],
-      uiSettings: {}
+      uiSettings: {},
+      originalSetting: {}
     }
   },
   computed: {
@@ -219,19 +224,15 @@ export default {
   },
   methods: {
     fetchData () {
+      this.originalSetting = Object.assign({}, this.$config.theme)
       this.layoutMode = 'light'
       if (this.$store.getters.darkMode) {
         this.layoutMode = 'dark'
       }
       this.uiSettings = this.$config.theme
     },
-    switchLayoutMode (e) {
-      this.layoutMode = e.target.value
-      if (this.layoutMode === 'dark') {
-        this.$store.dispatch('SetDarkMode', true)
-      } else if (this.layoutMode === 'light') {
-        this.$store.dispatch('SetDarkMode', false)
-      }
+    switchLayoutMode () {
+      this.$store.dispatch('SetDarkMode', (this.layoutMode === 'dark'))
     },
     switchColor (e) {
       this.colorPick = e.target.value
@@ -255,6 +256,21 @@ export default {
         this.$message.success(this.$t('label.success'))
       }, 1000)
     },
+    resetSetting () {
+      this.layoutMode = 'light'
+      this.colorPick = this.originalSetting['@primary-color']
+      this.navBgColorPick = this.originalSetting['@navigation-background-color']
+      this.navTextColorPick = this.originalSetting['@navigation-text-color']
+      this.projectNavBgColorPick = this.originalSetting['@project-nav-background-color']
+      this.projectNavTextColorPick = this.originalSetting['@project-nav-text-color']
+
+      this.$store.dispatch('SetThemeSetting', {})
+      this.switchLayoutMode()
+
+      this.$config.theme = this.originalSetting
+      window.less.modifyVars(this.$config.theme)
+      this.$message.success(this.$t('label.success'))
+    },
     formatConfig (obj, dep) {
       dep = dep || 1
       const LN = '\n'
@@ -384,6 +400,7 @@ export default {
 
   &-btn {
     width: 100%;
+    margin-bottom: 5px;
   }
 }
 </style>
diff --git a/ui/src/style/dark-mode.less b/ui/src/style/dark-mode.less
index 51a1036e348f..b8fe2c7e2bb1 100644
--- a/ui/src/style/dark-mode.less
+++ b/ui/src/style/dark-mode.less
@@ -885,5 +885,14 @@
         0 9px 28px 8px @box-shadow-3;
     }
   }
-}
 
+  ::placeholder {
+    color: @dark-text-color-1;
+  }
+
+  .ant-card.usage-dashboard-chart-card.usage-chart-text {
+    h1, h2, h3, h4, h5, h6 {
+      color: initial;
+    }
+  }
+}
\ No newline at end of file
diff --git a/ui/src/views/dashboard/UsageDashboardChart.vue b/ui/src/views/dashboard/UsageDashboardChart.vue
index 1430d2d37017..be46d1b2f61e 100644
--- a/ui/src/views/dashboard/UsageDashboardChart.vue
+++ b/ui/src/views/dashboard/UsageDashboardChart.vue
@@ -24,7 +24,7 @@
       v-for="stat in stats"
       :key="stat.type">
       <a-card
-        class="usage-dashboard-chart-card"
+        :class="['usage-dashboard-chart-card', stat.bgcolor ? 'usage-chart-text' : '']"
         :bordered="false"
         :loading="loading"
         :style="stat.bgcolor ? { 'background-color': stat.bgcolor } : {}">

From 5403877b2945c33ae1eb364c5994370db9077833 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 10 Aug 2021 09:03:50 +0700
Subject: [PATCH 16/17] fix event change color picker & error input focus color

---
 ui/src/components/view/Setting.vue | 8 ++++----
 ui/src/style/dark-mode.less        | 4 +++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/view/Setting.vue b/ui/src/components/view/Setting.vue
index e95a1a8588de..6ad97097d371 100644
--- a/ui/src/components/view/Setting.vue
+++ b/ui/src/components/view/Setting.vue
@@ -59,7 +59,7 @@
                 :disabled="layoutMode === 'dark'"
                 type="color"
                 v-model="navBgColorPick"
-                @change="(e) => updateSetting('@navigation-background-color', e.target.value)" />
+                @blur="(e) => updateSetting('@navigation-background-color', e.target.value)" />
             </div>
           </div>
         </a-list-item>
@@ -71,7 +71,7 @@
                 :disabled="layoutMode === 'dark'"
                 type="color"
                 v-model="navBgColorPick"
-                @change="(e) => updateSetting('@navigation-text-color', e.target.value)" />
+                @blur="(e) => updateSetting('@navigation-text-color', e.target.value)" />
             </div>
           </div>
         </a-list-item>
@@ -90,7 +90,7 @@
               <a-input
                 type="color"
                 v-model="projectNavBgColorPick"
-                @change="(e) => updateSetting('@project-nav-background-color', e.target.value)" />
+                @blur="(e) => updateSetting('@project-nav-background-color', e.target.value)" />
             </div>
           </div>
         </a-list-item>
@@ -101,7 +101,7 @@
               <a-input
                 type="color"
                 v-model="projectNavTextColorPick"
-                @change="(e) => updateSetting('@project-nav-text-color', e.target.value)" />
+                @blur="(e) => updateSetting('@project-nav-text-color', e.target.value)" />
             </div>
           </div>
         </a-list-item>
diff --git a/ui/src/style/dark-mode.less b/ui/src/style/dark-mode.less
index b8fe2c7e2bb1..d2670296ab95 100644
--- a/ui/src/style/dark-mode.less
+++ b/ui/src/style/dark-mode.less
@@ -208,7 +208,9 @@
   }
 
   .has-error .ant-input-affix-wrapper .ant-input,
-  .has-error .ant-input-affix-wrapper .ant-input:hover {
+  .has-error .ant-input-affix-wrapper .ant-input:hover,
+  .has-error .ant-input,
+  .has-error .ant-input:hover {
     background-color: transparent;
     background-image: none;
   }

From 9b88a4c04891b355d9975d418eb3ac3d1fa8a8b7 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Wed, 11 Aug 2021 11:53:13 +0700
Subject: [PATCH 17/17] fix empty data color

---
 ui/src/style/dark-mode.less | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ui/src/style/dark-mode.less b/ui/src/style/dark-mode.less
index d2670296ab95..10534f7a27a0 100644
--- a/ui/src/style/dark-mode.less
+++ b/ui/src/style/dark-mode.less
@@ -897,4 +897,8 @@
       color: initial;
     }
   }
+
+  .ant-empty-normal {
+    color: @dark-text-color-3;
+  }
 }
\ No newline at end of file