Tokens are CSS variables.

Clutch has Tailwind CSS color tokens built-in.

This means when you want to style an element like setting its background color, in addition to manually picking a color or pasting a hex code you could also select one from a list like this:

You can filter the tokens by colors (in this case) by typing the name of the color. Ex.: blue, orange etc.

There are other types of tokens besides colors. Here’s the full list:

Custom tokens can be created in two ways:

1. by setting a value for a property (optional), clicking +, entering a name and hitting

   ⏎ or Save token.

2. in the Tokens manager by clicking the Tokens icon (color palette) in the App bar.

How to toggle between dark and light mode in the builder

It is possible to create a token, set the values of any CSS property like color for both light and dark modes in the token manager. Your Clutch site will automatically follow the user’s system color mode and appear in light or dark mode depending on the time of the day.

1. Select Site layout in the Navigator.

2. Typography → Color. Select black or enter your desired dark color’s hex code. Click +, give it a name of say, foreground and hit return.

3. Background → Color. Select white or enter your desired light color’s hex code. Click +, give it a name of say, background and hit return.

4. Open tokens manager and set the opposite colors under Dark mode (screenshot below).

If you notice any element with dark text that should remain dark (light the text in the light yellow background in the video below) even in dark mode, set its text color.

Tokens manager

In the tokens manager, clicking on a token brings up its context menu.