react-common/docs/theming.md

---
name: Theming
route: /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`
```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.