Implement dark-mode (#803)

src/assets/styles/_defaults.scss

@@ -0,0 +1,35 @@
+// Custom properties
+:root {
+  --header-main-bg: #FFF;
+  --footer-fragment-bdr: #eee;
+  --table-odd-bg: #f5f9fa;
+  --border-radius: 6px;
+  --log-header-bg: var(--shadow);
+}
+
+// Dark-mode
+html[data-color-scheme=dark] {
+  --header-main-bg: #292c32;
+  --footer-fragment-bdr: var(--footer-bdr);
+  --table-odd-bg: var(--tiles-bg);
+  --link-footer: #fff;
+  --hint-bg: #151619;
+  --hint-rgb: 21, 22, 25;
+  --log-header-bg: var(--btn);
+
+  .vjs-tree-node:hover {
+    background-color: #2b3439;
+  }
+}
+
+// Dark/Light images
+
+.color-scheme--light,
+html[data-color-scheme=dark] .color-scheme--dark {
+  display: initial;
+}
+
+.color-scheme--dark,
+html[data-color-scheme=dark] .color-scheme--light {
+  display: none;
+}

src/components/App.vue

@@ -81,6 +81,18 @@
             currentView: vm => vm.views[vm.view] || null,
         },
 
+        methods: {
+            initColorMode() {
+                let prefersDark = localStorage.getItem('contao--prefers-dark');
+
+                if (null === prefersDark) {
+                    prefersDark = String(window.matchMedia('(prefers-color-scheme: dark)').matches);
+                }
+
+                document.documentElement.dataset.colorScheme = prefersDark === 'true' ? 'dark' : 'light';
+            },
+        },
+
         watch: {
             async isReady(ready) {
                 if (ready) {
@@ -106,6 +118,8 @@
         },
 
         async mounted() {
+            this.initColorMode();
+
             if (this.$route.query.token) {
                 try {
                     await Vue.http.post('api/session', { token: this.$route.query.token });
@@ -198,7 +212,7 @@
         right: 0;
         height: 27px;
         padding: 4px 8px;
-        background: $orange-button;
+        background: var(--btn-warning);
         color: #fff;
         text-align: center;
         z-index: 100;
@@ -228,7 +242,7 @@
         right: 0;
         height: 27px;
         padding: 4px 8px;
-        background: $red-button;
+        background: var(--btn-alert);
         color: #fff;
         text-align: center;
         z-index: 100;

src/components/boot/BootConfig.vue

@@ -140,7 +140,7 @@ export default {
         }
 
         &__icon {
-            background: $contao-color;
+            background: var(--contao);
             border-radius: 10px;
             padding:10px;
         }
@@ -191,7 +191,7 @@ export default {
 
         &__issues {
             margin-bottom: 1em;
-            color: $red-button;
+            color: var(--btn-alert);
 
             p {
                 font-weight: $font-weight-bold;
@@ -238,16 +238,6 @@ export default {
                         padding-top: 10px;
                         font-weight: $font-weight-medium;
                     }
-
-                    select,
-                    input[type=text] {
-                        width: 250px;
-                    }
-                }
-
-                .widget-button {
-                    width: 250px;
-                    margin-left: 120px;
                 }
             }
         }