Guides

Styling with color mode

Spor is ready for color mode using Chakra's built in functionality. This guide will explain how our tokens works with the styling system available.

When contributing and/or updating Spor, you will probably encounter mode or ...brandBackground("default", props) at some point.

mode is a built in functionality from Chakra, taking in 2 parameters:

mode(light, dark)(props)

This will decide the colors used on light or dark mode. Usually it's the same definition of color, but ends with either "light" or "dark". This comes from our color tokens.

In our setup, we have a certain number of variants for our components. These use a specific color for each state, both on light and dark mode. Therefore, we have created a folder "utils" in the theme-folder, which holds most cases for use of colormode-safe styling.

import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
import { State, Subset } from "./types";

type BrandBackgroundState = Subset<State, "default" | "hover" | "active">;

export function brandBackground(
  state: BrandBackgroundState,
  props: StyleFunctionProps,
) {
  switch (state) {
    case "active":
      return {
        backgroundColor: mode(
          "brand.surface.active.light",
          "brand.surface.active.dark",
        )(props),
      };
    case "hover":
      return {
        backgroundColor: mode(
          "brand.surface.hover.light",
          "brand.surface.hover.dark",
        )(props),
      };
    case "default":
    default:
      return {
        backgroundColor: mode(
          "brand.surface.default.light",
          "brand.surface.default.dark",
        )(props),
      };
  }
}

Example of usage

These rarely needs to be changed, as it follows the designsystems color-system.

Example of usage

Button has many different variants and states, where everything that is needed is defined using our color-system-utils.

primary: (props) => ({
  ...brandBackground("default", props),
  ...brandText("default", props),
  _hover: {
    ...brandBackground("hover", props),
  },
  _active: {
    ...brandBackground("active", props),
  },
}),
secondary: (props) => ({
  ...accentBackground("default", props),
  ...accentText("default", props),
  _hover: {
    ...accentBackground("hover", props),
  },
  _active: {
    ...accentBackground("active", props),
  },
}),