There is a LOT of momentum for Tailwind CSS, and for good reason, as it seems to be a great way to build. I know one of my main clients is looking to go to Tailwind on all upcoming projects. While I know we can use Tailwind alongside UI for Blazor and it's default theme, there will be challenges to marry the two together seamlessly and efficiently. I would LOVE a Telerik UI for Blazor Tailwind theme so that I can continue to use UI for Blazor moving forward.

I would like to be able to add custom icons to the input components in my application

It would be awesome to have "style hooks" for all components - this can be implemented through css variables/properties and would allow for things like dynamic theming including support for dark mode etc.

Because css variables/properties can be read and written through javascript this would open up several new ways for dynamic layouts.

CSS variable/properties are supported on all current browsers except IE 11, and it is possible to implement them with a gracefull fallback.

 

Currently, using npm install --save @progress/kendo-theme-material will get the standard Material Design theme for use across the React Components, but why is Material Black not available this way? (npm install --save @progress/kendo-theme-materialBlack)

Please add a dark theme similar to Kendo UI for Jquery

A new Kendo UI theme which is in compliance with and extends Zurb Foundation styles -> http://foundation.zurb.com/sites/docs/kitchen-sink.html

Some of the Kendo UI font icons unicode numbers are reserved in iOS (e.g e007, e006, etc. ). Thus, with the current implementation of the Kendo UI themes, before the font is loaded, the default icons corresponding to these unicode characters are being displayed. This is especially the case with a slow network connection.

A suggestion to handle the issue is to use a font loading strategy that renders an invisible fallback font face, or a font face observer.

Currently there are 3 application themes: Default, Material, and Bootstrap.
These are nice and helpful however having 3 is quite a bit limiting.

I totally understand that a lot of people will and maybe should create a theme based on their own styles and preferences.
However I honestly think most people probably use a default theme and make small corrections to it in order to suit their needs.

-------

Admin edit: We will be keeping here a list of the suggestions, add your comment which one you would like to see implemented - if it's not on this list, we will add it:

• Dark (black) theme - you can find a basic sample attached below that uses #363636 for background and #d5d5d5 for text colors (two of the main colors for the Black Material theme we have in Kendo), you can further tweak things in the Theme Builder app
• Fluent UI - based on the Fluent UI by Microsoft
• Kendo Themes such as BlueOpal, Silver and Office 365 - you can generate them from the predefined color swatches on the left hand side of the Theme Builder app
• Theme that uses CSS, not SASS variables so that it can be customized at runtime - at the moment, you can generate the needed themes and switch them at runtime as shown here.

------

 

In WPF there are 20 or so styles.
Why only 3 in Blazor when the web is just as easy to style as WPF?

I would like to be able to theme other, non-kendo controls to match kendo controls.  Some controls such as textarea i am able to do this with no problem with a k-textbox class, but i would also like to grandularly be able to set just the background to k-theme-background, foreground to k-theme-foreground, etc. This way if i use properties like this, they update with the kendo theme.

Fluent UI is used in all major Microsoft 365 Apps. 

Why not make a Fluent UI theme for Blazor components? 

https://developer.microsoft.com/en-us/fluentui/#/controls/web

Especially with dark themes such as Metro Black, the traditional browser scrollbar does not really fit. I know scrollbar customization is not available in all browsers, but no fallback support is required (as the css is simply ignored by these browsers), and I believe it would greatly benefit users of the browsers that are supported.

Hi there,

as we are building apps for SharePoint and Office we are in need of a theme that looks like Office 365. Kendo UI for jQuery has that but there's a big shift towards building those apps with Typescript and React. Unfortunately the Kendo UI React package doesn't provide an Office 365 theme so everything we build doesn't integrate well to the look and feel of SharePoint and Office. 

It would be great if you were able to migrate that theme over from jQuery to the React components.

Thanks and kind regards

  Christian

See the ripple animation on the bottom border color when the input gets focus: https://material.io/components/text-fields/#

Is there a plan in the future to support multiple themes when using Kendo components. I can currently implement multiple themes on custom components but this is not possible on Kendo components because they import variables directly from SCSS variables in the stylesheet. Due to the file bundling that takes place in React it is impossible to import two SCSS files with the same variable names. The second import will always override the first file. This could be avoided by using a css in javascript solution(e.g. styled-components). This would allow the user to pass in multiple theme objects by using react props. Is there any plan to migrate to a more modern solution for handling styles with Kendo components.

Let us know whether do you need Office 365-like skin?

Kendo provides a means to build your theme with SCSS variables in the build process. It would be great if it were possible to have these variables scoped to specific contexts, eg <div class="panel-dark"> receives the panel-dark themes, whereas if it is a child of "panel-light" then it receives the panel-light themes. Some of these kinds of features may be on the way with upcoming Custom Element features eg :part, :theme, but could potentially be possible today by having a style transclusion component, something like <kendo-theme-adjuster [styleCallback]="scssVariableSetter()"><my-content></my-content></kendo-theme-adjuster>. We need to support a variety of component themes simultaneously (not just switch back and forth) within a single app, and would like to not need to manually override all the kendo styles in these situations.

All the themes has Mobile support except the kendo.bootstrap-v4, we need the mobile support for new bootstrap v4.

current bootstrap 4 css : https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.bootstrap-v4.min.css

Expected Mobile Support css : https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.bootstrap-v4.mobile.min.css

For now 2 css are used (kendo.common.css and kendo.theme_name.css) for whatever widgets are present on the page. Would be nice to have styles for different widgets separated into single css files (as it is in jQueryUI), so that, if I need only a DropDownList on the page, I include something line "kendo.core.css" and "kendo.dropdown.css" and the whole css framework would not be downloaded each time.

Kendo UI jQuery does already have Metro themes. Pls add this for new Kendo UI, too!

In the new SASS Default v2 theme, you took away too much contrast compared to the original default theme.  Why?  Don't you know that many people find it hard to read things where the text color is too close in value to the color of the background color??  Please stop with the very low contrast.