Scheme UI

Hero banner image

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