From fb0dedc896a602d210a0ae88216b2a7b7675c426 Mon Sep 17 00:00:00 2001
From: Abhishek Kumar <abhishek.mrt22@gmail.com>
Date: Wed, 11 Aug 2021 19:53:08 +0530
Subject: [PATCH 1/2] ui: fix display host hypervisorversion (#5301)

---
 ui/src/views/infra/HostInfo.vue | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/ui/src/views/infra/HostInfo.vue b/ui/src/views/infra/HostInfo.vue
index e867956ca60..4ab73b51a20 100644
--- a/ui/src/views/infra/HostInfo.vue
+++ b/ui/src/views/infra/HostInfo.vue
@@ -18,7 +18,7 @@
 <template>
   <a-spin :spinning="fetchLoading">
     <a-list size="small">
-      <a-list-item>
+      <a-list-item v-if="host.hypervisorversion || (host.details && host.details['Host.OS'])">
         <div>
           <strong>{{ $t('label.hypervisorversion') }}</strong>
           <div>
@@ -26,12 +26,9 @@
             <span v-if="host.hypervisorversion">
               {{ host.hypervisorversion }}
             </span>
-            <span v-else-if="host.details">
+            <span v-else-if="host.details && host.details['Host.OS']">
               {{ host.details['Host.OS'] + ' ' + host.details['Host.OS.Version'] }}
             </span>
-            <span v-else>
-              {{ host.version }}
-            </span>
           </div>
         </div>
       </a-list-item>
@@ -130,15 +127,16 @@ export default {
   },
   watch: {
     resource (newItem, oldItem) {
-      if (this.resource && this.resource.id && newItem && newItem.id !== oldItem.id) {
-        this.fetchData()
+      if (this.resource) {
+        this.host = this.resource
+        if (this.resource.id && newItem && newItem.id !== oldItem.id) {
+          this.fetchData()
+        }
       }
     }
   },
   methods: {
     fetchData () {
-      this.dataSource = []
-      this.itemCount = 0
       this.fetchLoading = true
       api('listHosts', { id: this.resource.id }).then(json => {
         this.host = json.listhostsresponse.host[0]

From 8680f7d9ad843689c9fb04305d6633f4fee37f5c Mon Sep 17 00:00:00 2001
From: Hoang Nguyen <hoangnm@unitech.vn>
Date: Wed, 11 Aug 2021 21:32:46 +0700
Subject: [PATCH 2/2] UI: Dark mode toggle button on Management Server (#5052)

* add button toggle dark mode

* switch components corresponding to dark mode

* restructure the style dark mode file

* fix collapse & login page

* fix test failed

* fix dark mode styles by refer antd pro

* fix disabled colors of button, input,... & refactor file dark mode styles

* add setting drawer and save it into local storage

* add an alert for save the setting

* add `cursor: pointer`

* hide drawer when init

* change id name of svg icon

* fix after merged 4.15

* edit active color menu item

* fix plaholder color, project chart color & reset setting

* fix event change color picker & error input focus color

* fix empty data color
---
 ui/public/locales/en.json                     |  23 +
 ui/src/App.vue                                |   7 +-
 ui/src/assets/icons/dark.svg                  |  39 +
 ui/src/assets/icons/light.svg                 |  40 +
 ui/src/components/page/GlobalFooter.vue       |  10 -
 ui/src/components/page/GlobalLayout.vue       |  41 +-
 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         |   6 +-
 ui/src/components/view/Setting.vue            | 406 ++++++++
 ui/src/components/view/SettingItem.vue        | 185 ++++
 ui/src/components/view/TreeView.vue           |   2 -
 ui/src/components/widgets/Drawer.vue          | 170 ++++
 ui/src/components/widgets/OsLogo.vue          |  15 +-
 ui/src/layouts/UserLayout.vue                 |  17 +-
 ui/src/store/getters.js                       |   4 +-
 ui/src/store/modules/user.js                  |  30 +-
 ui/src/store/mutation-types.js                |   2 +
 ui/src/style/dark-mode.less                   | 904 ++++++++++++++++++
 ui/src/style/index.less                       |   1 +
 ui/src/style/vars.less                        |  99 +-
 ui/src/views/AutogenView.vue                  |   2 +-
 ui/src/views/auth/Login.vue                   |   6 +-
 .../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 +-
 .../views/dashboard/UsageDashboardChart.vue   |   2 +-
 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 +-
 67 files changed, 2292 insertions(+), 346 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
 create mode 100644 ui/src/style/dark-mode.less

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 146351f834c..2b991fd15fb 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",
@@ -646,6 +647,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",
@@ -1788,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",
@@ -1856,6 +1859,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 +2106,28 @@
 "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",
+"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 fa75a8e635c..f7aa55892e5 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 00000000000..9190c1d3bf8
--- /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="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)">
+                    <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 00000000000..fbb1000c1d6
--- /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="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)">
+                    <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/page/GlobalFooter.vue b/ui/src/components/page/GlobalFooter.vue
index c19f8258f9c..070a32b0d12 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/page/GlobalLayout.vue b/ui/src/components/page/GlobalLayout.vue
index 0ddf934b868..ebfd4c4f1a4 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: false
     }
   },
   computed: {
@@ -129,6 +145,18 @@ export default {
     },
     mainMenu (newMenu) {
       this.menus = newMenu.find((item) => item.path === '/').children
+    },
+    '$store.getters.darkMode' (darkMode) {
+      if (darkMode) {
+        document.body.classList.add('dark-mode')
+      } else {
+        document.body.classList.remove('dark-mode')
+      }
+    }
+  },
+  provide: function () {
+    return {
+      parentToggleSetting: this.toggleSetting
     }
   },
   created () {
@@ -136,6 +164,9 @@ export default {
     this.collapsed = !this.sidebarOpened
   },
   mounted () {
+    if (this.$store.getters.darkMode) {
+      document.body.classList.add('dark-mode')
+    }
     const userAgent = navigator.userAgent
     if (userAgent.indexOf('Edge') > -1) {
       this.$nextTick(() => {
@@ -146,6 +177,9 @@ export default {
       })
     }
   },
+  beforeDestroy () {
+    document.body.classList.remove('dark')
+  },
   methods: {
     ...mapActions(['setSidebar']),
     toggle () {
@@ -166,6 +200,9 @@ export default {
       if (!this.isDesktop()) {
         this.collapsed = false
       }
+    },
+    toggleSetting (showSetting) {
+      this.showSetting = showSetting
     }
   }
 }
diff --git a/ui/src/components/view/DetailSettings.vue b/ui/src/components/view/DetailSettings.vue
index 2571bed9e65..b4aaf68772f 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 e25eb393983..5fd0fab1a37 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 708b037cba4..89dd6dcb505 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/src/components/view/ListView.vue
@@ -598,14 +598,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 cbc93446bd7..21afc32c49f 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 :tooltip="$t('label.clear')" icon="close" size="small" @click="inputKey = inputValue = ''" />
                     </a-input-group>
diff --git a/ui/src/components/view/Setting.vue b/ui/src/components/view/Setting.vue
new file mode 100644
index 00000000000..6ad97097d37
--- /dev/null
+++ b/ui/src/components/view/Setting.vue
@@ -0,0 +1,406 @@
+// 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"
+        v-model="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"
+                @blur="(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"
+                @blur="(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"
+                @blur="(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"
+                @blur="(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-alert class="setting-action-alert" :message="$t('label.theme.alert')" type="warning" show-icon />
+      <a-button
+        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>
+
+<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: {},
+      originalSetting: {}
+    }
+  },
+  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.originalSetting = Object.assign({}, this.$config.theme)
+      this.layoutMode = 'light'
+      if (this.$store.getters.darkMode) {
+        this.layoutMode = 'dark'
+      }
+      this.uiSettings = this.$config.theme
+    },
+    switchLayoutMode () {
+      this.$store.dispatch('SetDarkMode', (this.layoutMode === 'dark'))
+    },
+    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)
+    },
+    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'
+      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;
+    cursor: pointer;
+
+    .ant-input {
+      opacity: 0;
+      height: 20px;
+      width: 20px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      cursor: pointer;
+    }
+  }
+}
+
+.setting-action {
+  width: 100%;
+  padding: 0 24px;
+
+  &-alert {
+    margin: 20px 0 8px;
+    word-break: break-word;
+  }
+
+  &-btn {
+    width: 100%;
+    margin-bottom: 5px;
+  }
+}
+</style>
diff --git a/ui/src/components/view/SettingItem.vue b/ui/src/components/view/SettingItem.vue
new file mode 100644
index 00000000000..fa458d62d4e
--- /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/view/TreeView.vue b/ui/src/components/view/TreeView.vue
index 832f5b3e354..feb0ad6392b 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/Drawer.vue b/ui/src/components/widgets/Drawer.vue
new file mode 100644
index 00000000000..8cfd59da8ce
--- /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/components/widgets/OsLogo.vue b/ui/src/components/widgets/OsLogo.vue
index edbb3a4b343..a1de108c7a7 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/layouts/UserLayout.vue b/ui/src/layouts/UserLayout.vue
index f5bb5a482c9..e25bab4c8cb 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',
@@ -45,11 +47,25 @@ export default {
   data () {
     return {}
   },
+  watch: {
+    '$store.getters.darkMode' (darkMode) {
+      if (darkMode) {
+        document.body.classList.add('dark-mode')
+      } else {
+        document.body.classList.remove('dark-mode')
+      }
+    }
+  },
   mounted () {
     document.body.classList.add('userLayout')
+    const darkMode = Vue.ls.get(DARK_MODE, false)
+    if (this.$store.getters.darkMode || darkMode) {
+      document.body.classList.add('dark-mode')
+    }
   },
   beforeDestroy () {
     document.body.classList.remove('userLayout')
+    document.body.classList.remove('dark-mode')
   }
 }
 </script>
@@ -57,7 +73,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 f694362f095..eda3d9a6b13 100644
--- a/ui/src/store/getters.js
+++ b/ui/src/store/getters.js
@@ -37,7 +37,9 @@ const getters = {
   timezoneoffset: state => state.user.timezoneoffset,
   usebrowsertimezone: state => state.user.usebrowsertimezone,
   server: state => state.app.server,
-  domainStore: state => state.user.domainStore
+  domainStore: state => state.user.domainStore,
+  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 d2a5fd642de..ce2844899a7 100644
--- a/ui/src/store/modules/user.js
+++ b/ui/src/store/modules/user.js
@@ -33,7 +33,9 @@ import {
   TIMEZONE_OFFSET,
   USE_BROWSER_TIMEZONE,
   HEADER_NOTICES,
-  DOMAIN_STORE
+  DOMAIN_STORE,
+  DARK_MODE,
+  THEME_SETTING
 } from '@/store/mutation-types'
 
 const user = {
@@ -52,7 +54,9 @@ const user = {
     zones: {},
     timezoneoffset: 0.0,
     usebrowsertimezone: false,
-    domainStore: {}
+    domainStore: {},
+    darkMode: false,
+    themeSetting: {}
   },
 
   mutations: {
@@ -107,6 +111,14 @@ 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)
+    },
+    SET_THEME_SETTING (state, setting) {
+      state.themeSetting = setting
+      Vue.ls.set(THEME_SETTING, setting)
     }
   },
 
@@ -132,6 +144,10 @@ 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)
+          const themeSetting = Vue.ls.get(THEME_SETTING, {})
+          commit('SET_THEME_SETTING', themeSetting)
 
           commit('SET_APIS', {})
           commit('SET_NAME', '')
@@ -160,9 +176,13 @@ 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, 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)
@@ -347,6 +367,12 @@ const user = {
     },
     SetDomainStore ({ commit }, domainStore) {
       commit('SET_DOMAIN_STORE', domainStore)
+    },
+    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 7adc857b845..8a2637a3aee 100644
--- a/ui/src/store/mutation-types.js
+++ b/ui/src/store/mutation-types.js
@@ -34,6 +34,8 @@ export const TIMEZONE_OFFSET = 'TIMEZONE_OFFSET'
 export const USE_BROWSER_TIMEZONE = 'USE_BROWSER_TIMEZONE'
 export const SERVER_MANAGER = 'SERVER_MANAGER'
 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
new file mode 100644
index 00000000000..10534f7a27a
--- /dev/null
+++ b/ui/src/style/dark-mode.less
@@ -0,0 +1,904 @@
+// 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.
+
+@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);
+@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);
+@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-mode {
+  background: @dark-bgColor;
+
+  h1, h2, h3, h4, h5, h6 {
+    color: @dark-text-color-3;
+  }
+
+  .user-layout, .ant-layout {
+    background: @dark-bgColor;
+  }
+
+  .layout.ant-layout .header {
+    background: @dark-secondary-bgColor;
+    box-shadow: 0 1px 4px #090c10;
+  }
+
+  .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;
+    }
+  }
+
+  .ant-menu-submenu-popup.ant-menu-light,
+  .ant-menu-light > .ant-menu {
+    background: @dark-secondary-bgColor;
+  }
+
+  .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:not(.ant-menu-item-selected) > 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
+  {
+    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;
+    color: @dark-text-color-3;
+
+    &-head, &-bottom, &-body {
+      color: @dark-text-color-3;
+      border-color: @dark-border-color;
+    }
+
+    .ant-progress-circle {
+      .ant-progress-text {
+        color: @dark-text-color-3;
+      }
+    }
+
+    &-bordered {
+      border-color: @dark-border-color;
+    }
+  }
+
+  .chart-card-footer {
+    border-color: @dark-border-color;
+  }
+
+  .vm-info-card .resource-detail-item__details a,
+  .vm-info-card .resource-detail-item a {
+    color: @dark-text-color-3;
+  }
+
+  .ant-breadcrumb {
+    a:not(:hover), &-separator {
+      color: @dark-text-color-3;
+    }
+
+    span:last-child, span:last-child a {
+      color: @dark-text-color-4;
+    }
+  }
+
+  .ant-btn {
+    &: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],
+    &-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: @disabled-bgColor;
+    }
+  }
+
+  .has-error .ant-input-affix-wrapper .ant-input,
+  .has-error .ant-input-affix-wrapper .ant-input:hover,
+  .has-error .ant-input,
+  .has-error .ant-input:hover {
+    background-color: transparent;
+    background-image: none;
+  }
+
+  .ant-badge-status-text {
+    color: @dark-text-color-3;
+  }
+
+  .ant-table {
+    color: @dark-text-color-3;
+
+    &-thead {
+      background-color: @table-header-bgColor;
+
+      tr th {
+        color: @dark-text-color-4;
+        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-bgColor;
+        }
+      }
+
+      & > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover {
+        background-color: @table-header-hover-bgColor;
+      }
+
+      & > 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;
+      }
+    }
+
+    &-tbody {
+      & > tr > td {
+        border-color: @dark-border-color;
+      }
+
+      & > 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: @table-body-hover-bgColor;
+      }
+
+      & > tr > th.ant-table-column-sort {
+        background-color: @dark-bgColor;
+      }
+    }
+
+    &-footer {
+      background-color: @dark-secondary-bgColor;
+      color: @dark-text-color-3;
+      border-color: @dark-border-color;
+
+      &::before {
+        background-color: @dark-border-color;
+      }
+    }
+
+    &-header {
+      background-color: @dark-secondary-bgColor;
+    }
+
+    &-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-bgColor;
+    }
+
+    &-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;
+    }
+
+    &-filter-dropdown {
+      background-color: @dark-secondary-bgColor;
+
+      &-btns {
+        border-color: @dark-border-color;
+      }
+    }
+  }
+
+  .light-row, .dark-row {
+    background-color: @dark-secondary-bgColor;
+  }
+
+  .ant-pagination {
+    color: @dark-text-color-3;
+
+    &-prev, &-next, &-jump-prev, &-jump-next, &-prev a, &-next a {
+      color: @dark-text-color-3;
+    }
+
+    &-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;
+    }
+
+    &-item {
+      a:not(:hover) {
+        color: @dark-text-color-3;
+      }
+
+      &-active {
+        background-color: transparent;
+      }
+    }
+
+    &-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;
+    }
+
+    &-inner-content {
+      color: @dark-text-color-3;
+      background-color: @dark-secondary-bgColor;
+      border: 1px solid @dark-border-color;
+      box-shadow:
+        0 3px 6px -4px @box-shadow-1,
+        0 6px 16px 0 @box-shadow-2,
+        0 9px 28px 8px @box-shadow-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;
+      }
+
+      &-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 {
+    color: @dark-text-color-3;
+    border-color: @dark-border-color;
+
+    &-meta-title, &-meta-description {
+      color: @dark-text-color-3;
+    }
+  }
+
+  .ant-tag {
+    background-color: transparent;
+    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 {
+    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;
+
+    &-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;
+    }
+
+    &-header {
+      background-color: @dark-secondary-bgColor;
+      border-color: @dark-border-color;
+    }
+
+    &-footer {
+      border-color: @dark-border-color;
+    }
+
+    &-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 {
+    background-color: transparent;
+    color: @dark-text-color-3;
+
+    &:not(:hover, :focus) {
+      border-color: @dark-border-color;
+    }
+
+    &:disabled, &-disabled {
+      background-color: @disabled-bgColor;
+    }
+  }
+
+  .ant-select-disabled {
+    background-color: @disabled-bgColor;
+  }
+
+  .ant-checkbox-wrapper,
+  .ant-select-arrow {
+    color: @dark-text-color-3;
+  }
+
+  .ant-switch {
+    color: @light-text-color;
+    background-color: @dark-text-color-2;
+
+    &-checked {
+      background-color: #1890ff;
+    }
+
+    &-loading-icon, &:after {
+      background-color: @dark-secondary-bgColor;
+    }
+
+    &:disabled {
+      background-color: @disabled-bgColor;
+    }
+  }
+
+  .ant-select-dropdown {
+    background-color: @dropdown-bgColor;
+    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-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-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;
+      }
+    }
+  }
+
+  .ant-time {
+    &-picker-panel {
+      color: @dark-text-color-3;
+
+      &-inner {
+        background-color: @dropdown-bgColor;
+        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-hover-bgColor;
+        }
+      }
+    }
+  }
+
+  .ant-dropdown-menu {
+    background-color: @dropdown-bgColor;
+    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-hover-bgColor;
+    }
+
+    &-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;
+    }
+  }
+
+  .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;
+  }
+
+  .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-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;
+  }
+
+  .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 {
+    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-bgColor;
+    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: @dropdown-bgColor;
+    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;
+  }
+
+  .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 @box-shadow-1,
+        0 6px 16px 0 @box-shadow-2,
+        0 9px 28px 8px @box-shadow-3;
+
+      &-message {
+        color: @dark-text-color-4;
+      }
+
+      &-close {
+        color: @dark-text-color-3;
+
+        &:hover {
+          color: @dark-text-color-4;
+        }
+      }
+    }
+  }
+
+  .ant-collapse {
+    background-color: @dark-secondary-bgColor;
+
+    &--borderless {
+      background-color: @dark-secondary-bgColor;
+    }
+
+    & > .ant-collapse-item {
+      background-color: @dark-bgColor;
+
+      & > .ant-collapse-header {
+        color: @dark-text-color-3;
+      }
+
+      &-disabled > .ant-collapse-header,
+      &-disabled > .ant-collapse-header > .arrow {
+        color: @dark-text-color-1;
+      }
+    }
+  }
+
+  .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;
+    }
+  }
+
+  ::placeholder {
+    color: @dark-text-color-1;
+  }
+
+  .ant-card.usage-dashboard-chart-card.usage-chart-text {
+    h1, h2, h3, h4, h5, h6 {
+      color: initial;
+    }
+  }
+
+  .ant-empty-normal {
+    color: @dark-text-color-3;
+  }
+}
\ No newline at end of file
diff --git a/ui/src/style/index.less b/ui/src/style/index.less
index 0cb6be41c7f..38b4c6b7d5f 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 7ee21618a5c..0456685c1e3 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,
@@ -245,4 +245,93 @@ 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;
+}
+
+.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;
+  }
+}
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index a1fb569bddc..5f408c75760 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/auth/Login.vue b/ui/src/views/auth/Login.vue
index db5ff67b0e5..de2240f1d0d 100644
--- a/ui/src/views/auth/Login.vue
+++ b/ui/src/views/auth/Login.vue
@@ -63,7 +63,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>
 
@@ -78,7 +78,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>
 
@@ -92,7 +92,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>
 
diff --git a/ui/src/views/compute/CreateKubernetesCluster.vue b/ui/src/views/compute/CreateKubernetesCluster.vue
index f30357c13c8..88b58ab1d92 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 a91ff0bd9c4..55c724b91da 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 78930479dc7..b1c24ccdd40 100644
--- a/ui/src/views/compute/DeployVM.vue
+++ b/ui/src/views/compute/DeployVM.vue
@@ -166,7 +166,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
@@ -298,7 +298,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
@@ -390,7 +390,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 e66fd5fcec4..435c646e66d 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 c97e7e53e9f..8c6f205e996 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 f07424b90be..6dad3a2e7ab 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 256e0dd7385..1c23cd28c8f 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 d8a7de0832f..2467baa8fe4 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 e6b451760f5..5fb4331e3be 100644
--- a/ui/src/views/compute/wizard/NetworkConfiguration.vue
+++ b/ui/src/views/compute/wizard/NetworkConfiguration.vue
@@ -44,7 +44,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>
@@ -61,7 +61,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/dashboard/UsageDashboardChart.vue b/ui/src/views/dashboard/UsageDashboardChart.vue
index 1430d2d3701..be46d1b2f61 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 } : {}">
diff --git a/ui/src/views/iam/AddAccount.vue b/ui/src/views/iam/AddAccount.vue
index 1b61f2d5ca7..e4664507eaa 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 2190443a3ca..b7bf89e5c27 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 e9ac516073e..f9eded89abe 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
@@ -151,7 +151,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
@@ -171,7 +171,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 3570cd51580..6ed44974903 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 89e41e301bd..b7dfe1f8551 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
@@ -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="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/DomainActionForm.vue b/ui/src/views/iam/DomainActionForm.vue
index 8ffd2ee6438..3726dfa6cf6 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 3a3bbf2e5c9..567a8690305 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 931671df450..24388c3b65c 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="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
diff --git a/ui/src/views/image/AddKubernetesSupportedVersion.vue b/ui/src/views/image/AddKubernetesSupportedVersion.vue
index d3355152e81..2998bca53d4 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 c923bb4ef7e..9885d1fe78d 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 444669e1345..7b326a2b109 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 5cd3fb92569..6d95da42418 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 897ca7e34ff..25985e82765 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 72b4a60dd19..f304315da79 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 8bda05378c3..f29c766bf28 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
@@ -538,7 +538,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 45860e80b82..0479e4bead6 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
@@ -480,7 +480,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 b45c251182c..424e000c9cc 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']" />
@@ -869,7 +869,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 99c0edc37b2..a5c2c187563 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 499dfd2d3f1..fdeef4b1f54 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 ff1662e8014..3c6f4706714 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 14afb772af6..44f24edd13f 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 4770517178d..f64bd0d5ff8 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 b1e2c1d593b..c037d7f9f12 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 61c3bbee438..b1abccd170d 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 9c244d631e9..d99f57c477c 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 9b3f10e49f0..810dbf36eaa 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 1127c56651d..6851bb9d6ef 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 2dafe489d25..c1d221b86fc 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 e1cdbd84e84..938b70e6e9b 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 bbb7855ca4b..e1e1839bb2b 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 bc10f69d2c1..1628ed0ff71 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 f8d49b6b5e1..410a676a9a6 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>
@@ -251,7 +255,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 49961e86f68..06ff390655f 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