Check correct configuration for a custom theme

Support
#1

I, I tried to customize the theme, using the instructions.

Unfortunately, my theme is ignored by the app.
What am I missing?

Here are the relevant code fragments:

application.properties

jmix.ui.theme.name=max
jmix.ui.theme-config=com/ey/it/ptt_manager/theme/max-theme.properties

jmix.ui.theme.modes = dark
jmix.ui.theme.defaultModeToUse = dark

max-theme.properties

@include=io/jmix/ui/theme/halo-theme.properties

styles.scss

@import "max-defaults";
@import "addons";
@import "max";

.max {
  @include addons;
  @include max;
}

**max.scss**

@import "../halo/halo";

/* the commented tex was one of my several attempts
@mixin max {
  @include halo;
  &.mdark {
      @include max-dark;
    }
    }
*/

@mixin max {
@include halo;

    /* Basic */
    --app-background-color: #23232F;
    --background-color: #2E2E38;
    --background-color_rgb: 46, 46, 56;
    --dim-color: #747480;
    --error-color: #B9251C;
    --primary-color: #FFE600;
    --primary-color_rgb: 255, 230, 0;
    --secondary-color: #3A3A4A;
    --secondary-color_rgb: 58, 58, 74;
    --success-color: #168736;
    --text-main-color: #FFFFFF;
    --warning-color: #ED6500;

    /* Common */
    --dim-color-shade-1: #67676F;
    --dim-color-shade-2: #5B5B62;
    --error-color-shade-1: #9F1F19;
    --error-color-shade-2: #8D1C16;
    --error-dim-color: #E24E46;
    --primary-color-shade-1: #E6CF00;
    --primary-color-shade-2: #CCB800;
    --primary-dim-color: #B3A100;
    --secondary-color-shade-1: #31313F;
    --secondary-color-shade-2: #2D2D39;
    --secondary-dim-color: #696986;
    --success-color-shade-1: #14762E;
    --success-color-shade-2: #126929;
    --success-dim-color: #29DB59;

    /* Button */
    --button-error-disabled-color: #7C1813;
    --button-secondary-active-color: #2D2D39;
    --button-secondary-disabled-color: #262631;
    --button-secondary-focused-border-color: #3A3A4A;
    --button-secondary-hover-color: #31313F;
    --button-success-disabled-color: #105C24;

    --primary-contrast-text-color: #3A3A4A;

}

I attached a picture with the studio-generated file structure for the theme.
2021-12-16 17_41_07-PTT_Manager – max-theme.properties com.company.PTT_Manager.main

Many thanks,

Massimo

#3

Hello!

Could you clarify what theme you need to extend? It seems you extend Halo theme but in the max.scss you use CSS variables that are work only in Helium theme.

#4

sorry, I was trying to extend helium, but I made several attempts, trying to troubleshoot the problem.

Afterwards, I was able to find the solution, the issue was not in the file names, but in colours presets.
The application properties files define two colours presets: light and dark. If I simply put the custom variables in the theme.scss file, they are ignored, because the default preset is applied, and it overrides my custom variables.
Defining the custom presets with the names “light” and “dark” in my theme file, everything went ok. This was the final file:

@import "../helium/helium";

@mixin maxhe {
  @include helium;
    &.dark {
      @include maxhe-dark;
    }
    &.light {
      @include maxhe-light;
    }
}

@mixin maxhe-dark {
/* Basic */
    --app-background-color: #23232F;
    --background-color: #2E2E38;
...
...
}
@mixin maxhe-light {
/* Basic */
...