add theming via css custom properties

and a bonus dark color theme toggle

3 files changed, 40 insertions, 3 deletions

diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 8fe6797d6..d9e75adea 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -87,6 +87,9 @@
       <span class="language">
         <span (click)="openLanguageChooser()" i18n-title title="Change the language" class="icon icon-language"></span>
       </span>
+      <span class="color-palette">
+        <span (click)="toggleDarkTheme()" i18n-title title="Toggle dark interface" class="icon icon-moonsun"></span>
+      </span>
     </div>
   </menu>
 </div>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 941c208e2..4ef330b2f 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -9,7 +9,7 @@
 }
 
 menu {
-  background-color: $black-background;
+  background-color: $menu-background;
   margin: 0;
   padding: 0;
   height: 100%;
@@ -190,10 +190,10 @@ menu {
   }
 
   .footer {
-    margin-bottom: 15px;
+    padding-bottom: 15px;
     padding-left: $menu-left-padding;
 
-    .language {
+    .language, .color-palette {
       display: inline-block;
       color: $menu-bottom-color;
       cursor: pointer;
@@ -213,6 +213,16 @@ menu {
           background-image: url('../../assets/images/menu/language.png');
         }
 
+        &.icon-moonsun  {
+          margin-left: 10px;
+          position: relative;
+          top: -1px;
+          width: 24px;
+          height: 24px;
+
+          background-image: url('../../assets/images/menu/moonsun.svg');
+        }
+
         &:hover {
           opacity: 1;
         }
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index dded6b4d5..3de4a78af 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -22,6 +22,8 @@ export class MenuComponent implements OnInit {
     [UserRight.MANAGE_VIDEO_ABUSES]: '/admin/video-abuses',
     [UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/video-blacklist'
   }
+  private theme = document.querySelector('body')
+  private previousTheme = { }
 
   constructor (
     private authService: AuthService,
@@ -51,6 +53,13 @@ export class MenuComponent implements OnInit {
         }
       }
     )
+
+    // initialise the alternative theme with dark theme colors
+    this.previousTheme['mainBackgroundColor'] = '#111111'
+    this.previousTheme['mainForegroundColor'] = '#fff'
+    this.previousTheme['submenuColor'] = 'rgb(32,32,32)'
+    this.previousTheme['inputColor'] = 'gray'
+    this.previousTheme['inputPlaceholderColor'] = '#fff'
   }
 
   isRegistrationAllowed () {
@@ -96,6 +105,21 @@ export class MenuComponent implements OnInit {
     this.languageChooserModal.show()
   }
 
+  toggleDarkTheme () {
+    // switch properties
+    this.switchProperty('mainBackgroundColor')
+    this.switchProperty('mainForegroundColor')
+    this.switchProperty('submenuColor')
+    this.switchProperty('inputColor')
+    this.switchProperty('inputPlaceholderColor')
+  }
+
+  private switchProperty (property, newValue?) {
+    const propertyOldvalue = window.getComputedStyle(this.theme).getPropertyValue('--' + property)
+    this.theme.style.setProperty('--' + property, (newValue) ? newValue : this.previousTheme[property])
+    this.previousTheme[property] = propertyOldvalue
+  }
+
   private computeIsUserHasAdminAccess () {
     const right = this.getFirstAdminRightAvailable()