react-common/docs/theming.md

name	route
Theming	/theming

Theming

The components can be styled through CSS custom properties, meaning browsers that support custom properties are expected to support theming for Tesseract components. It is a huge advantage for Tesseract to have used this feature because of its ease of use upon application, compared to using preprocessors such as Sass, which employs its own language as well as potentially increasing the size of the bundled stylesheets.

Properties

Tesseract uses a few properties as much as possible in order to produce lightweight themes.

Colors

color-accent

Default value: blue

The accent color of the components. Used to designate components that can be interacted with.

color-fg

Default value: black

The reference color for text, borders, and anything in the foreground.

color-bg

Default value: white

The reference color for anything in the background.

color-active

Default value: Highlight

The version of the accent color for activated (i.e. clicked or focused) components.

Fonts

font-family-base

Default value: sans-serif

The base font family. Used for body text.

Usage

You should have a global theme rule applied to :root. Below is an example of using a global theme to apply styles:

theme.css

:root {
  /* This will be our reference background color */
  --color-negative: #eee;
  /* This will be our reference foreground color */
  --color-positive: #222;
  --color-accent: #ba6a9c;
  --color-active: #f90;
  --font-family-body: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui;
}

@media (prefers-color-scheme: dark) {
  /* Dark mode, because why not? */
  :root {
    --color-negative: #222;
    --color-positive: #eee;
    --color-accent: #C78AB3;
  }
}

:root {
  /* We use our reference colors to set global fg and bg, but we could apply them to other elements later on.
   *
   * See below for example usage.
   */
  --color-bg: var(--color-negative, white);
  --color-fg: var(--color-positive, black);

  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-family-body, sans-serif), sans-serif;
}

/*
 * Here is an example usage of overriding bg and fg.
 */
.inverted-colors {
  --color-bg: var(--color-positive, black);
  --color-fg: var(--color-negative, white);
}

Since the components use the same styles, the created theme will be applied to them as well.