Add more UI themes

Web Themes Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 21 Jan 2021 12:40 by ADMIN

Datafyer

Created on: 10 Oct 2019 23:51

Type: Feature Request

Add more UI themes

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?

Duplicated Items

15 comments

ADMIN

Marin Bratanov

Posted on: 21 Jan 2021 12:40

Hi Anders,

At the moment, the best approach is still to create a new theme from the theme builder app (it does have a few predefined black options, for example).

We are gathering feedback on new themes and we have some ideas what to do next. When something is done it will be announced (at lest in the release notes, I would expect that maybe a blog post too, a new theme is a major thing, it takes at least a year to create).

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Anders

Posted on: 21 Jan 2021 12:18

Any news on this?

The project I work on will benefit using Fluent UI a lot. Since it work a lot better for showing a lot of data in grids.

ADMIN

Marin Bratanov

Posted on: 12 Sep 2020 10:41

Thank you for the clarification, Matjaž.

At the moment, you can change themes at runtime with a few lines of code, you can find an example here: https://docs.telerik.com/blazor-ui/knowledge-base/change-theme-runtime

I've added your request to the top-level list as well. In the meantime, you can Subscribe for updates on the Github issue. The SASS themes from the Kendo suite (used in jQuery and Angular, for example), are also what we use in Blazor, so timeframes for them should be similar.

Regards,
Marin Bratanov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Seyfor

Posted on: 12 Sep 2020 06:05

@Marin Bratanov. CSS variables are not the same as SASS variables!

CSS variables allow changing theme in runtime (not compile). And this is something we need out of the box. I don't want to compile 2 versions just to have light and dark theme.

I think web is going this way. Every serious application allow you to change theme on the fly.

You can discuss this further with coworkers from Angular theme. (Github issue, Angular feedback)

Should I open separate issue for this?

ADMIN

Marin Bratanov

Posted on: 07 Sep 2020 07:14

Hi Matjaž,

The themes use SASS variables in their source code to generate the derivative colors and to propagate the few main colors throughout.

The ThemeBuilder app we provide gives you a GUI to do that: https://themebuilder.telerik.com/blazor-ui

If you prefer a manual process, you can build a theme on your own from their source code, read more here: https://docs.telerik.com/blazor-ui/themes/custom-theme#using-the-build-process-of-the-themes and you can find the file with variable for the default theme here.

Regards,
Marin Bratanov
Progress Telerik

Seyfor

Posted on: 06 Sep 2020 11:58

Make theme based on CSS variables.

Bradley Fulton

Posted on: 23 Jun 2020 20:57

Thank you Svetoslav Dimitrov, tried the Default/Blue Opal theme and it looks good. Not exactly the same as Kendo, but better I think.

ADMIN

Svetoslav Dimitrov

Posted on: 23 Jun 2020 07:54

Hello Bradley,

If you make changes to the theme using our Theme Builder you will not have to make changes again. When building a theme the tool provides you with a variables.scss file. It contains the definitions of the colors so even when you upgrade the theme you can have the same color palette and the custom settings applied to the theme will be saved. We advise that with every release we make you update the theme (or, at least, when you upgrade the Telerik components).

Also, in the Theme Builder app you can use predefined color swatches, and they include the BlueOpal and Office265 Kendo themes.

Regards,
Svetoslav Dimitrov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

Bradley Fulton

Posted on: 19 Jun 2020 00:30

I'd also like more styles for Telerik UI for Blazor, like Kendo UI has. My favourite Kendo theme is Blue Opal, but some of my users like Silver and Office 365 instead. Some of the dark themes are nice at night too. I guess I could make mods to your existing themes, but I worry that I'd have to make the changes again with new versions?

Matt

Posted on: 06 Jun 2020 02:31

Just wanted to add in an additional request for Fluent UI. I am working on a project where Fluent UI has become a requirement and I would love to continue using the Telerik Components.

Kelly

Posted on: 18 Apr 2020 22:14

I would like to see a Fluent UI theme.

ADMIN

Marin Bratanov

Posted on: 18 Oct 2019 15:29

What I can say at the moment is that there is a new theme in the works. After that, there will be yet another, probably a dark one.

Regards,
Marin Bratanov
Progress Telerik

UI for Blazor

ADMIN

Marin Bratanov

Posted on: 13 Oct 2019 14:07

Hello Patrick,

I'd say the most distinct one is the Material theme where inputs only get a bottom border and the spacing is a bit larger overall.

The bootstrap theme, when built from the SASS source, can integrate with original Bootstrap variable, so that's a different benefit it provides (on top of matching the default bootstrap style and rounded corners, for example).

The idea of having a black theme is something we have been considering, and we will have your feedback in mind. In fact, I just edited the top post to list the feedback and I will keep it updated so everyone can see the ideas so far. Generally, all our component suites tend to have at least one black (dark) theme, Blazor is simply too new to have everything (we're talking <1 year vs >1 decade for many other products we have).

On matching WPF - theming is done in a very different manner in WPF and the web and I am not sure if we can port themes from there at all. In the meantime, I am attaching here a mod of the default theme that uses #363636 for background and #d5d5d5 for text colors (two of the main colors for the Black Material theme we have in Kendo) so you can take it for a spin. You can input them in the theme builder and start adjusting as well.

Regards,
Marin Bratanov
Progress Telerik

UI for Blazor

Attached Files:

Datafyer

Posted on: 11 Oct 2019 18:08

For the online demos and the theme builder I frankly didn't seem much difference when switching between all the themes.
There is of course some difference however it is overall very slight.

I was thinking there would be more differences along with a dark version.
More similar to the way the WPF Telerik controls are.

ADMIN

Marin Bratanov

Posted on: 11 Oct 2019 07:48

Hi Patrick,

The UI for Blazor suite is very young and we need to focus on providing components and component features so that the suite becomes more helpful.

The three themes we have provide the following:

design compatibility with the two major designs out there - Bootstrap and Material
a generic theme for generic use cases (Default)
the ability to start from these themes and easily color them to match your design (https://themebuilder.telerik.com/blazor-ui) which is something we can never do out-of-the-box, regardless of how many themes we provide, there will always be a difference with the particular design you'll have.

What would be another theme you would want to see that cannot be implemented with the tooling above? We already had one other request for "more themes" (link) but we never got any feedback as to what such a theme should have.

Regards,
Marin Bratanov
Progress Telerik

UI for Blazor