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

    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);
      }
    })();

    Have something to say?

    Join the community by quickly registering to participate in this discussion. We'd like to see you joining our great moo-community!

    2 years later

    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

    5 months later

    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.

    9 months later

    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.

    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.

      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.

      19 days later
      2 months later

      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 Material Design Icon here

      .

      To make changes persistent, follow the steps described docs.mailcow.email Icon here

      .

      Hope it helps!

      No one is typing