Theming

Preview the theme

To preview the theme in this documentation, you can use the theme switcher in the top left corner.
You can also use the keyboard shortcut: option+t.

How does it work

Theming is controlled with central CSS variables, so we don't have to manually adjust the styles of each component.
When toggling a theme the themable colors will adjust automatically.

For example, toggle the theme and see how the shade colors are affected:

Notice how the semantic colors like background and content are always set on the same shade number, regardless of theme. This is because the palette is designed in a way that allows us to design for both themes simultaneously.

When to use theming

Use dark theme to compose a section with a dark background.

Example

In this example the card top section is designed over a dark background, so we should only apply the dark theme to that section. Notice how all colors ajust accordingly including button states.In this example, the top section of the card is designed on a dark background, so we only need to apply the dark theme to that section. Notice how all the colors adjust accordingly, including the button states.

    <Box
      className="grn-card-container"
      maxWidth="320px"
    >
      <Box
        className="grn-card"
        radius="var(--grn-card-radius)"
        shadow="m"
        overflow="hidden"
      >
        <Box
          data-theme="dark"
          backgroundColor="background"
          padding="l"
          aspectRatio="5/4"
          position="relative"
        >
          <Box
            position="absolute"
            top="m"
            right="m"
            zIndex="2"
          >
            <IconButton icon={<IconHeart />} />
            <IconButton icon={<IconShare />} />
            <IconButton icon={<IconEllipsis />} />
          </Box>
          <Arrange
            zIndex="1"
            position="relative"
            width="100%"
            height="100%"
            alignContent="center"
            justifyContent="center"
            justifyItems="center"
            autoFlow="row"
            gap="m"
          >
            <Button variant="accent">Edit</Button>
            <Text align="center">
              <Text>Last edited 2h ago</Text>
              <Text color="content2">By you</Text>
            </Text>
          </Arrange>
          <div
            style={{
              position: 'absolute',
              backgroundRepeat: 'no-repeat',
              backgroundSize: '100%',
              backgroundPosition: 'center',
              height: '100%',
              width: '100%',
              left: 0,
              top: 0,
              backgroundImage: 'url(https://source.boringavatars.com/marble/400/abcd?square&&colors=e5eaa4,a8c4a2,69a5a4,616382,66245b)',
            }}
          />
          <Box
            position="absolute"
            top="0"
            left="0"
            width="100%"
            height="100%"
            backgroundColor="backdrop"
          />
        </Box>
        <Box padding="var(--grn-card-padding)" backgroundColor="floatingBackground">
          <Text>
            Sell your services
          </Text>
          <Text color="content2">
            Template
          </Text>
        </Box>
      </Box>
    </Box>

Theming in CSS

Use themeable colors, meaning colors that will change when the theme changes.
Themeable colors are:

Non themeable colors are:

bases

const Demo = styled.div`
  background-color: var(--grn-color-background);
  color: var(--grn-color-content);
  border: var(--grn-color-shade3);
`;

<Demo data-theme="dark" />;