Chart Color Scheme

It would be really nice to be able to adjust dashlet chart color schemes as an administrator without having to go to a developer to code it. Some of the defualt color scheme's do not have enough variation.

  • Hi Leaya, that would definitely be helpful! There is actually an open enhancement request for this feature: bug #46555. If you want to share your desire for the feature, you could contact Support so they can add your request for tracking purposes. Then Sugar will have a more accurate understanding of how many people are interested. Slight smile

    -Brenda

  • this enhancement seems like a no brainers that nearly all sugar users would want to see in play. 

    And really shouldn't be too complex? Not sure why it  hasn't been implemented.   

  • Hi Leaya, i'm with you here - I work in Presales at Sugar and this comes up quite a bit. Be great if there was a selection of different themes you could pick from and then have a custom option.

    In the meantime, here is an example custom.less file you can use to edit the colours. It needs to be put in the instance name/custom/themes directory of your instance. You will need to check/match up the elements to your instance but it might point you in the right direction.

    @cstm_purple1 : #5955a5;
    @cstm_purple2 : #42468c;
    @cstm_purple3: #7b7da6;
    @cstm_purple4: #606ba6;
    @cstm_purple5: #a4a6bf;
    @cstm_purple6: #e6e6f2;
    @cstm_purple7: #f5f5f5;
    @cstm_purple8: #9997c9;
    @cstm_purple9: #8c88d8;
    @cstm_purple10: #5955a5;
    @cstm_purple11: #353262;
    @cstm_purple11: #474483;
    @cstm_purple12: #a5a1f1;
    @cstm_purple13: #6955a5;
    @cstm_purple14: #7955a5;
    @cstm_white: #ffffff;
    @cstm_grey1: #747474;
    @cstm_grey2: #d9d4d0;
    
    // @mint => @sc-fill00, @sc-stroke00
    .sc-fill00, .sc-stroke00 {
      fill: @cstm_purple1;
      background-color: @cstm_purple1;
      color:  @cstm_purple1;
      stroke:  @cstm_purple1;
    }
    // @green => @sc-fill01, @sc-stroke01
    .sc-fill01, .sc-stroke01 {
      fill: @cstm_purple4;
      background-color: @cstm_purple4;
      color:  @cstm_purple4;
      stroke:  @cstm_purple4;
    }
    // @army => @sc-fill02, @sc-stroke02
    .sc-fill02, .sc-stroke02 {
      fill: @cstm_grey1;
      background-color: @cstm_grey1;
      color:  @cstm_grey1;
      stroke:  @cstm_grey1;
    }
    // @yellow => @sc-fill03, @sc-stroke03
    .sc-fill03, .sc-stroke03 {
      fill: @cstm_purple5;
      background-color: @cstm_purple5;
      color:  @cstm_purple5;
      stroke:  @cstm_purple5;
    }
    // @orange => @sc-fill04, @sc-stroke04
    .sc-fill04, .sc-stroke04 {
      fill: @cstm_purple8;
      background-color: @cstm_purple8;
      color:  @cstm_purple8;
      stroke:  @cstm_purple8;
    }
    // @red => @sc-fill05, @sc-stroke05
    .sc-fill05, .sc-stroke05 {
      fill: @cstm_purple2;
      background-color: @cstm_purple2;
      color:  @cstm_purple2;
      stroke:  @cstm_purple2;
     }
    // @pink => @sc-fill06, @sc-stroke06
    .sc-fill06, .sc-stroke06 {
      fill: @cstm_purple9;
      background-color: @cstm_purple9;
      color:  @cstm_purple9;
      stroke:  @cstm_purple9;
    }
    // @purple => @sc-fill07, @sc-stroke07
    .sc-fill07, .sc-stroke07 {
      fill: @cstm_grey2;
      background-color: @cstm_grey2;
      color:  @cstm_grey2;
      stroke:  @cstm_grey2;
    }
    // @night => @sc-fill08, @sc-stroke08
    .sc-fill08, .sc-stroke08 {
      fill: @cstm_purple10;
      background-color: @cstm_purple10;
      color:  @cstm_purple10;
      stroke:  @cstm_purple10;
    }
    // @blue => @sc-fill09, @sc-stroke09
    .sc-fill09, .sc-stroke09 {
      fill: @cstm_purple3;
      background-color: @cstm_purple3;
      color:  @cstm_purple3;
      stroke:  @cstm_purple3;
    }
    //@ocean => @sc-fill10, @sc-stroke10
    .sc-fill10, .sc-stroke10 {
      fill: @cstm_purple11;
      background-color: @cstm_purple11;
      color:  @cstm_purple11;
      stroke:  @cstm_purple11;
    }
    //@pacific => @sc-fill11, @sc-stroke11
    .sc-fill11, .sc-stroke11 {
      fill: @cstm_purple12;
      background-color: @cstm_purple12;
      color:  @cstm_purple12;
      stroke:  @cstm_purple12;
    }
    //@teal => @sc-fill12, @sc-stroke12
    .sc-fill12, .sc-stroke12 {
      fill: @cstm_purple13;
      background-color: @cstm_purple13;
      color:  @cstm_purple13;
      stroke:  @cstm_purple13;
    }
    //@coral => @sc-fill13, @sc-stroke13
    .sc-fill13, .sc-stroke13 {
      fill: @cstm_purple14;
      background-color: @cstm_purple14;
      color:  @cstm_purple14;
      stroke:  @cstm_purple14;
    }
    
    .module-list .megamenu>.dropdown .module-name {
      color: @cstm_grey1;
    }
    
    .module-list .megamenu>.dropdown.active .module-name {
      color: @cstm_purple1;
      font-weight: 500;
      text-decoration: none;
      font-family: "OpenSans", Helvetica, Arial, sans-serif;
      font-size: 14px;
      -webkit-transition: all 150ms ease-in-out;
      -o-transition: all 150ms ease-in-out;
      transition: all 150ms ease-in-out;
    }
    
    .navbar .megamenu>.dropdown:hover {
      background: @cstm_white;
      color: @cstm_purple1;
    }
    
    .navbar .megamenu>.dropdown.active .btn-group:not(.open):not(.home) {
      background-color: @cstm_white;
    }
    
    // Option 1
    //.btn-primary {
    //  color: #fff;
    //  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    //  background-color: @cstm_purple2;
    //  background-image: linear-gradient(to bottom, @cstm_purple1, @cstm_purple1);
    //  background-repeat: repeat-x;
    //  border-color: @cstm_purple1 @cstm_purple1 @cstm_purple2;
    //  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    //}
    //
    //.btn-primary:not(.disabled):not(.btn-invisible):hover {
    //  box-shadow: none;
    //  border: solid 1px @cstm_purple4;
    //  background: @cstm_purple3;
    //};
    
    // Option 2
    
    .btn-primary {
      color: @cstm_purple1;
      text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
      background-color: @cstm_purple1;
      background-image: linear-gradient(to bottom, @cstm_white, @cstm_white);
      background-repeat: repeat-x;
      border-color: @cstm_purple1;
    }
    
    .btn-primary:not(.disabled):not(.btn-invisible):hover {
      box-shadow: none;
      border: solid 1px @cstm_purple2;
      background: @cstm_purple1;
    }
    
    .navbar .megamenu>.dropdown .dropdown-menu li a:focus, .navbar .megamenu>.dropdown .dropdown-menu li a:hover {
      color: #fff;
      background: @cstm_purple1;
    }
    
    a, a:hover{
      color: @cstm_purple1;
    }
    
    .headerpane .btn-toolbar .btn-group .btn:not(.btn-primary), .headerpane .btn-toolbar .btn-group .btn:not(.btn-primary).dropdown-toggle .fa {
      color:@cstm_purple1;
    }
    
    .dropdown-menu li>a:hover, .dropdown-menu li>a:focus, .dropdown-menu li>button:hover, .dropdown-menu li>button:focus, .dropdown-menu li>span>button:hover, .dropdown-menu li>span>button:focus, .dropdown-menu li>span>a:hover, .dropdown-menu li>span>a:focus, .dropdown-menu .active>a, .dropdown-menu .active>span>a, .dropdown-menu .active>a:hover, .dropdown-menu .active>a:focus, .dropdown-menu .active>span>a:hover, .dropdown-menu .active>span>a:focus {
      color: #fff;
      text-decoration: none;
      background: @cstm_purple1;
      filter: none;
    }
    
    .btn.btn-link {
      color: @cstm_purple1;
    }
    
    .btn-group .dropdown-toggle:active .btn.btn-primary.dropdown-toggle, .btn-group.open .btn.btn-primary.dropdown-toggle {
      background-color: @cstm_purple1;
    }
    
    .filter-view .choice-related, .filter-view .choice-filter {
      background: @cstm_purple1;
    }
    
    .megamenu>.dropdown .btn-group:not(.open)>.btn:focus, .megamenu>.dropdown .btn-group:not(.open) .btn.module-name:focus {
      outline: dotted 1px @cstm_purple1;
    }
    
    .module-list .megamenu>.dropdown .module-name:focus, .module-list .megamenu>.dropdown .module-name:hover {
      color: @cstm_purple1;
    }
    
    a:link, a:visited {
      color: @cstm_purple1;
    }
    
    .btn.btn-link:not(.disabled):hover {
      color: @cstm_purple1;
    }
    
    .btn>.fa {
      color: @cstm_purple1;
    }
    
    .navbar .megamenu>.dropdown:hover .btn-group>.btn, .navbar .megamenu>.dropdown:hover .btn-group>.btn:hover {
      color: @cstm_purple1;
    }
    
    .select2-results li div:hover, .select2-results .select2-highlighted {
      background: @cstm_purple1;
    }
    
    textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
      border-color: @cstm_purple1 !important;
    }
    
    footer .logo img {
      max-height: 29px;
    }