[Bug]Change Primary Color -> Some Colors Dont Update Till Refresh

[bakes82]

When you change primary colors it doesnt seem to setting the theme manager until a full refresh, at least thats what I think is happening.

Before refresh

After refresh

[bakes82]

I tracked it down heres what I did to get it work for now.

LayoutServices.cs

public async Task UpdateUserPreferences(UserPreferences.UserPreferences preferences)
    {
        _userPreferences = preferences;
        IsDarkMode = _userPreferences.DarkLightTheme switch
        {
            DarkLightMode.Dark => true,
            DarkLightMode.Light => false,
            DarkLightMode.System => _systemPreferences=true,
            _ => IsDarkMode
        };
        IsRTL = _userPreferences.RightToLeft;
        PrimaryColor = _userPreferences.PrimaryColor;
        SecondaryColor = _userPreferences.SecondaryColor;
        BorderRadius = _userPreferences.BorderRadius;
        DefaultFontSize = _userPreferences.DefaultFontSize;
        DarkModeToggle = _userPreferences.DarkLightTheme;
        
        
        /*CurrentTheme.Palette.Primary = PrimaryColor;
        CurrentTheme.PaletteDark.Primary = PrimaryColor;
        CurrentTheme.Palette.Secondary = SecondaryColor;
        CurrentTheme.PaletteDark.Secondary = SecondaryColor;
        CurrentTheme.LayoutProperties.DefaultBorderRadius = BorderRadius + "px";
        CurrentTheme.Typography.Default.FontSize = DefaultFontSize.ToString("0.0000", CultureInfo.InvariantCulture) + "rem";*/
        await _userPreferencesService.SaveUserPreferences(_userPreferences);
        //OnMajorUpdateOccured();
        SetBaseTheme(Theme.Theme.ApplicationTheme());
    }

[neozhu]

@bakes82,

Thank you so much for your contribution.
It indeed solves part of the problem. However, the issue still persists if the page is manually refreshed (F5). Could you please continue to look into this and find a solution for the refresh problem? Your help is highly appreciated!

[bakes82]

It works fine using a new solution and changing the UpdateUserPreferences method, going from yellow to green, press f5 hover over the tab, it shows the correct light green color.

Only other minor change is to add the font size line to the SetBaseTheme

public void SetBaseTheme(MudTheme theme)
    {
        CurrentTheme = theme;
        CurrentTheme.Palette.Primary = PrimaryColor;
        CurrentTheme.PaletteDark.Primary = PrimaryColor;
        CurrentTheme.LayoutProperties.DefaultBorderRadius = BorderRadius + "px";
        CurrentTheme.Typography.Default.FontSize = DefaultFontSize.ToString("0.0000", CultureInfo.InvariantCulture) + "rem"; //Added
        OnMajorUpdateOccured();
    }

[neozhu]

F5 refresh causes the CSS values to reset to default, and I'm not sure why. Thank you very much for your efforts

[bakes82]

Yeah it works fine in my base project, ive done some other updates to the layoutservices to resolve some other issues, so maybe it has to do with you setting the secondary colors instead of just using whatever is in the theme, but I made those changes after I believe.

LayoutServices.cs

using System.Globalization;
using Blazor.Server.UI.Services.UserPreferences;
using Microsoft.IdentityModel.Tokens;

namespace Blazor.Server.UI.Services.Layout;

public class LayoutService
{
    private bool _systemPreferences;
    private readonly IUserPreferencesService _userPreferencesService;
    private UserPreferences.UserPreferences _userPreferences=new();
    public DarkLightMode DarkModeToggle = DarkLightMode.System;
    public bool IsRTL { get; private set; } = false;
    public bool IsDarkMode { get; private set; } = false;
    public string PrimaryColor { get; set; } //= "#2d4275";
    public string SecondaryColor { get; set; } //= "#ff4081ff";
    public double BorderRadius { get; set; } = 4;
    public double DefaultFontSize { get; set; } = 0.8125;
    public MudTheme CurrentTheme { get; private set; } = new();


    public LayoutService(IUserPreferencesService userPreferencesService)
    {
        _userPreferencesService = userPreferencesService;
    }

    public void SetDarkMode(bool value)
    {
        IsDarkMode = value;
    }

    public async Task<UserPreferences.UserPreferences> ApplyUserPreferences(bool isDarkModeDefaultTheme)
    {
        _userPreferences = await _userPreferencesService.LoadUserPreferences();
        if (_userPreferences != null)
        {
            IsDarkMode =  _userPreferences.DarkLightTheme switch
            {
                DarkLightMode.Dark => true,
                DarkLightMode.Light => false,
                DarkLightMode.System => isDarkModeDefaultTheme,
                _ => IsDarkMode
            };
            IsRTL = _userPreferences.RightToLeft;
            PrimaryColor = _userPreferences.PrimaryColor;
            //SecondaryColor = _userPreferences.SecondaryColor;
            BorderRadius = _userPreferences.BorderRadius;
            DefaultFontSize = _userPreferences.DefaultFontSize;
            CurrentTheme.Palette.Primary = PrimaryColor;
            CurrentTheme.PaletteDark.Primary = PrimaryColor;
            //CurrentTheme.Palette.Secondary = SecondaryColor;
            //CurrentTheme.PaletteDark.Secondary = SecondaryColor;
            CurrentTheme.LayoutProperties.DefaultBorderRadius = BorderRadius + "px";
            CurrentTheme.Typography.Default.FontSize = DefaultFontSize.ToString("0.0000", CultureInfo.InvariantCulture) + "rem";
        }
        else
        {
            IsDarkMode = isDarkModeDefaultTheme;
            _userPreferences = new UserPreferences.UserPreferences { IsDarkMode = IsDarkMode };
            await _userPreferencesService.SaveUserPreferences(_userPreferences);
        }
        return _userPreferences;
    }

    public event EventHandler? MajorUpdateOccured;

    private void OnMajorUpdateOccured() => MajorUpdateOccured?.Invoke(this, EventArgs.Empty);

    public  Task OnSystemPreferenceChanged(bool newValue)
    {
        _systemPreferences = newValue;
        if (DarkModeToggle == DarkLightMode.System)
        {
            IsDarkMode = newValue;
            OnMajorUpdateOccured();
        }
        return Task.CompletedTask;
    }
    public async Task ToggleDarkMode()
    {
        switch (DarkModeToggle)
        {
            case DarkLightMode.System:
                DarkModeToggle = DarkLightMode.Light;
                IsDarkMode = false;
                break;
            case DarkLightMode.Light:
                DarkModeToggle = DarkLightMode.Dark;
                IsDarkMode = true;
                break;
            case DarkLightMode.Dark:
                DarkModeToggle = DarkLightMode.System;
                IsDarkMode = _systemPreferences;
                break;
        }

        _userPreferences.DarkLightTheme = DarkModeToggle;
        await _userPreferencesService.SaveUserPreferences(_userPreferences);
        OnMajorUpdateOccured();
    }
    public async Task ToggleRightToLeft()
    {
        IsRTL = !IsRTL;
        _userPreferences.RightToLeft = IsRTL;
        await _userPreferencesService.SaveUserPreferences(_userPreferences);
        OnMajorUpdateOccured();
    }
    
    public async Task SetRightToLeft()
    {
        if (!IsRTL)
            await ToggleRightToLeft();
    }
    
    public async Task SetLeftToRight()
    {
        if (IsRTL)
            await ToggleRightToLeft();
    }

    public void SetBaseTheme(MudTheme theme)
    {
        CurrentTheme = theme;
        
        if (!PrimaryColor.IsNullOrEmpty())
        {
            CurrentTheme.Palette.Primary     = PrimaryColor;
            CurrentTheme.PaletteDark.Primary = PrimaryColor;
        }

        CurrentTheme.LayoutProperties.DefaultBorderRadius = BorderRadius + "px";
        CurrentTheme.Typography.Default.FontSize = DefaultFontSize.ToString("0.0000", CultureInfo.InvariantCulture) + "rem";
        OnMajorUpdateOccured();
    }
    public async Task UpdateUserPreferences(UserPreferences.UserPreferences preferences)
    {
        _userPreferences = preferences;
        IsDarkMode = _userPreferences.DarkLightTheme switch
        {
            DarkLightMode.Dark => true,
            DarkLightMode.Light => false,
            DarkLightMode.System => _systemPreferences=true,
            _ => IsDarkMode
        };
        IsRTL = _userPreferences.RightToLeft;
        PrimaryColor = _userPreferences.PrimaryColor;
        //SecondaryColor = _userPreferences.SecondaryColor;
        BorderRadius = _userPreferences.BorderRadius;
        DefaultFontSize = _userPreferences.DefaultFontSize;
        DarkModeToggle = _userPreferences.DarkLightTheme;
        
        await _userPreferencesService.SaveUserPreferences(_userPreferences);
        SetBaseTheme(Theme.Theme.ApplicationTheme());
    }
}

UserPreferences

namespace Blazor.Server.UI.Services.UserPreferences;

public class UserPreferences
{
    /// <summary>
    /// Set the direction layout of the docs to RTL or LTR. If true RTL is used
    /// </summary>
    public bool RightToLeft { get; set; }

    /// <summary>
    /// If true DarkTheme is used. LightTheme otherwise
    /// </summary>
    public bool IsDarkMode { get; set; }
    public string        PrimaryColor    { get; set; }
    public string        SecondaryColor  { get; set; }
    public double        BorderRadius    { get; set; } = 4;
    public double        DefaultFontSize { get; set; } = 0.8125;
    public DarkLightMode DarkLightTheme  { get; set; }
}
public enum DarkLightMode
{
    System = 0,
    Light = 1,
    Dark = 2
}

[bakes82]

The colors didnt convert well in the GIF but I assure you they are correct :).

[neozhu]

If you'd like to participate in this project, I can add you to the Collaboration Team.

[bakes82]

I dont think you need to set the lighten/darken as they appear to be set automatically.

[neozhu]

Could you please create another PR (Pull Request) # to fix this issue? That way, I can test it online. Thank you very much

[Bram1903]

Hey @bakes82,

I wanted to extend my appreciation for your assistance – it's been quite the journey dealing with the customization aspect of this project. Collaborating with someone else, we managed to tackle an issue where adjusting the font size under a non-default culture would send the entire panel into a frenzy. Fortunately, that problem has been resolved (check out #470).

As you're experiencing firsthand, the customization facet still has its fair share of hiccups. Your engagement in this project and the support you're providing are greatly valued. I look forward to making further strides!

Kind regards,
Bram

[bakes82]

@neozhu Is there still an issue to look at I pulled the main, it works just fine for me in Opera, no changes needed.

@Bram1903 Im much less "customize" focused as once I set the theme colors via code that will probably be it. I would think most of this should be set via a tenant admin, and a "user" can only maybe toggle font size and maybe a secondary color. The color options a user can change should be set per tenant via a list of hex codes, it should probably be dictionay<string, list> so if you allow to set the primary maybe that has diff secondary colors per primary. Then store the object as part of the tenant or 2nd table, have ability to export/import. I suppose you could get real fancy and just loop over the props of the theme color object make a quick page that renders color pickers for each element and boom everything customizable. But for end users I would probably disable any customization. the font size thing doesnt seem to work on everything, as I assume things would be be set on the mud elements and they dont seem to be.

Also just looking at the products razor page there is with mud styles instead of just using the mud grid, but in other pages you have mud grids instead, there is just a mashup of things not being consistent from one page/feature to another. Method names also dont seem to align always. Like OnClick="OnDeleteChecked" This is a button to delete the selected items so I would think DeleteSelectedOnClick. But the code in OnDeleteChecked is also 99% of the same code as OnDelete. Also some thing could be mapped instead of setting each field.

[Bram1903]

@bakes82,

Hi again! Yes, there is barely any consistency, I noticed that as well. I just got involved into this project fairly recent, and have mainly concentrated on things like multiple databases support. This project first only worked with SQL Server, however I prefer PostgreSQL.

Besides the above I tried to change up the way we store our time, but hadn't yet have the time to actually implement it yet. I did try something on the logs page, where I convert the time to the user their local timezone by using a library which converts our stored UTC time to theirs.

There are many things we can do to improve this project, and I'm certainly looking forward to do so!