When the EuiText and EuiIcon are wrapped in a <EuiThemeProvider color="dark" /> their color should be white. Both components are already converted to Emotion so I'm expecting that they should adapt their styles to the EuiThemeProvider.
The components use color: inherit; and fill: currentColor;. So I'm not sure if this is really an issue or a lack of documentation. Somewhere in our docs maybe we should say that some components inherit the parent color. So when the color mode changes we also need to change the parent color so that components can inherit the right color... 🤷🏽♀️
But as a user, I would expect the color to change... And everything to work out of the box.
I created a CodesandBox that shows the issue :
When the EuiText and EuiIcon are wrapped in a
<EuiThemeProvider color="dark" />their color should be white. Both components are already converted to Emotion so I'm expecting that they should adapt their styles to the EuiThemeProvider.The components use
color: inherit;andfill: currentColor;. So I'm not sure if this is really an issue or a lack of documentation. Somewhere in our docs maybe we should say that some components inherit the parent color. So when the color mode changes we also need to change the parent color so that components can inherit the right color... 🤷🏽♀️But as a user, I would expect the color to change... And everything to work out of the box.
I created a CodesandBox that shows the issue :