Evolve Docs

Appearance

Design System ​

The Evolve theme uses Tailwind for styling. You can adjust the tailwind.config.js config like you would in any other Tailwind project.

Defining a base style ​

You can choose between a light or dark base by passing the according value to our theme plugin.

js
plugins: [
    require('./tailwind/theme')({
        theme: 'light', // light or dark
    })
],

Theme Colors ​

Because we use the same color utilities for light and dark modes, you need to setup our theme colors in the tailwind/theme.js config file.

You can define colors for both light and dark styles.

Primary Color ​

By default, you need to define a primary color and a darker and lighter version.

Shades ​

Our color system for grays consists of lighter and stronger variants.

  • The more strong a color is, the more it should stand out from the background.
  • The more light a color is, the more it should fade into the background.

Supporting shades ​

  • The muted color should be a neutral color between strong and light.
  • The negative color should be the opposite color of the background (usually the same or similar color as strongest).
  • The elevated color should be a color to show elevation from the background. (E.g. white on a light-gray background)

Changing theme styles per component ​

Regardless of your base styles, you can still make parts of your design specifically dark or light by using the dark and light classes on any HTML element.

You can also use the theme-invert and theme-current classes to be more dependant on the base style.

html
<!-- Base is set to `light` -->
<html>

    <Card class="dark">
        <!-- Makes card always appear `dark` -->
    </Card>

    <Card class="theme-invert">
        <!-- Makes card appear `dark` or `light`, depending of the base style  -->
    </Card>

</html>