diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index fab328db16a..bc295cc84db 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -617,6 +617,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",
@@ -669,6 +670,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",
@@ -1831,6 +1833,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",
@@ -1902,6 +1905,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",
@@ -2151,9 +2155,28 @@
"label.template.select.existing": "Select an existing template",
"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 @@
+
+
\ 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 @@
+
+
\ 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 @@
+
+
+
+
+
+
+
+
+
+
+
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 302fd63af78..2588c11fb2e 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')" />
-
+
-
+
-
+ {{ $t('label.new.tag') }}
diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index 31b2024683f..795a6e4e104 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/src/components/view/ListView.vue
@@ -604,14 +604,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;
-}
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.
+
+
+
+
+
{{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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.
+
+
+