What's the Easiest way to get the resovled primary color?

[elibroftw]

For custom SVGs, I want to fill theme with the primary color, but I see a difference between how ActionIcon works and the way SVG fill={theme.primaryColor}. What's the best way to ensure the shade is correct?

• primaryColor is set to orange
• primary shade is light: 6, dark: 8 (defaults)
• variant is subtle
• when I set the action icon to primaryColor, I get orange[4] in dark and orange[6] in light
• when I set the action icon to undefined, I get orange[3] in dark and orange[6] in light
• when I set my svg to theme.primaryColor, it never changes color depending on theme. How do I get it to resolve like the default actionicon color does?

[elibroftw]

I'm going to go with

const colorResolved = theme.variantColorResolver({color: theme.primaryColor, theme, variant: 'subtle'}).color;

But I really wish this was simpler? Like we should only supply variant and color.