The dynamic theme component (from the sample page) does not handle the updated themes

[koksal.basar]

Hi team,

I open a new topic because the previous one became huge

I used your approach to create a theme component and it works.

But it has two issues that one of solved by me but the second is waiting.

1) (Solved) When I use the original approach the local change does not work.

• When the theme is changed from the theme manager in RBS the pages keep the given default theme on the screen from the ThemeService.cs.

ThemeService.cs
...
public const string DefaultTheme = "default";
...

By bypassing the Href variable the issue can be solved. The updated code is as follows.

Theme.razor

@inject NavigationManager NavigationManager
@inject ThemeService ThemeService

<link href="@Href" rel="stylesheet" />

@code {
    string Href;

    bool IsPremiumTheme => ThemeService.CurrentTheme == "fluent" || ThemeService.CurrentTheme == "fluent-dark" || ThemeService.CurrentTheme == "material-dark" || ThemeService.CurrentTheme == "material3" || ThemeService.CurrentTheme == "material3-dark";
    string Href_ => IsPremiumTheme ? $"/css/{ThemeService.CurrentTheme}-base.css" : $"_content/Radzen.Blazor/css/{ThemeService.CurrentTheme}-base.css";

    protected override void OnInitialized()
    {
#if !RADZEN
        Href = Href_;
        ThemeService.Initialize(NavigationManager);
#endif
    }
}

2) (Unsolved) When the theme component is active If some changes are made to the theme manager on RBS these changes are reflected in RBS's design editor but it can not be active on the browser (even after published).

To reproduce the issue;
i) Open the Index.razor
ii) Change something on the selected theme, for example, swatches. This change will be reflected in the design editor.
iii) Save the page (not necessary).
iv) Run the project.

The design editor and the page on the browser will not be the same.

I couldn't find a solution.
*) I cleaned the bin and obj folders.
*) Cleand the browser cache.
etc. etc.

I need some suggestions,
Thanks,

[korchev]

It is not clear how the Theme.razor component is used.

The theme editor saves the changes in the application css file (usually wwwroot/css/site.css). You can check if this is the case in your application. Look for

:root {
}

One thing to keep in mind - changes made to one theme will apply to every theme if you have dynamic theme switching. I am not sure if there is much sense of having both as changes made to a dark theme may look off in a light theme.

[koksal.basar]

Sorry @korchev.

I prepared a simple example but I forgot to share it with you on my previous post. You can check it. There is nothing about site.css in this code. I think it's the same as what you did in your demo project. This code only changes the CSS file name.

I thought RBS does everything about CSS customization. It's not clear to me now. Is RBS changing only the site.css while the customization? If it's, is that meaning I can not create more than one customized theme using RBS?

In this case, the running application theme does not change because when the theme component is used the application access to original CSS file, not the site.css. Am I correct?

If it's, if I overwrite the site.css to the original CSS file when I made customizing can I manage this?

Thanks,
ThemeTest.zip (1.1 MB)

[korchev]

@koksal.basar

Is RBS changing only the site.css while the customization?

Yes. It uses CSS variables to customize the current theme. It cannot modify the CSS file of theme as some of them are embedded in the Radzen.Blazor nuget package and are read-only.

@koksal.basar

If it's, is that meaning I can not create more than one customized theme using RBS?

Yes, you cannot customize different themes. You can customize only the current one with RBS.

@koksal.basar

In this case, the running application theme does not change because when the theme component is used the application access to original CSS file, not the site.css. Am I correct?

If it's, if I overwrite the site.css to the original CSS file when I made customizing can I manage this?

Thanks,
ThemeTest.zip (1.1 MB)

No. Both CSS files are included. The site.css file is included after the theme and thus can override the default CSS variables to change the theme.

@koksal.basar

If it's, if I overwrite the site.css to the original CSS file when I made customizing can I manage this?

If you customize a theme (for example by changing the primary color) this customization will apply to any other theme. Remember that RBS does not modify the theme CSS file e.g. material-base.css. It just sets CSS variables.

I don't think RBS supports out of the box what you are trying to do at the moment. If you want to customize some predefined themes you can create separate customization files for every theme (that contain that :root {} selector) and load them after the theme CSS file.

<link href="@Href" rel="stylesheet" />
<link href="@HrefCustom" rel="stylesheet" />

string HrefCustom => $"/css/{ThemeService.CurrentTheme}-custom.css";

[koksal.basar]

It's more clear now. But here is another question. What about the components? site.css root part keeps the main color declarations.

I'm asking because I'm using deeply customized CSS in my projects. I hope RBS makes easier this process for me.

The following sample is from RADZEN Studio age. This is reverse engineering work. I've created a sample page with Radzen components and then deep diving with developer tools. I wrote a separate CSS and override the originals. This is the long way to customizing.

[korchev]

@koksal.basar

What about the components? site.css root part keeps the main color declarations.

All customizations (colors, components etc.) are stored in this selector.

[koksal.basar]

I can be missing something. Sorry for that.
But how can I manage the following declarations with this root selector? There is no information about this component's values. Am I wrong?

This is a part of your theme manager and working well. Only I can not understand where is stored.

[korchev]

@koksal.basar

But how can I manage the following declarations with this root selector?

Are those values changed from the default for the theme?

I am still not sure what the actual problem is. Please describe what you are trying to achieve and I can tell if it is supported or not.

Here is how customizing the Border radius of the Badge works:

[koksal.basar]

Hi @korchev,

I share my apology one more time. Because I stole your time.

When you share the site.css file that overwrites the values of the original theme, I checked it and I've seen the color variables that are already changed by me. I've imagined, as a dumb, the root selector is a static section. But this section is dynamic as it must be. I had to beware of this.

@korchev

I can tell if it is supported or not.

So, you already support what I need.

Thanks,

[korchev]

If I understood your requirements correctly you want two things:

1. Ability for your users to change the theme. This is done via ThemeService and Theme.razor.
2. You want to customize all themes that your users can pick from.

If this is correct then read ahead.

The second point isn't directly supported. However you can create a separate css for every theme customization and paste there the :root {} selector from site.css which RBS will create when you customize a theme. Then you can load both the theme CSS file e.g. material-base.css and materal-base-custom.css from the Theme.razor.

[koksal.basar]

@korchev

If I understood your requirements correctly you want two things:

Absolutely you understood me.

@korchev

The second point isn't directly supported.

It's really good enough that RBS gives me. Please remember I was doing this before via developer tools.

@korchev

However you can create a separate css for every theme customization and paste there the :root {} selector from site.css which RBS will create when you customize a theme. Then you can load both the theme CSS file e.g. material-base.css and materal-base-custom.css from the Theme.razor.

You shared this solution in your second answer but at that time it was not clear to me.

Thanks one more time,