(doc) How to change the color theme
parent
5ed99af021
commit
1e0b71bbda
|
@ -167,6 +167,17 @@ Building frontend
|
||||||
bower install
|
bower install
|
||||||
grunt build
|
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
|
Version Control
|
||||||
---------------
|
---------------
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
||||||
|
})();
|
Loading…
Reference in New Issue