Customize SOGo theme

dennisB

Hi,
I managed to change the theme of my SOGo login interface according to https://mailcow.github.io/mailcow-dockerized-docs/u_e-sogo/#change-theme.
I decided to go for the “blue” style instead of the green one for testing purposes. Also uploading a custom logo works like a charme.

However the buttons and the interface itself are still based on the green theme

I could not figure out how to change this part of the theming as well. Is there anything more to change than the data/conf/sogo/custom-theme.js?

Thanks in advance
Dennis

kinyodan

dennisB Hi,
I managed to change the theme of my SOGo login interface according to https://mailcow.github.io/mailcow-dockerized-docs/u_e-sogo/#change-theme.
I decided to go for the “blue” style instead of the green one for testing purposes. Also uploading a custom logo works like a charme.

can someone tell me how you upload the logo , damn the documentation on this thing is not very good , If someone from the mailcow team see’s this , Can I help out with this and join the team documenting as a contributor and we can make it better.

dennisB

My simple data/conf/sogo/custom-theme.js

(function() {
  'use strict';
  angular.module('SOGo.Common')
    .config(configure)

  configure.$inject = ['$mdThemingProvider'];
  function configure($mdThemingProvider) {
    var greyMap = $mdThemingProvider.extendPalette('grey', {
      '200': 'F5F5F5',
      '300': 'E5E5E5',
      '1000': '4C566A'
    });
    var blueCow = $mdThemingProvider.extendPalette('blue', {
      '600': 'E5E5E5'
    });
    $mdThemingProvider.definePalette('frost-grey', greyMap);
    $mdThemingProvider.definePalette('blue-cow', blueCow);
    $mdThemingProvider.theme('default')
      .primaryPalette('blue-cow', {
        'default': '400',
        'hue-1': '400',
        'hue-2': '600',
        'hue-3': 'A700'
      })
      .accentPalette('blue', {
        'default': '600',
        'hue-1': '300',
        'hue-2': '300',
        'hue-3': 'A700'
      })
      .backgroundPalette('frost-grey');
    $mdThemingProvider.generateThemesOnDemand(false);
  }
})();

CaliPilot

Whoever at SOGo came up with the way on how to change the SOGo theme (even for a few colors) should spent his eternity playing marbles. I gave it the whole day a try, pulled my hair out and finally gave up. I’ve managed to apply the settings from @dennisB (thx btw!) but any further changes didn’t work.

I understand that sometimes things are crazy but this blew my mind 🤪

Chris

Shuraka

My lord what a waste of time…. I followed 2+ tutorials to make this work…. I’m a newbie so it took me a long time but I made zero progress, no changes manifested. It was probably a small mistake on my part but goodness gracious could it be any more complicated? 5 hours wasted.

mailcow-helper

I believe you must have followed the https://docs.mailcow.email/manual-guides/SOGo/u_e-sogo/ and generated custom-theme.css.

You can modify the theme by changing values in custom-theme.css file. May be you will need some web designing skills to get it customised.

mailcow-helper

I control the logo via my NGINX Proxy Web server so that nothing needs to be done at mailcow side😀

Check below screenshot:

It just replaces the default logo with provided logo.svg. e.g. placed in your nginx html serving directory.

kinyodan

mailcow-helper thanks I managed to get it to work ,can you point to a resource on how to customize further ,lets say the mailbox styles etc . and you didnt say anything about contributing to document btw 😀 documented tutorials wuld be great help especially about customizing . let me know I have time to spare.

NlightN22

If anybody need dark theme for SOGo, i made some - NlightN22/sogo-dark-red

duli

I’ve created a generic template that allows you to change just the name of the color palette and the theme’s harmony will be reasonable enough.

No need to mess with default background (grey).

Choose a color from the Material design palette and just change the predominant_color variable.

File data/conf/sogo/custom-theme.js:

(function() {
  'use strict';
  angular.module('SOGo.Common')
    .config(configure)

  configure.$inject = ['$mdThemingProvider'];
  function configure($mdThemingProvider) {
    
    // Pick a color pallete: 'indigo', 'teal', 'cyan', 'blue', 'light-freen' etc.
    // https://m1.material.io/style/color.html#color-color-palette
    var predominant_color = 'blue-grey'

    $mdThemingProvider.theme('default')
      .primaryPalette(predominant_color, {
        'default': '600',  // background color of top toolbars
        'hue-1':   '100',  // week numbers in calendar
        'hue-2':   '500',  // background color of sidebar toolbar (user name and email)
      })
      .accentPalette(predominant_color, {
        'default': '100',  // background color of fab buttons and login screen
        'hue-1':   '200',  // background color of center list toolbar  
        'hue-2':   '200',  // highlight color for selected mail and current day calendar
      });

    $mdThemingProvider.generateThemesOnDemand(false);
  }
})();

The new colors will be loaded when you restart memcached-mailcow and sogo-mailcow.

docker compose restart memcached-mailcow sogo-mailcow

After that, you can further customize the theme to your liking, if needed, changing the values in the primaryPalette and accentPalette (100, 200, 600 etc.), according to the shades from here.

To make changes persistent, follow the steps described here.

Hope it helps!