Handle when user clicks <RadzenAppearanceToggle />

Radzen.Blazor Components
1

I'm keying off current theme to determine text values. This works fine but if I click the button it keeps the text value the same (as it was last referenced). If someone clicks on the data grid again it'll help fix everything but I'm wondering if I can force a change when the appearance toggle happens.

    string GetTeamNameLabelStyle(SpreadGamePickHelper data, string columnName)
    {
        bool isSelected = data.IsAwayPicked && columnName == "away" ||
                          data.IsHomePicked && columnName == "home" ||
                          data.IsKeyPick && columnName == "key";
        int marginSize = 8;

        string currentTheme = ThemeService.Theme;
        bool isDarkMode = currentTheme.Contains("dark");
        string textColor = "";
        if (isDarkMode)
        {
            if (isSelected)
            {
                textColor = "color: var(--rz-base-dark)";
            }
            else
            {
                textColor = "color: var(--rz-base-light)";
            }
        }
        else
        {
            if (isSelected)
            {
                textColor = "color: var(--rz-base-lighter)";
            }
            else
            {
                textColor = "color: var(--rz-base-darker)";
            }
        }

        if (Layout.IsSmallScreenSize())
        {
            marginSize = 3;
        }
        return $"margin-left: {marginSize}px; vertical-align: middle;{textColor}";
    }

OR I want a better way to have a more distinct cell selection. Currently it's a very minor dark green when selecting a cell on a grid (following this).

I'd much prefer it to be a more bold choice and for the text color to be switched appropriately so it is readable.

        args.Attributes.Add("style", $"background-color: var(--rz-primary-light)");

I haven't found a clean way to use existing classes to make this happen.

2

I suggest handling the ThemeChanged event of the ThemeService instead. Check this thread for more info: RadzenImage light/dark path?

1 Like
3

Worked brilliantly! Thanks for the tip!