New theme with the new Design system

[Pierre]

I currently convert all my Kendo themes (linked to my custom theme in my application) to use the new Design system.

I got 2 scss files by theme. ex: pink theme in dark and in light. Then a service switches the generated css file at runtime to reflex the theme user selected. 

So I try to change one of them with the new way to compile Kendo themes like:

@use 'sass:map';
@use '@progress/kendo-theme-default/scss/index.scss' as *;

$kendo-colors: map.merge(
  $kendo-colors,
  (
    app-surface: #1e293b,
    on-app-surface: #ffffff,
  )
);
// Use the 'k-generate-color-variations' function to generate
// all shades of the 'primary', 'secondary' and the 'base' color.
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('primary', #818cf8, 'default'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('secondary', #475569, 'default'));

@include kendo-theme--styles();

That works great, but all background (grid, textbox... ) are for light themes (background white). With the old system, we can add:
$theme-type: dark

But tha do not work anymore.

So how to create a theme with the same primary and seconfady color, but in a light and dark theme.

Thanks,

 

[Zhuliyan]

Hello Pierre,

I have answered this topic in your opened private ticket (1676343), but for the community, I will also share my response here:

To apply a dark theme with the new Color System, you need to configure the Main Variable Group (app-surface, on-app-surface, subtle, surface, surface-alt, border, border-alt) as well. This configuration defines the core variables used across Kendo components, such as background and text colors, for both light and dark themes. You can find more information about the Main Variable Group, its variables, and their role, as well as information about the other variable groups here.

Below is an example of how you can set up the Main Variable Group for a dark theme:

@use 'sass:map';
@use '@progress/kendo-theme-default/scss/index.scss' as *;

$kendo-colors: map.merge(
  $kendo-colors,
  (
    app-surface: #1e293b,
    on-app-surface: #ffffff,
    subtle: #334155,
    surface: #1f2937,
    surface-alt: #374151,
    border: #475569,
    border-alt: #2e344b
  )
);

$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('primary', #818cf8, 'default'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('secondary', #475569, 'default'));

@include kendo-theme--styles();

This overrides the default values of the Main Variable Group, and sets values for a dark-orientated theme. Here is an example of how the grid, with its hover row state, looks like after those configurations:

We can further extend that and add a mechanism to change the Main Variable Group based on a variable like $isDark. For example here is an example.scss file with the following content:

@use "sass:map";
@use "@progress/kendo-theme-default/scss/index.scss" as *;

$isDark: false !default;

$kendo-colors-main-group-dark: (
  app-surface: #1e293b,
  on-app-surface: #ffffff,
  subtle: #334155,
  surface: #1f2937,
  surface-alt: #374151,
  border: #475569,
  border-alt: #2e344b,
);
$kendo-colors-main-group-light: (
  app-surface: #ffffff,
  on-app-surface: #3d3d3d,
  subtle: #666666,
  surface: #fafafa,
  surface-alt: #ffffff,
  border: #000000,
  border-alt: #000000,
);

$kendo-colors: map.merge(
  $kendo-colors,(
  if($isDark, $kendo-colors-main-group-dark, $kendo-colors-main-group-light))
);

$kendo-colors: map.merge( $kendo-colors, k-generate-color-variations("primary", #818cf8, "default"));
$kendo-colors: map.merge( $kendo-colors, k-generate-color-variations("secondary", #475569, "default"));

@include kendo-theme--styles();

We can then, use this example.scss file in another and configure the $isDark theme variable, depending on our needs:

@use "example.scss" as * with (
    $isDark: true
);

Another way to customize your Main Variable Group variables or any other group variable in the new Color System is to use their CSS variables to change their color runtime.
Each CSS variable is available at the root level of your application and can be dynamically modified while the application is running.



Here is a brief example:

//css or sass file

.dark {
    --kendo-color-app-surface: #1e293b;
    --kendo-color-on-app-surface: #ffffff;
    --kendo-color-subtle: #334155;
    --kendo-color-surface: #1f2937;
    --kendo-color-surface-alt: #374151;
    --kendo-color-border: #475569;
    --kendo-color-border-alt: #2e344b;
}

.light {
    --kendo-color-app-surface: #ffffff;
    --kendo-color-on-app-surface: #3d3d3d;
    --kendo-color-subtle: #666666;
    --kendo-color-surface: #fafafa;
    --kendo-color-surface-alt: #ffffff;
    --kendo-color-border: #000000;
    --kendo-color-border-alt: #000000;
}

<body class="dark / light">

Regards,
Zhuliyan
Progress Telerik