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)
+    }
   }
 }
 </script>
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 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="88" height="96" viewBox="0 0 88 96">
+    <g fill="none" fill-rule="nonzero" stroke="#7A7A7A" stroke-width="4">
+        <path fill="#3D3D3D" d="M41.05 42.807zm0 0l-.006.003 1.917 3.508-1.876-3.532c1.866-1.05 4.007-1.044 5.82-.006 8.058 4.62 22.413 13.097 37.112 21.84C85.14 65.299 86 66.39 86 68c0 1.612-.866 2.71-1.993 3.383-15.424 9.173-29.305 17.368-37.1 21.836a5.813 5.813 0 0 1-5.812 0C33.322 88.765 19.88 80.83 3.983 71.38 2.86 70.7 2 69.61 2 67.999c0-1.615.869-2.72 1.993-3.382a8052.42 8052.42 0 0 1 17.004-10.023l.05-.03a33723.823 33723.823 0 0 1 18.288-10.75l1.27-.746.334-.196.085-.05.022-.013.004-.002z"/>
+        <path fill="#1D1D1D" stroke-dasharray="0,10" stroke-linecap="round" d="M4 48c0-.96.707-1.483 1.012-1.662 9.254-5.48 37.058-21.81 37.054-21.809 1.274-.717 2.664-.69 3.844-.014 10.211 5.854 30.961 18.182 37.074 21.819.305.183 1.016.71 1.016 1.666 0 .955-.71 1.482-1.016 1.664-7.914 4.707-27.37 16.26-37.07 21.818a3.813 3.813 0 0 1-3.824.002c-9.703-5.56-29.16-17.113-37.074-21.818C4.71 49.482 4 48.955 4 48z"/>
+        <path fill="#3D3D3D" d="M41.05 2.807zm0 0l-.006.003 1.917 3.508-1.876-3.532c1.866-1.05 4.007-1.044 5.82-.006 8.058 4.62 22.413 13.097 37.112 21.84C85.14 25.299 86 26.39 86 28c0 1.612-.866 2.71-1.993 3.383-15.424 9.173-29.305 17.368-37.1 21.836a5.813 5.813 0 0 1-5.812 0C33.322 48.765 19.88 40.83 3.983 31.38 2.86 30.7 2 29.61 2 27.999c0-1.615.869-2.72 1.993-3.382a8052.42 8052.42 0 0 1 17.004-10.023l.05-.03a33723.375 33723.375 0 0 1 18.288-10.75l1.27-.746.334-.196.085-.05.022-.013.004-.002z"/>
+    </g>
+</svg>
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 @@
             <q-route-tab to="/udp" icon="eva-globe-2-outline" no-caps label="UDP" />
           </q-tabs>
           <q-space />
+          <q-btn @click="$q.dark.toggle()" stretch flat no-caps icon="invert_colors" :label="`${$q.dark.isActive ? 'Light' : 'Dark'} theme`" class="btn-menu" />
           <q-btn type="a" :href="`https://docs.traefik.io/${parsedVersion}`" target="_blank" stretch flat no-caps label="Documentation" class="btn-menu" />
           <q-btn v-if="version" type="a" href="https://github.com/containous/traefik/" target="_blank" stretch flat no-caps :label="`${name} ${version}`" class="btn-menu" />
         </q-toolbar>
       </div>
     </section>
 
-    <section class="app-section bg-white text-black">
+    <section class="app-section text-black sub-nav" :class="{ 'bg-white': !$q.dark.isActive }">
       <div class="app-section-wrap app-boxed app-boxed-xl">
         <slot />
       </div>
@@ -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 @@
         <div class="col-12">
         <div class="block-empty"></div>
           <div class="q-pb-lg block-empty-logo">
-            <img alt="empty" src="~assets/middlewares-empty.svg">
+            <img v-if="$q.dark.isActive" alt="empty" src="~assets/middlewares-empty-dark.svg">
+            <img v-else alt="empty" src="~assets/middlewares-empty.svg">
           </div>
           <div class="block-empty-label">There are no<br>Middlewares configured</div>
         </div>
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 @@
         <div class="col-12">
           <div class="block-empty"></div>
           <div class="q-pb-lg block-empty-logo">
-            <img alt="empty" src="~assets/middlewares-empty.svg">
+            <img v-if="$q.dark.isActive" alt="empty" src="~assets/middlewares-empty-dark.svg">
+            <img v-else alt="empty" src="~assets/middlewares-empty.svg">
           </div>
           <div class="block-empty-label">There are no<br>TLS configured</div>
         </div>
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)
+      );
+    }
+  }
 </style>
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 @@
         ]"
     />
     <q-space />
-    <q-input v-model="getFilter" rounded dense outlined type="search" debounce="500" placeholder="Search" bg-color="white" class="bar-search">
+    <q-input v-model="getFilter" rounded dense outlined type="search" debounce="500" placeholder="Search" :bg-color="$q.dark.isActive ? undefined : 'white'" class="bar-search">
       <template v-slot:append>
         <q-icon name="eva-search-outline" />
       </template>
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 );
+      }
+    }
+  }
 </style>
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);
+  }
+}