(doc) How to change the color theme

Documentation/SOGoDevelopersGuide.asciidoc

@@ -167,6 +167,17 @@ Building frontend
     bower install
     grunt build
 
+Defining an alternate color theme
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+SOGo relies on the https://material.angularjs.org/latest/Theming/01_introduction[theming system of Angular Material] to define the colors of the Web interface.
+
+To overwrite the default theme in SOGo, set the following parameter in `/etc/sogo/sogo.conf`:
+
+    SOGoUIAdditionalJSFiles = (js/theme.js);
+
+Edit `theme.js` under `/usr/lib64/GNUstep/SOGo/WebServerResources/js` or `/usr/lib/GNUstep/SOGo/WebServerResources/js` depending on your platform and restart sogod.
+
 Version Control
 ---------------
 

UI/WebServerResources/js/theme.js

@@ -0,0 +1,78 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+(function() {
+  'use strict';
+
+  angular.module('SOGo.Common')
+    .config(configure)
+
+  /**
+   * @ngInject
+   */
+  configure.$inject = ['$mdThemingProvider'];
+  function configure($mdThemingProvider) {
+
+    /**
+     * Define a new palette or choose any of the default palettes:
+     *
+     * https://material.io/guidelines/style/color.html#color-color-palette
+     */
+    // $mdThemingProvider.definePalette('sogo-paper', {
+    //   '50': 'fcf7f8',
+    //   '100': 'f7f1dc',
+    //   '200': 'ede5ca',
+    //   '300': 'e6d8ba',
+    //   '400': 'e2d2a3',
+    //   '500': 'd6c48d',
+    //   '600': 'baa870',
+    //   '700': '857545',
+    //   '800': '524517',
+    //   '900': '433809',
+    //   '1000': '000000',
+    //   'A100': 'ffffff',
+    //   'A200': 'eeeeee',
+    //   'A400': 'bdbdbd',
+    //   'A700': '616161',
+    //   'contrastDefaultColor': 'dark',
+    //   'contrastLightColors': ['800', '900']
+    // });
+
+    /**
+     * Define the Alternative theme
+     */
+    $mdThemingProvider.theme('alt')
+      .primaryPalette('blue-grey', {
+        'default': '400',
+        'hue-1': '400',
+        'hue-2': '600',
+        'hue-3': 'A700'
+      })
+      .accentPalette('teal', {
+        'default': '600',
+        'hue-1': '50',
+        'hue-2': '300',
+        'hue-3': 'A700'
+      })
+      .backgroundPalette('grey', {
+        'default': '50',
+        'hue-1': '200',
+        'hue-2': '300',
+        'hue-3': '500'
+      });
+
+    /**
+     * Overwrite the accent palette from the default theme.
+     * This is necessary because some templates directly refer to the "md-default-theme" class.
+     */
+    $mdThemingProvider.theme('default')
+      .accentPalette('teal', {
+        'default': '600',
+        'hue-1': '50',
+        'hue-2': '300',
+        'hue-3': 'A700'
+      });
+
+    $mdThemingProvider.setDefaultTheme('alt');
+    $mdThemingProvider.generateThemesOnDemand(false);
+  }
+})();