Component instances with different variables

[lifeinchords]

Latest Kendo UI Jquery, 2018 R2.

I'm new to Kendo UI customization - I'm not sure if this is a Kendo UI related question, or SCSS specific. I'd like to customize different sets of components with different variables. A simple example,

• a multiselect sit on a white bg,
• the other sits on gray, so the hovers, background, etc are swapped.

#multi-one:

#multi-two:

Right now I have this:

// app.scss
@import 'variables--app';
@import 'variables--kendo';
@import 'node_modules/@progress/kendo-theme-default/scss/multiselect';
@import 'overrides'; 

// variables--kendo.scss
$base-bg: $gray-$200; // colors in variables--app.scss
$hovered-bg: $white;
$hovered-border:  $gray-300;
$input-focused-border: $gray-300;

// overrides.scss
#multi-one .k-multiselect-wrap { 
  /* 
    Not setting anything, my custom variables
    set in variables--kendo.scss are used
  */
}

#multi-two .k-multiselect-wrap { 
    background: white !important;
    // etc..
}

Is there a way to do this without having overrides.scss? Something like

@import 'variables--kendo--light-on-dark';
@import 'variables--kendo--dark-on-light';
@import 'node_modules/@progress/kendo-theme-default/scss/multiselect';

This wouldn't work because whatever is declared last would take precedence, but is there another strategy for doing this?

I can't see if I'm just missing something simple, or if this is complex/not possible.

[gyoshev]

I am afraid that at this time, having multiple versions of the component themes in a single file is not possible, as theme colors are global variables and can have only one value. A workaround is to create two CSS files with the different themes and merge them through post-processing.

A way to resolve this problem has been logged in #450

[lifeinchords]

Thanks for letting me know and for the suggestion, will give it a go. Looking forward to the potential theme structure changes to make this easier.