Merge pull request #463 from YunoHost/dark-mode

[WIP] Add dark theme setting

app/src/App.vue

@@ -7,7 +7,12 @@
           :to="{ name: 'home' }" :disabled="waiting"
           exact exact-active-class="active"
         >
-          <img alt="Yunohost logo" src="./assets/logo.png">
+          <span v-if="theme">
+              <img alt="Yunohost logo" src="./assets/logo_light.png" width="40">
+          </span>
+          <span v-else>
+              <img alt="Yunohost logo" src="./assets/logo_dark.png" width="40">
+          </span>
         </b-navbar-brand>
 
         <b-navbar-nav class="ml-auto">
@@ -93,7 +98,8 @@ export default {
       'routerKey',
       'transitions',
       'transitionName',
-      'waiting'
+      'waiting',
+      'theme'
     ])
   },
 
@@ -153,6 +159,8 @@ export default {
     if (today.getDate() === 31 && today.getMonth() + 1 === 10) {
       this.$store.commit('SET_SPINNER', 'spookycat')
     }
+
+    document.documentElement.setAttribute('dark-theme', localStorage.getItem('theme')) // updates the data-theme attribute
   }
 }
 </script>

app/src/components/globals/DescriptionRow.vue

@@ -37,7 +37,7 @@ export default {
   @include media-breakpoint-up(md) {
     margin: .25rem 0;
     &:hover {
-      background-color: rgba(0, 0, 0, 0.05);
+      background-color: rgba($black, 0.05);
       border-radius: 0.2rem;
     }
   }

app/src/components/globals/Icon.vue

@@ -39,13 +39,9 @@ export default {
     @each $color, $value in $theme-colors {
       &.#{$color} {
         background-color: $value;
-        color: $white;
+        color: color-yiq($value);
       }
     }
-
-    &.warning {
-      color: $black;
-    }
   }
 }
 </style>

app/src/components/globals/formItems/TagsSelectizeItem.vue

@@ -12,7 +12,6 @@
               @remove="onRemoveTag({ option: tag, removeTag })"
               :title="tag"
               :disabled="disabled || disabledItems.includes(tag)"
-              variant="light"
               class="border border-dark mb-2"
             >
               <icon v-if="tagIcon" :iname="tagIcon" /> {{ tag }}
@@ -151,7 +150,7 @@ export default {
     padding-top: .5rem;
     position: sticky;
     top: 0;
-    background-color: white;
+    background-color: $white;
   }
 }
 </style>

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/_functions-override.scss

@@ -0,0 +1,245 @@
+// Taken from https://gist.github.com/johanlef/518a511b2b2f6b96c4f429b3af2f169a
+// Those functions overrides built-in bootstrap's computation color functions (that
+// generate flat variants and its darken/lighten alterations) to allow `var(--color)` CSS
+// variables to be used as primary colors and be instead computed on the fly with `calc()`s
+
+@function is-color($color) {
+  @if (type-of($color) == color) {
+    @return true;
+  }
+  @return false;
+}
+
+@function count-occurrences($string, $search) {
+  $searchIndex: str-index($string, $search);
+  $searchCount: 0;
+  @while $searchIndex {
+    $searchCount: $searchCount + 1;
+    $string: str-slice($string, $searchIndex + 1);
+    $searchIndex: str-index($string, $search);
+  }
+  @return $searchCount;
+}
+
+@function str-is-between($string, $first, $last) {
+  $firstCount: count-occurrences($string, $first);
+  $lastCount: count-occurrences($string, $last);
+  @return $firstCount == $lastCount;
+}
+
+@function recursive-color($color, $index: 0) {
+  $indices: (
+    0: h,
+    1: s,
+    2: l,
+    3: a
+  );
+  // find end of part
+  $end: str-index($color, ',');
+  @while ($end and not str-is-between(str-slice($color, 0, $end - 1), '(', ')')) {
+    $newEnd: str-index(str-slice($color, $end + 1), ',');
+    @if (not $newEnd) {
+      $newEnd: 0;
+    }
+    $end: 2 + $end + $newEnd;
+  }
+  @if ($end) {
+    $part: str-slice($color, 0, $end - 1);
+    $value: map-merge(
+      (
+        map-get($indices, $index): $part
+      ),
+      recursive-color(str-slice($color, $end + 1), $index + 1)
+    );
+    @return $value;
+  }
+  @return ();
+}
+
+@function to-hsl($color) {
+  $c: inspect($color);
+
+  $h: 0;
+  $s: 0;
+  $l: 0;
+  $a: 1;
+
+  @if (is-color($color)) {
+    // std color
+    $h: hue($color);
+    $s: saturation($color);
+    $l: lightness($color);
+    $a: alpha($color);
+
+    @return (h: $h, s: $s, l: $l, a: $a);
+  }
+
+  @if (str-slice($c, 0, 3) == 'var') {
+    // var(--color)
+    $commaPos: str-index($c, ',');
+    $end: -2;
+    @if ($commaPos) {
+      $end: $commaPos - 1;
+    }
+    $var: str-slice($c, 7, $end);
+
+    $h: var(--#{$var}-h);
+    $s: var(--#{$var}-s);
+    $l: var(--#{$var}-l);
+    $a: var(--#{$var}-a, 1);
+
+    @return (h: $h, s: $s, l: $l, a: $a);
+  }
+
+  @if ($c == '0') {
+    @return (h: $h, s: $s, l: $l, a: $a);
+  }
+
+  // color is (maybe complex) calculated color
+  // e.g.: hsla(calc((var(--white-h) + var(--primary-h)) / 2), calc((var(--white-s) + var(--primary-s)) / 2), calc((var(--white-l) + var(--primary-l)) / 2), calc((var(--white-a, 1) + var(--primary-a, 1)) / 2)), hsla(calc((var(--white-h) + var(--primary-h)) / 2), calc((var(--white-s) + var(--primary-s)) / 2), calc((var(--white-l) + var(--primary-l)) / 2), calc((var(--white-a, 1) + var(--primary-a, 1)) / 2))
+  $startPos: str-index($c, '(');
+  $c: str-slice($c, $startPos + 1, -2); // 3 or 4 comma-separated vomplex values
+  @return recursive-color($c);
+  // $hEnd: str-index($c, ',');
+  // @if ($hEnd) {
+  //   $h: str-slice($c, 0, $hEnd - 1);
+  //   $c: str-slice($c, $hEnd + 1);
+  //   $sEnd: str-index($c, ',');
+  //   @if ($hEnd) {
+  //     $h: str-slice($c, 0, $hEnd - 1);
+  //     $c: str-slice($c, $hEnd + 1);
+  //     $sEnd: str-index($c, ',');
+  //   }
+  // }
+
+  // @return (h: $h, s: $s, l: $l, a: $a);
+}
+
+@function render-hsla($h, $s, $l, $a: 1) {
+  @return hsla($h, $s, $l, $a);
+}
+
+@function lighten($color, $amount) {
+  @if (is-color($color)) {
+    @return scale-color($color: $color, $lightness: $amount);
+  }
+
+  $c: to-hsl($color);
+  $h: map-get($c, h);
+  $s: map-get($c, s);
+  $l: map-get($c, l);
+  $a: map-get($c, a);
+  @return render-hsla($h, $s, calc(#{$l} + #{$amount}), $a);
+}
+
+@function darken($color, $amount) {
+  @return lighten($color, $amount * -1);
+}
+
+@function rgba($red, $green, $blue: false, $alpha: false) {
+  $color: $red;
+
+  @if (not $blue and not $alpha) {
+    $alpha: $green;
+    $color: $red;
+  }
+
+  $c: to-hsl($color);
+  $h: map-get($c, h);
+  $s: map-get($c, s);
+  $l: map-get($c, l);
+  @return render-hsla($h, $s, $l, $alpha);
+}
+
+@function rgb($red, $green, $blue) {
+  @return rgba($red, $green, $blue, 1);
+}
+
+@function mix($color-1, $color-2, $weight: 50%) {
+  $c1: to-hsl($color-1);
+  $c2: to-hsl($color-2);
+
+  $h1: map-get($c1, h);
+  $s1: map-get($c1, s);
+  $l1: map-get($c1, l);
+  $a1: map-get($c1, a);
+
+  $h2: map-get($c2, h);
+  $s2: map-get($c2, s);
+  $l2: map-get($c2, l);
+  $a2: map-get($c2, a);
+
+  $h: calc((#{$h1} + #{$h2}) / 2);
+  $s: calc((#{$s1} + #{$s2}) / 2);
+  $l: calc((#{$l1} + #{$l2}) / 2);
+  $a: calc((#{$a1} + #{$a2}) / 2);
+
+  @return render-hsla($h, $s, $l, $a);
+}
+
+@function fade-in($color, $amount) {
+  $c: to-hsl($color);
+
+  $h: map-get($c, h);
+  $s: map-get($c, s);
+  $l: map-get($c, l);
+  $a: map-get($c, a);
+  @if (not $a) {
+    $a: 1;
+  }
+
+  @return render-hsla($h, $s, $l, $a + $amount);
+}
+
+@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
+  @if (is-color($color)) {
+    $r: red($color);
+    $g: green($color);
+    $b: blue($color);
+
+    $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+
+    @if ($yiq >= $yiq-contrasted-threshold) {
+      @return $dark;
+    } @else {
+      @return $light;
+    }
+  } @else {
+    $c: to-hsl($color);
+    $l: map-get($c, l);
+
+    $th: $yiq-contrasted-threshold / 2.56; // convert hex to dec
+    $lightness: calc(-100 * calc(#{$l} - calc(#{$th} * 1%)));
+
+    // ignoring hue and saturation, just a light or dark gray
+    @return render-hsla(0, 0%, $lightness, 1);
+  }
+}
+
+
+// Taken from https://gist.github.com/johanlef/518a511b2b2f6b96c4f429b3af2f169a?permalink_comment_id=4053335#gistcomment-4053335
+@function theme-color-level($color-name: "primary", $level: 0) {
+  $color: theme-color($color-name);
+  @if ($level == 0) {
+    @return $color;
+  }
+
+  $amount: $theme-color-interval * abs($level) / 100%;
+  $c: to-hsl($color);
+  $h: map-get($c, h);
+  $s: map-get($c, s);
+  $l: map-get($c, l);
+  $a: map-get($c, a);
+
+  @if ($level > 0) {
+    // Darken -X%: L = L * (1 - X)
+    // $rl: calc((#{$l} * #{1 - $amount}));
+    $rl: calc((#{$l} * #{$amount}));
+    @return render-hsla($h, $s, $rl, $a);
+  }
+  @if ($level < 0) {
+    // Ligthen +X%: L = L + X * (100 - L)
+    $rl: calc(#{$l} + #{$amount} * (100% - #{$l}));
+    @return render-hsla($h, $s, $rl, $a);
+  }
+}

app/src/scss/_variables.scss

@@ -30,14 +30,44 @@
 $font-size-base: .9rem;
 $font-weight-bold: 500;
 
-$blue:   #2f7ed2;
+$white:    var(--white);
-$purple: #9932cc;
+$gray-100: var(--gray-100);
-$yellow: #ffd452;
+$gray-200: var(--gray-200);
+$gray-300: var(--gray-300);
+$gray-400: var(--gray-400);
+$gray-500: var(--gray-500);
+$gray-600: var(--gray-600);
+$gray-700: var(--gray-700);
+$gray-800: var(--gray-800);
+$gray-900: var(--gray-900);
+$black:    var(--black);
+
+$blue:    var(--blue);
+$indigo:  var(--indigo);
+$purple:  var(--purple);
+$pink:    var(--pink);
+$red:     var(--red);
+$orange:  var(--orange);
+$yellow:  var(--yellow);
+$green:   var(--green);
+$teal:    var(--teal);
+$cyan:    var(--cyan);
 
 $theme-colors: (
-  'best': $purple
+  'best': $purple,
 );
 
+$yiq-contrasted-threshold: var(--yiq-contrasted-threshold);
+
+$alert-bg-level:     -10;
+$alert-border-level: -9;
+$alert-color-level:  5;
+
+$list-group-item-bg-level:     -11;
+$list-group-item-color-level:  6;
+
+$code-color: var(--code-color);
+
 // Replace font-weight 300 with 200
 $font-weight-light: 200;
 $display1-weight: 200;
@@ -62,15 +92,17 @@ $card-spacer-x: 1rem;
 
 $list-group-item-padding-x: 1rem;
 
+// Hard coded for scss compilation to pass
+$b-toast-background-opacity: 100%;
+
 // Import default variables after the above setup to compute all other variables.
 @import '~bootstrap/scss/functions.scss';
+@import '_functions-override.scss';
 @import '~bootstrap/scss/variables';
 @import '~bootstrap/scss/mixins.scss';
 @import '~bootstrap-vue/src/variables';
 
 
-$body-color: $gray-800;
-
 $hr-border-color: $gray-200;
 
 $list-group-action-color: $gray-800;

app/src/scss/main.scss

@@ -8,13 +8,131 @@
 
 // Dependencies SCSS imports
 // `~` allow to import a node_modules folder (resolved by Webpack)
-@import '~bootstrap/scss/bootstrap.scss';
+// @import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/input-group";
+@import "~bootstrap/scss/custom-forms";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/breadcrumb";
+// @import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/badge";
+// @import "~bootstrap/scss/jumbotron";
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/progress";
+// @import "~bootstrap/scss/media";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/close";
+// @import "~bootstrap/scss/toasts";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/popover";
+// @import "~bootstrap/scss/carousel";
+@import "~bootstrap/scss/spinners";
+@import "~bootstrap/scss/utilities";
+// @import "~bootstrap/scss/print";
+
 @import '~bootstrap-vue/src/index.scss';
 
 // Import fonts
 @import 'font';
 @import '~fork-awesome/scss/fork-awesome.scss';
 
+// helper to set the required 4 CSS variables per color to allow `calc` computation of variants and states
+@mixin hsl-color($name, $h, $s, $l) {
+  --#{$name}: hsl(#{$h}, #{$s}, #{$l});
+  --#{$name}-h: #{$h};
+  --#{$name}-s: #{$s};
+  --#{$name}-l: #{$l};
+}
+
+:root {
+  color-scheme: light;
+
+  --yiq-contrasted-threshold: 150;
+
+  @include hsl-color('white', 0, 0%, 100%);
+  @include hsl-color('black', 0, 0%, 0%);
+  @include hsl-color('blue', 211, 64%, 50%);
+  @include hsl-color('indigo', 263, 90%, 51%);
+  @include hsl-color('purple', 280, 61%, 50%);
+  @include hsl-color('pink', 332, 79%, 58%);
+  @include hsl-color('red', 354, 70%, 54%);
+  @include hsl-color('orange', 27, 98%, 54%);
+  @include hsl-color('yellow', 45, 100%, 66%);
+  @include hsl-color('green', 134, 61%, 41%);
+  @include hsl-color('teal', 162, 73%, 46%);
+  @include hsl-color('cyan', 188, 78%, 41%);
+
+  @include hsl-color('gray-100', 210, 17%, 98%);
+  @include hsl-color('gray-200', 210, 16%, 93%);
+  @include hsl-color('gray-300', 210, 14%, 89%);
+  @include hsl-color('gray-400', 210, 14%, 83%);
+  @include hsl-color('gray-500', 210, 11%, 71%);
+  @include hsl-color('gray-600', 208, 7%, 46%);
+  @include hsl-color('gray-700', 210, 9%, 31%);
+  @include hsl-color('gray-800', 210, 10%, 23%);
+  @include hsl-color('gray-900', 210, 11%, 15%);
+
+  --code-color: var(--pink);
+
+  // Overwrite list-group-item variants to lighter ones (used in diagnosis for example)
+  @each $color, $value in $theme-colors {
+    @include list-group-item-variant($color, theme-color-level($color, $list-group-item-bg-level), theme-color-level($color, $list-group-item-color-level));
+
+    .btn-#{$color} {
+      &:focus,
+      &.focus {
+        box-shadow: 0 0 0 $btn-focus-width rgba($value, .3);
+      }
+    }
+  }
+}
+
+[dark-theme="true"] {
+  color-scheme: dark; // Ask browser to use dark mode native styling
+
+  --yiq-contrasted-threshold: 120;
+
+  @include hsl-color('white', 256, 0%, 12.5%);
+  @include hsl-color('black', 256, 0%, 100%);
+  @include hsl-color('blue', 210.7, 95.5%, 65.5%);
+  @include hsl-color('purple', 280, 77.8%, 62.9%);
+  @include hsl-color('red', 0, 100%, 67.6%);
+  @include hsl-color('green', 134.3, 74.4%, 67.8%);
+  @include hsl-color('cyan', 188.4, 91.4%, 72.5%);
+
+  @include hsl-color('gray-900', 256, 0%, 98%);
+  @include hsl-color('gray-800', 256, 0%, 93%);
+  @include hsl-color('gray-700', 256, 0%, 89%);
+  @include hsl-color('gray-600', 256, 0%, 83%);
+  @include hsl-color('gray-500', 256, 0%, 71%);
+  @include hsl-color('gray-400', 256, 0%, 46%);
+  @include hsl-color('gray-300', 256, 0%, 31%);
+  @include hsl-color('gray-200', 256, 0%, 23%);
+  @include hsl-color('gray-100', 256, 0%, 15%);
+
+  --code-color: var(--gray-800);
+
+  @each $color, $value in $theme-colors {
+    @include list-group-item-variant($color, theme-color-level($color, -6), theme-color-level($color, 2));
+
+    .alert-#{$color} {
+      @include alert-variant(theme-color-level($color, -6), theme-color-level($color, -5), theme-color-level($color, 2));
+    }
+  }
+}
 
 // Style overrides happens after dependencies imports
 
@@ -30,7 +148,7 @@ body {
 #app {
   display: flex;
   flex-direction: column;
-  min-height: 100vh
+  min-height: 100vh;
 }
 
 .menu-list .list-group-item {
@@ -40,13 +158,6 @@ body {
 }
 
 
-// Bootstrap overrides
-
-// Overwrite list-group-item variants to lighter ones (used in diagnosis for example)
-@each $color, $value in $theme-colors {
-  @include list-group-item-variant($color, theme-color-level($color, -11), theme-color-level($color, 6));
-}
-
 // Add breakpoints for w-*
 @each $breakpoint in map-keys($grid-breakpoints) {
   @each $size, $length in $sizes {
@@ -75,7 +186,7 @@ body {
 .row-line {
   @include media-breakpoint-up(md) {
     &:hover {
-      background-color: rgba(0, 0, 0, 0.05);
+      background-color: rgba($black, 0.05);
       border-radius: 0.2rem;
     }
   }
@@ -112,7 +223,7 @@ body {
 
 h3.card-title {
   margin-bottom: 1em;
-  border-bottom: solid 1px #aaa;
+  border-bottom: solid 1px $hr-border-color;
 }
 
 // collapse icon
@@ -183,7 +294,13 @@ h3.card-title {
 }
 
 code {
-  background: ghostwhite;
+  background: $light;
+  padding: .15rem .25rem;
+  border-radius: $border-radius;
+}
+
+pre code {
+  padding: 0;
 }
 
 .log {

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('dark-theme', boolean)
     }
   },
 
@@ -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

@@ -207,6 +207,7 @@ export default {
   border-bottom-left-radius: 0;
   font-size: $font-size-sm;
 
+
   & > header {
     cursor: ns-resize;
   }

app/src/views/diagnosis/Diagnosis.vue

@@ -76,7 +76,7 @@
               </b-button>
               <b-button
                 v-if="item.details"
-                size="sm" variant="outline-dark" class="ml-lg-2 mt-2 mt-lg-0"
+                size="sm" :variant="'outline-' + (theme ? 'light' : 'dark')" class="ml-lg-2 mt-2 mt-lg-0"
                 v-b-toggle="`collapse-${report.id}-item-${i}`"
               >
                 <icon iname="level-down" /> {{ $t('details') }}
@@ -106,6 +106,8 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 import api from '@/api'
 import { distanceToNow } from '@/helpers/filters/date'
 
@@ -122,6 +124,10 @@ export default {
     }
   },
 
+  computed: {
+    ...mapGetters(['theme'])
+  },
+
   methods: {
     formatReportItem (report, item) {
       let issue = false

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'])
   },