Scheduler Theme Problem

[vahid]

Hi,

i use

kendo.common-bootstrap.min.css
kendo.default-v2.min.css (for k-icon k-i-gear k-icon-xl)
kendo.highcontrast.min.css

now Scheduler Background color and text color of days in a week  and alldays are white

also this problem exist in following themes

Highcontrast,Black,MetroBlack,Moonlight

sample

thank you

 

[Neli]

Hello Vahid,

The 'common-bootstrap' style is a common (base) stylesheet that should be used with the LESS Bootstrap theme:

- https://docs.telerik.com/kendo-ui/styles-and-layout/less-themes/overview#common-css-files

The 'default-v2' is a SASS stylesheet. In the links below you can read more about the SASS theme and the different swatches of each theme. 

- https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/overview

- https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/swatches

The corresponding swatch to the theme that you're currently using(v2) is called default-main and it is the one that is used by default. You can take a look at our demos and play with the different swatches 

I would recommend using either SASS or LESS styles. Here is the modified Dojo example where the 'common-bootstrap' stylesheet is removed and the default-main swatch is used. 

Please note also that the LESS based themes will be deprecated starting with 2023 R1 release.

Regards,
Neli
Progress Telerik

[vahid]

thank you for Answer

goto your example and click next day, again Background color and text color of days in a week  and alldays are white

plz help

[Neli]

Hi Vahid,

Please excuse me for misleading you in my previous reply. The 'Highcontrast' is a LESS-based theme. Thus, it should be used with LESS-based common files. If we use the following stylesheets in the Dojo example, then the background in all the cells will be dark.  

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.common.min.css" />    
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.highcontrast.min.css" />

If you decide to use the SASS-based themes, you could use the 'Ocean-Blue' swatch of the Default theme which is build to cover full accessibility contrast standards.

Regards,

Neli

[vahid]

Hi ,Thank you

now your Dojo example the size of icons is not correct

<span class="k-icon k-i-gear k-icon-xs"></span>
<span class="k-icon k-i-gear k-icon-md"></span>
<span class="k-icon k-i-gear k-icon-xl"></span>
<span class="k-icon k-i-gear k-icon-24"></span>

Screenshot

[Neli]

Hi Vahid,

As described in the decumentation linked below - The Less-based themes support only the default values of the new Components Styling Options.

- https://docs.telerik.com/kendo-ui/styles-and-layout/less-themes/less-themes-migration#which-styling-options-are-available-for-the-less-themes

However, if you need to have different sizes of the icons when LESS based theme is used you can apply custom style as in the example below:

<style>
    .k-icon-xl{
      font-size: 64px;
    }
  </style>

Here you will find the modified example. 

Regards,

Neli

[vahid]

thank you so much