wip: add dark theme setting

app/src/App.vue

@@ -153,6 +153,8 @@ export default {
     if (today.getDate() === 31 && today.getMonth() + 1 === 10) {
       this.$store.commit('SET_SPINNER', 'spookycat')
     }
+
+    document.documentElement.setAttribute('data-theme', localStorage.getItem('theme') === "true" ? 'darkMode' : '') // updates the data-theme attribute
   }
 }
 </script>

app/src/i18n/locales/en.json

@@ -525,7 +525,8 @@
         "cache_description": "Consider disabling the cache if you plan on working with the CLI while also navigating in this web-admin.",
         "experimental": "Experimental mode",
         "experimental_description": "Gives you access to experimental features. These are considered unstable and may break your system.<br> Enable this only if you know what you are doing.",
-        "transitions": "Page transition animations"
+        "transitions": "Page transition animations",
+        "theme": "Toggle dark mode"
     },
     "tools_yunohost_settings": "YunoHost settings",
     "tools_webadmin_settings": "Web-admin settings",

app/src/scss/_variables.scss

@@ -38,6 +38,17 @@ $theme-colors: (
   'best': $purple
 );
 
+:root {
+  --background-color: #fff;
+  --background-color-secondary: #fff;
+}
+
+[data-theme="darkMode"] {
+  /* Variables for dark mode */
+  --background-color: black;
+  --background-color-secondary: white;   
+}
+
 // Replace font-weight 300 with 200
 $font-weight-light: 200;
 $display1-weight: 200;
@@ -75,6 +86,10 @@ $hr-border-color: $gray-200;
 
 $list-group-action-color: $gray-800;
 
+$background-color-primary: var(--background-color);
+
+$background-color-secondary: var(--background-color-secondary);
+
 //  ╭──────────────────────────────────────╮
 //  │ ┌─╴╭─╮┌─╮╷ ╭   ╭─┐╷╷╷┌─╴╭─╴╭─╮╭╮╮┌─╴ │
 //  │ ├─╴│ │├┬╯├┴╮╶─╴├─┤│││├─╴╰─╮│ ││││├─╴ │

app/src/scss/main.scss

@@ -25,18 +25,33 @@ body {
   overflow-x: hidden;
   min-height: 100vh;
   margin: 0;
+  background-color: $background-color-primary;
 }
 
 #app {
   display: flex;
   flex-direction: column;
-  min-height: 100vh
+  min-height: 100vh;
+  background-color: $background-color-primary;
 }
 
 .menu-list .list-group-item {
   padding: $list-group-item-padding-y 0;
   display: flex;
   align-items: center;
+  background-color: $background-color-primary;
+}
+
+.list-group-item:hover {
+  background-color: $background-color-secondary;
+}
+
+.form-control {
+  background-color: $background-color-secondary;
+}
+
+.form-control:focus {
+  background-color: $background-color-secondary;
 }
 
 
@@ -102,12 +117,14 @@ body {
   h1, h2, h3, h4, h5, h6 {
     margin: 0;
   }
+  background-color: $background-color-primary;
 }
 
 .card-header, .list-group-item {
   h1, h2, h3, h4, h5, h6 {
     font-weight: $font-weight-normal;
   }
+  background-color: $background-color-primary;
 }
 
 h3.card-title {

app/src/store/settings.js

@@ -13,6 +13,7 @@ export default {
     fallbackLocale: localStorage.getItem('fallbackLocale'),
     cache: localStorage.getItem('cache') !== 'false',
     transitions: localStorage.getItem('transitions') !== 'false',
+    theme: localStorage.getItem('theme') !== 'false',
     experimental: localStorage.getItem('experimental') === 'true',
     spinner: 'pacman',
     supportedLocales: supportedLocales
@@ -46,6 +47,12 @@ export default {
 
     'SET_SPINNER' (state, spinner) {
       state.spinner = spinner
+    },
+
+    'SET_THEME' (state, boolean) {
+      localStorage.setItem('theme', boolean)
+      state.theme = boolean
+      document.documentElement.setAttribute('data-theme', boolean ? 'darkMode' : '')
     }
   },
 
@@ -65,6 +72,10 @@ export default {
         commit('SET_FALLBACKLOCALE', locale)
         i18n.fallbackLocale = [locale, 'en']
       })
+    },
+
+    'UPDATE_THEME' ({ commit }, theme) {
+      commit('SET_THEME', theme)
     }
   },
 
@@ -73,6 +84,7 @@ export default {
     fallbackLocale: state => (state.fallbackLocale),
     cache: state => (state.cache),
     transitions: state => (state.transitions),
+    theme: state => (state.theme),
     experimental: state => state.experimental,
     spinner: state => state.spinner,
 

app/src/views/_partials/HistoryConsole.vue

@@ -193,6 +193,7 @@ export default {
 
 .card-header {
   padding: $tooltip-padding-y $tooltip-padding-x;
+  background-color: $background-color-primary !important;
 }
 
 #console {
@@ -206,6 +207,8 @@ export default {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
   font-size: $font-size-sm;
+  background-color: $background-color-primary;
+
 
   & > header {
     cursor: ns-resize;
@@ -238,6 +241,7 @@ export default {
 #history {
   overflow-y: auto;
   max-height: 20vh;
+  background-color: $background-color-primary;
 
   &.no-max {
     max-height: none;

app/src/views/tool/ToolWebadmin.vue

@@ -60,6 +60,13 @@ export default {
           label: this.$i18n.t('tools_webadmin.transitions'),
           component: 'CheckboxItem',
           props: { labels: { true: 'enabled', false: 'disabled' } }
+        },
+
+        theme: {
+          id: 'theme',
+          label: this.$i18n.t('tools_webadmin.theme'),
+          component: 'CheckboxItem',
+          props: { labels: { true: '🌙', false: '☀️' } }
         }
 
         // experimental: added in `created()`
@@ -69,7 +76,7 @@ export default {
 
   computed: {
     // Those are set/get computed properties
-    ...mapStoreGetSet(['locale', 'fallbackLocale'], 'dispatch'),
+    ...mapStoreGetSet(['locale', 'fallbackLocale', 'theme'], 'dispatch'),
     ...mapStoreGetSet(['cache', 'transitions', 'experimental'])
   },