Scheme UI
Description
scheme-ui is a low-level component library that lets you easily set up components that can be light or dark color scheme (or any other scheme modes). It's a wrapper on top of RebassJS, which is another wrapper on top of Styled Components, and also uses the theming conventions of styled-system. The main component that controls the schemes is SchemeProvider, which controls the current color scheme. It also exports a useColors hook that exposes the current scheme colors.
Stack
React
Libraries
RebassJS
Styled Components
Example
The quick brown fox jumps over the lazy dog
<SchemeProvider scheme={scheme} colorSchemes={schemes}>
<Flex
bg="background"
justifyContent="center"
flexDirection="column"
alignItems="center"
p={5}
sx={{ borderRadius: 10, gap: 3 }}
>
<P>The quick brown fox jumps over the lazy dog</P>
<Button variant="transparent" onClick={handleChangeTheme}>
Change theme
</Button>
</Flex>
</SchemeProvider>T. 2023