(doc) How to change the color theme
parent
5ed99af021
commit
1e0b71bbda
|
@ -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
|
||||
---------------
|
||||
|
||||
|
|
|
@ -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