custom/themes/custom.less not parsed

I try to add our companies branding (colors, spacing, logo etc) to a sugarCRM v12 instance. I created a custom.less file in custom/themes and I tried to modify some of the predefined variables. Namely, like this:

@primaryContentBackground : linear-gradient(to right, #017588, #026f85);
@navbarBackground : @primaryContentBackground;

I did a quick repair, clear cache, refresh and.. nothing. No change, the file is simply ignored. What am I doing wrong (PS: in V12 the recomanded way of customizing CSS changed a bit compared to v10)

  • The navbar background is overrided by the value in styleguide/themes/clients/base/default/variables.php

    In Sugar 12 you can add a custom file to override its value for light mode:

    $lessdefs = array(
        'colors' => array(
            'NavigationBar' => "#017588",

    I am not sure if you can make it works with a gradient (it failed on my first attempt).


    I am not sure why the @primaryContentBackground does not work, sorry, I usually changes css from javascript.
    Changing the light theme value does works but probably changes more backgrounds than the ones you are targeting.

    .sugar-light-theme {
      // Indicate to the browser to use system colour scheme for radio buttons and dropdowns
      color-scheme: light;
      --primary-content-background: linear-gradient(to right, #017588, #026f85);