Custom build of Telerik Kendo Themes

3 Answers 92 Views

General Discussions

René

commented on 26 Jan 2025, 06:20 PM

Thnx, I had to switch from sass-build to pure sass package and now it works.

I have last question. How to override veriables to generate both light/dark themes? I'm building composit of out styles, Bootstrap and Kendo. I works. I have own definition of variables, so I'm generating something like

:root,
[data-bs-theme="light"] {

    --#{$zeteo-prefix}body-color: #{$zeteo-body-color};
    --#{$zeteo-prefix}body-bg: #{$zeteo-body-bg};

}

@if $enable-dark-mode {
    @include color-mode(dark, true) {

        color-scheme: dark;

        --#{$zeteo-prefix}body-color: #{$zeteo-body-color-dark};
        --#{$zeteo-prefix}body-bg: #{$zeteo-body-bg-dark};

    }
}

It uses Bootstrap mixins and combination of overrides to get both themes.

How to do this for Kendo colors? If I understand, there is only light css and dark css, no combined css file.

Zhuliyan

commented on 30 Jan 2025, 07:06 AM

Hi Rene,

One way to customize your Kendo colors to achieve light and dark theming is to use the Color System CSS variables to change their color. Each CSS Variable is available at the root level of your application and can be dynamically modified while the application is running.

The Design System documentation provides more information about all Color System tokens and how their customization affects your application.

Here is a brief example of how you can change between light and dark themes:

.dark {
    --kendo-color-app-surface: #192434;
    --kendo-color-on-app-surface: #ffffff;
    --kendo-color-subtle: #303d4f;
    --kendo-color-surface: #1b2532;
    --kendo-color-surface-alt: #414d60;
    --kendo-color-border: #495361;
    --kendo-color-border-alt: #363b52;
    // other colors...
}

.light {
    --kendo-color-app-surface: #ffffff;
    --kendo-color-on-app-surface: #413f3f;
    --kendo-color-subtle: #6c6868;
    --kendo-color-surface: #fafafa;
    --kendo-color-surface-alt: #ffffff;
    --kendo-color-border: #000000;
    --kendo-color-border-alt: #000000;
    // other colors...
}

After that, the theme can be dynamically changed in the application.

<body class="dark / light">

3 Answers, 1 is accepted

answered on 08 Jan 2025, 03:01 PM

Hello René,

I have read the provided StackOverflow thread, and based on the context and code examples, I can offer some suggestions to resolve your problem. For these suggestions, I am referring to the code snippet you provided:

@import "_variable-overrides.scss";

// --------------------------------------
// Selective build
// --------------------------------------

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

// Core
@include core-styles();

// Typography
@include kendo-typography--styles();

// Generic content
@include kendo-icon--styles();
@include kendo-messagebox--styles();

// Indicators
@include kendo-tooltip--styles();

// etc.

* If you have switched to dart-sass in your project, I recommend avoiding @import annotations in your codebase. Instead, replace all imports with @use and @forward annotations.

* In case you want to override some theme variables, use the new dart-sass method of overriding and configuring them by using with(). Here is a link to the Sass documentation. In your specific case, it should look like this:

@use '@progress/kendo-theme-default/scss/index.scss' as * with (
    //example
    $kendo-tooltip-padding-y: 20px
);
...

* You don't need to include the "@include core-styles();" mixin in the code you provided. This is unnecessary because those styles are already included with your component mixins. Removing the core-styles() mixin will also fix your build failure.

I hope the provided information resolves your problem.

Regards,
Zhuliyan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

answered on 11 Jan 2025, 05:15 PM

Well this is not what doesn't work for me. Let's try this simple scenario.

I have my root scss for building themes:

default.scss

// Import frameworku
@use "../_index.scss";

then there is main scss file with whole "framework":

_index.scss

// Kendo @use"kendo/_index.scss";

// etc.

and then kendo main file for custom build:

kendo/_index.scss

// Import the entire theme
@use '../../node_modules/@progress/kendo-theme-bootstrap/scss/index.scss' as *;

// Indicators
@include kendo-tooltip--styles();

// Native forms
@include kendo-textbox--styles();
@include kendo-textarea--styles();
@include kendo-checkbox--styles();
@include kendo-radio--styles();

// etc.

then trying to compile just this one file and getting errors

> sass scss/themes/default.scss dist/themes/default/styles3.css

Error: Can't find stylesheet to import.
   ╷
19 │ ┌ @forward "@progress/kendo-theme-core/scss/index.scss" with (
20 │ │     // Color System Switch
21 │ │     $kendo-enable-color-system: $kendo-enable-color-system !default,
22 │ │     // Color System
23 │ │     $_default-colors: $kendo-colors,
24 │ │     $kendo-colors: $kendo-colors !default,
25 │ │     // Elevation
26 │ │     $_default-elevation: $kendo-elevation,
27 │ │     $kendo-elevation: $kendo-elevation !default,
28 │ │     // Typography
29 │ │     $_default-font-sizes: $kendo-font-sizes,
30 │ │     $kendo-font-sizes: $kendo-font-sizes !default,
31 │ │     $kendo-font-size: $kendo-font-size !default,
32 │ │ 
33 │ │     $_default-line-heights: $kendo-line-heights,
34 │ │     $kendo-line-heights: $kendo-line-heights !default,
35 │ │     $kendo-line-height: $kendo-line-height !default,
36 │ │
37 │ │     $_default-font-families: $kendo-font-families,
38 │ │     $kendo-font-families: $kendo-font-families !default,
39 │ │     $kendo-font-family: $kendo-font-family !default,
40 │ │
41 │ │     $_default-font-weights: $kendo-font-weights,
42 │ │     $kendo-font-weights: $kendo-font-weights !default,
43 │ │     // Border Radii
44 │ │     $_default-border-radii: $kendo-border-radii,
45 │ │     $kendo-border-radii: $kendo-border-radii !default,
46 │ │     // Spacing
47 │ │     $_default-spacing: $kendo-spacing,
48 │ │     $kendo-spacing: $kendo-spacing !default,
49 │ │ );
   │ └─^
   ╵
  node_modules\@progress\kendo-theme-bootstrap\scss\core\_index.scss 19:1  @forward
  node_modules\@progress\kendo-theme-bootstrap\scss\index.scss 3:1         @use
  scss\kendo\_index.scss 11:1                                              @use
  scss\_index.scss 2:1                                                     @use
  scss\themes\default.scss 7:1                                             root stylesheet

Process finished with exit code 65

So I still have no idea how to use npm kendo package to create custom build as part of our framework (custom styles, Bootstrap, Kendo, ...).

answered on 15 Jan 2025, 04:58 PM

Hi René,

It seems that the issue is related to the build tools you are using to compile the kendo-themes, as they are unable to locate your `node_modules` folder, which is where the missing stylesheet is located.

If you are using Sass, you can try compiling your main file with load-path to the `node_modules` directory with the following example CLI command:

sass --load-path=node_modules fileName.scss fileName.css

Here is the official Sass documentation about setting load-path. - https://sass-lang.com/documentation/cli/dart-sass/#load-path
Utilizing it should resolve this compile error.

Regards,
Zhuliyan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.