From 389536aff0156fea5ca283653c1068bce8bf2929 Mon Sep 17 00:00:00 2001 From: Dmitry Sharshakov Date: Thu, 27 Feb 2020 23:30:04 +0300 Subject: [PATCH] Add dark theme for Web UI --- webui/src/App.vue | 7 +++++ webui/src/assets/middlewares-empty-dark.svg | 7 +++++ .../src/components/_commons/ChartDoughnut.vue | 3 +++ webui/src/components/_commons/NavBar.vue | 7 ++++- .../components/_commons/PanelMiddlewares.vue | 3 ++- webui/src/components/_commons/PanelTLS.vue | 3 ++- webui/src/components/_commons/SkeletonBox.vue | 18 +++++++++++++ webui/src/components/_commons/ToolBar.vue | 4 +++ .../src/components/_commons/ToolBarTable.vue | 2 +- webui/src/components/dashboard/PanelChart.vue | 10 ++++++- .../src/components/dashboard/PanelFeature.vue | 14 +++++++++- webui/src/css/sass/app.scss | 26 +++++++++++++++++++ 12 files changed, 98 insertions(+), 6 deletions(-) create mode 100644 webui/src/assets/middlewares-empty-dark.svg diff --git a/webui/src/App.vue b/webui/src/App.vue index 9ad812eb8..11a521bd6 100644 --- a/webui/src/App.vue +++ b/webui/src/App.vue @@ -15,6 +15,13 @@ export default { // debug console.log('Quasar -> ', this.$q.version) + + this.$q.dark.set(localStorage.getItem('traefik-dark') === 'true') + }, + watch: { + '$q.dark.isActive' (val) { + localStorage.setItem('traefik-dark', val) + } } } diff --git a/webui/src/assets/middlewares-empty-dark.svg b/webui/src/assets/middlewares-empty-dark.svg new file mode 100644 index 000000000..05381932f --- /dev/null +++ b/webui/src/assets/middlewares-empty-dark.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/webui/src/components/_commons/ChartDoughnut.vue b/webui/src/components/_commons/ChartDoughnut.vue index 24b8f1f60..a8993154e 100644 --- a/webui/src/components/_commons/ChartDoughnut.vue +++ b/webui/src/components/_commons/ChartDoughnut.vue @@ -22,6 +22,9 @@ export default { // this.$data._chart.update() this.renderChart(this.chartdata, this.options) } + }, + '$q.dark.isActive' (val) { + this.renderChart(this.chartdata, this.options) } }, mounted () { diff --git a/webui/src/components/_commons/NavBar.vue b/webui/src/components/_commons/NavBar.vue index 8a474cc6d..3bf4c7b3b 100644 --- a/webui/src/components/_commons/NavBar.vue +++ b/webui/src/components/_commons/NavBar.vue @@ -13,13 +13,14 @@ + -
+
@@ -72,6 +73,10 @@ export default { min-height: 64px; } + .body--dark .sub-nav { + background-color: #0e204c; + } + .logo { display: inline-block; img { diff --git a/webui/src/components/_commons/PanelMiddlewares.vue b/webui/src/components/_commons/PanelMiddlewares.vue index a516496c2..7eb5ca148 100644 --- a/webui/src/components/_commons/PanelMiddlewares.vue +++ b/webui/src/components/_commons/PanelMiddlewares.vue @@ -1055,7 +1055,8 @@
There are no
Middlewares configured
diff --git a/webui/src/components/_commons/PanelTLS.vue b/webui/src/components/_commons/PanelTLS.vue index e79ffd52c..5bfd1c5a8 100644 --- a/webui/src/components/_commons/PanelTLS.vue +++ b/webui/src/components/_commons/PanelTLS.vue @@ -67,7 +67,8 @@
There are no
TLS configured
diff --git a/webui/src/components/_commons/SkeletonBox.vue b/webui/src/components/_commons/SkeletonBox.vue index b0d26aadb..adc06a96b 100644 --- a/webui/src/components/_commons/SkeletonBox.vue +++ b/webui/src/components/_commons/SkeletonBox.vue @@ -69,4 +69,22 @@ export default { to { transform: translateX(100%) translateZ(0); } } } + + .body--dark .SkeletonBox { + background-color: #525252; + + &.dark { + background-color: #333; + } + + &::after { + background-image: linear-gradient( + 90deg, + rgba(#5e5e5e, 0) 0, + rgba(#5e5e5e, 0.2) 20%, + rgba(#5e5e5e, 0.5) 60%, + rgba(#5e5e5e, 0) + ); + } + } diff --git a/webui/src/components/_commons/ToolBar.vue b/webui/src/components/_commons/ToolBar.vue index c69f3465f..9a1cb9f05 100644 --- a/webui/src/components/_commons/ToolBar.vue +++ b/webui/src/components/_commons/ToolBar.vue @@ -80,6 +80,10 @@ export default { padding: 0; } + .body--dark .q-toolbar { + background-color: #0e204c; + } + .q-tabs { /deep/ .q-tabs__content { .q-tab__label { diff --git a/webui/src/components/_commons/ToolBarTable.vue b/webui/src/components/_commons/ToolBarTable.vue index 48febd17a..81354bd92 100644 --- a/webui/src/components/_commons/ToolBarTable.vue +++ b/webui/src/components/_commons/ToolBarTable.vue @@ -17,7 +17,7 @@ ]" /> - + diff --git a/webui/src/components/dashboard/PanelChart.vue b/webui/src/components/dashboard/PanelChart.vue index 7f72d71d6..95a0a53b0 100644 --- a/webui/src/components/dashboard/PanelChart.vue +++ b/webui/src/components/dashboard/PanelChart.vue @@ -138,7 +138,10 @@ export default { return { datasets: [{ backgroundColor: [ - '#f2f3f5' + this.$q.dark.isActive ? '#2d2d2d' : '#f2f3f5' + ], + borderColor: [ + this.$q.dark.isActive ? '#1d1d1d' : '#fff' ], data: [1] }] @@ -152,6 +155,11 @@ export default { '#db7d11', '#ff0039' ], + borderColor: [ + this.$q.dark.isActive ? '#1d1d1d' : '#fff', + this.$q.dark.isActive ? '#1d1d1d' : '#fff', + this.$q.dark.isActive ? '#1d1d1d' : '#fff' + ], data: this.getData() }], labels: [ diff --git a/webui/src/components/dashboard/PanelFeature.vue b/webui/src/components/dashboard/PanelFeature.vue index f9951659a..ad0ca3164 100644 --- a/webui/src/components/dashboard/PanelFeature.vue +++ b/webui/src/components/dashboard/PanelFeature.vue @@ -27,7 +27,7 @@ export default { return typeof this.featureVal === 'string' }, isBoolean () { - return typeof variable === 'boolean' || this.featureVal === '' + return typeof this.featureVal === 'boolean' || this.featureVal === '' }, isTrue () { return this.isBoolean && this.featureVal === true @@ -83,4 +83,16 @@ export default { } } } + + .body--dark { + .feature-chip-string { + background-color: rgba( $app-text-grey, .3 ); + } + .feature-chip-boolean { + background-color: rgba( $negative, .3 ); + &-true { + background-color: rgba( $positive, .3 ); + } + } + } diff --git a/webui/src/css/sass/app.scss b/webui/src/css/sass/app.scss index 002da20c5..f9ab3e5a9 100644 --- a/webui/src/css/sass/app.scss +++ b/webui/src/css/sass/app.scss @@ -42,6 +42,9 @@ body { .bg-app-toggle { background-color: rgba( $accent, .1 ); } +.body--dark .bg-app-toggle { + background-color: rgba( $accent, .3 ); +} // Helps .xs-text-center { @@ -157,3 +160,26 @@ body { background-color: rgba($app-text-grey, 0.1); } } +.body--dark .app-chip { + &-accent, &-rule { + background-color: rgba($accent, 0.25); + } + &-green, &-entry-points { + background-color: rgba($app-text-green, 0.25); + } + &-purple, &-name { + background-color: rgba($app-text-purple, 0.25); + } + &-warning, &-service { + background-color: rgba($warning, 0.25); + } + &-negative, &-error { + background-color: rgba($negative, 0.25); + } + &-green-2, &-options { + background-color: rgba($app-text-green-2, 0.25); + } + &-marine, &-interval { + background-color: rgba($app-text-grey, 0.25); + } +}