Enhancing Theme Customization: Empowering Multi-Color Changes with Sass, Style Components, and Kendo ThemeBuilder

[Tejas]

Please provide a solution on how to change theme colors beyond just light and dark modes. I am using Sass and style components, but I would like to implement the ability to select and change multiple colors within a theme. I am also utilizing the Kendo ThemeBuilder to create a custom theme."

If you're looking to implement a theme color change functionality using Sass and style components in conjunction with the Kendo ThemeBuilder, you might want to explore the documentation or resources specific to those tools for detailed guidance on how to achieve your

[Vessy]

Hello, Tejas,

The easiest way to change multiple colors within a theme is to customize the chosen SASS variables and use using the build process of the application to apply the changes after that:

• https://www.telerik.com/kendo-react-ui/components/styling/customizing/#toc-using-the-build-process-of-the-application 

More details about the theme variables can be found here:

• https://www.telerik.com/design-system/docs/themes/theme-default/theme-variables/ 

For convenience, I prepared a sample demonstrating this approach, you can test it here:

• https://stackblitz.com/edit/react-1rqa9u-h1tc9z?file=app%2Fstyles.scss 

Regards,
Vessy
Progress Telerik

[Tejas]

Thanks for the guidance. However, I am facing an issue with a theme builder. I can create a CSS file, but it contains a lot of CSS. I am confused about how to implement theme changes. Could you provide a short demo? I am following your code reference.

[Tejas]

"I have shared a link to the 'grid.css' file, which serves as the main CSS file in my project provided by KendoThemBuilder. This file is imported by the main file in the project.

[Tejas]

https://stackblitz.com/edit/react-1rqa9u-wkjxqb?file=app%2Fmain.jsx

[Vessy]

Hi, Tejas,

Thank you for the provided additional details.

I tested the sample provided in your latest post and saw that the styles exported by the ThemeBuilder are applied successfully to the Grid. Can you, please, elaborate a bit on the exact issue you are facing with it so I can assist you further?

In addition, you can see useful information on the possible ways to use the styles exported from the ThemeBuilder here:

• https://docs.telerik.com/themebuilder/exported-package 

 

[Tejas]

I actually have an issue with a theme switcher. I am using a color picker that allows users to choose a color. Once this color is chosen, it should be applied as a theme. How can this be possible? Could you please provide guidance on writing the code to achieve this

[Vessy]

Hi, Tejas,

I am afraid that there is no a built-in option to create a whole custom kendo-react theme based on a selected custom color.

The optimal approach I can suggest you is to limit the colors in the picker, create a predefined set of custom swatches related to each color, and switch between these custom themes based on the color selected by the client.

[Tejas]

I have read the documentation, but I'm feeling confused about how to implement an optimal approach for limiting color choices to red, green, and blue in my project. I am using the themebuilder to create a customized theme, and this themebuilder provides a single CSS file that I can apply in my project. Could you please guide me on how to switch between at least three different themes, each with distinct red, green, and blue color combinations? I'm finding it challenging to grasp this process despite having read the documentation."

 This type is used in a CSS file in the provided Kendo ThemeBuilder

import React from "react";

import { AppRouter } from "@routes/route";

import "./common/main.css";

const App = () => {

  return <AppRouter />;

};

export default App;

[Vessy]

Hi, Tejas,

You can limit the color choices of the color picker by implementing the approach given in the following article:

• https://www.telerik.com/kendo-react-ui/components/inputs/colorpicker/custom/#toc-customizing-the-palette-popup 

Once you have set the chosen colors, you can associated them to the links to the created custom themes and load the associated styles file when a color is changed.

For example, you can implement the theme-switching approach described in the following blog post:

• https://www.telerik.com/blogs/how-to-change-between-light-dark-mode-dynamically-kendoreact 

I hope the provided information will be helpful for you but do let me know in case I can assist you any further on this matter.

[Tejas]

I have tried this multiple times, but it's not working. After carefully reading the documentation

$kendo-input-bg: #f0f0f0;

$kendo-grid-border-width: 2px;

$kendo-grid-border: #000000;

$kendo-color-primary: #ff69b4;

$kendo-component-bg: #ff0000;

@import "./assist.scss";

[Tejas]

After removing this file, the default orange color is being set

@import "./assist.scss";

 

[Tejas]

This type can change colors is working , but this method was very difficult because it involved writing each class one by one and then changing the color.

$primary: #026299;

.k-button {

  background-color: $primary;

}

 

[Vessy]

Hi, Tejas,

The CSS styles (and the SASS variables) are loaded consecutively, hence every next declaration of a SASS variable value will override the previous one.

Defining only the SASS variables that you would like to override and loading the default kendo-theme after that will allow you to change the primary color of the whole theme without re-writing each component class:

• https://stackblitz.com/edit/react-1rqa9u-x8jvq3?file=app%2Fmain.jsx,app%2Fstyles.scss 

[Tejas]

Hello Vessy,

I'm currently trying to recreate something similar to the StackBlitz project you shared: [StackBlitz Project]

https://stackblitz.com/edit/react-1rqa9u-y92ncv?file=app%2Fstyle.scss,app%2Fmain.jsx

However, while the original StackBlitz project is functioning correctly, I'm encountering some challenges when attempting to replicate the same implementation in my own project.

In my project, I'm using the provided lines of code to import the Kendo UI theme and define custom color variables:

$kendo-color-primary: #030303;
$kendo-color-secondary: #ffc0cb;
@import "@progress/kendo-theme-default/dist/all.css";

Although these lines successfully prevent any errors, they unfortunately don't change the primary color as intended.

I've also discovered documentation that suggests an alternative import format:

@import "@progress/kendo-theme-default/dist/all.scss";

However, despite having properly installed the required Node SCSS package, I'm consistently encountering an error each time I attempt to utilize the .scss file format. Unfortunately, the specific error message remains unavailable within the provided context.

At this point, I'm reaching out in the hopes of finding assistance to resolve this issue and ensure the successful integration of Kendo UI styles using SCSS within my own project.

Best regards,
Tejas Mahajan

[Vessy]

Hello, Tejas,

As a general rule, the SASS variables can be consumed only by a sass file and, unfortunately, there is no to affect the already compiled CSS styles with them. The SASS variables in the generated CSS files are already replaced with their corresponding values, hence they will be ignored.

In case you want to affect an already generated CSS styles, you will need to copy all of the selectors  that should be changed and override the color after the loading of the CSS style (as the latest defined CSS style will be applied).

In case you want to change the default theme colors via SASS variables, you will need to make sure that the sass version of the theme is loaded after that, so the new variable values can be consumed by it. You can find very detailed and useful information about the kendo-theme variables and the proper way to customize them in this article.