How to change DataGrid Pager active caret color?

[nvassell]

I've really been enjoying the library so far, however, when clicking the items per page dropdown in the material DataGrid the caret color changes to purple and I can't figure out how to change it.

I have tried:

• Creating a black / white / yellow theme

@code {
    private Theme theme = new Theme
    {
        BarOptions = new ThemeBarOptions
        {
            // Navbar options
        },
        BackgroundOptions = new ThemeBackgroundOptions
        {
            Primary = "#ffff00", // neon yellow, so it pops better
        },
        BreakpointOptions = new ThemeBreakpointOptions
        {
            // Idk what this one is
        },
        ColorOptions = new ThemeColorOptions
        {
            Primary = "#ffff00", // neon yellow, so it pops better
        },
        TextColorOptions = new ThemeTextColorOptions
        {
            Primary = "#000000", // Black
            Secondary = "#ffffff", // White
        },
        InputOptions = new ThemeInputOptions
        {
            CheckColor = "#ffff00", // newon yellow
        },
    };
} 

• Editing elements in material.css
• Editing elements in blazorise.css
• Editing elements in blazorise.material.css

Before:

After:

How do I change the caret color for that dropdown that is circled above? Thanks!

[stsrki]

Hmm, I was able to find the styles for the bottom line of the select.

But for caret, I could not find it. It's not even in the shadow DOM. I will need to look at the source of https://github.com/djibe/material to find where it is applied.

[stsrki]

Found it! It's controlled by the background-image and svg image color.

[domn1995]

I see it now in _text-field.scss:172:

 &:focus { // stylelint-disable-line order/order
      background-image: escape-svg(url('data:image/svg+xml;charset=utf8,<svg fill="#{selection-theme-color()}" transform="rotate(180)" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 0" to="180 0 0" dur="250ms"/></svg>'));
    }

Looks like it's grabbing the svg fill from #{selection-theme-color()}.

Sorry I'm not too familiar with the library. Is this value something we can edit client-side or does Blazorise need to push a change for that caret to be affected by the theming API?

[stsrki]

I think I can add it to the Blazorise ThemeGenerator.