From 1e0b71bbda4ea3fe541813980173501992226684 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Mon, 25 Sep 2017 12:13:48 -0400
Subject: [PATCH] (doc) How to change the color theme

---
 Documentation/SOGoDevelopersGuide.asciidoc | 11 +++
 UI/WebServerResources/js/theme.js          | 78 ++++++++++++++++++++++
 2 files changed, 89 insertions(+)
 create mode 100644 UI/WebServerResources/js/theme.js

diff --git a/Documentation/SOGoDevelopersGuide.asciidoc b/Documentation/SOGoDevelopersGuide.asciidoc
index 5dd34bfb2..b729bb42e 100644
--- a/Documentation/SOGoDevelopersGuide.asciidoc
+++ b/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
 ---------------
 
diff --git a/UI/WebServerResources/js/theme.js b/UI/WebServerResources/js/theme.js
new file mode 100644
index 000000000..e56a0d52d
--- /dev/null
+++ b/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);
+  }
+})();