Open siva3378 opened 4 years ago
I found a way to deal with this at the moment by providing colour prop to the Text component and managing that colour in the theme. For example color="primary"
.
export default function App() {
return (
<div className="App">
<ThemeProvider theme={theme}>
<Box>
<Text variant="h1">Heading 1 text</Text>
<Text color="primary">Default text</Text> /* text color gets switched as per mode*/
<br />
<br />
<Button>Test button</Button>
</Box>
</ThemeProvider>
</div>
);
}
🐛 smooth-ui should accept xstyled theme specification for text
Default component's color should take value from the theme object. All the variants should also inherit the "text" color from theme object and then overrides its own variant color
To Reproduce
Steps to reproduce the behaviour:
Add text key as per xstyled theme specification here: https://xstyled.dev/docs/color-modes/
Expected behaviour
light
<Text>
component should get color oftheme.text
dark
<Text>
component should get color oftheme.modes.dark.text
Link to reproduction
https://codesandbox.io/s/smooth-ui-theme-should-respect-xstyled-specifications-wlwzb
Paste the results here:
Dark mode
Light mode