> ## Documentation Index
> Fetch the complete documentation index at: https://docs.truststack.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming

We following color tokens from Google's Material Design. This means you can have consistent theming when using the TrustStack web components, as well as those available from Google.

You can use the [Material Theme Builder](https://material-foundation.github.io/material-theme-builder/) to generate your own theme. Specify a color palette, and export.

Use the provided variables in your CSS file to apply the theme to your components. Below is an example color palette from the Material Theme Builder, based on the TrustStack's primary brand color (#E75A7C)

```css theme={null}
:root {
  --md-sys-color-primary: #8e4957;
  --md-sys-color-surface-tint: #8e4957;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #ffd9de;
  --md-sys-color-on-primary-container: #713340;
  --md-sys-color-secondary: #75565b;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #ffd9de;
  --md-sys-color-on-secondary-container: #5c3f44;
  --md-sys-color-tertiary: #795831;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffddbb;
  --md-sys-color-on-tertiary-container: #5f411c;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #93000a;
  --md-sys-color-background: #fff8f7;
  --md-sys-color-on-background: #22191b;
  --md-sys-color-surface: #fff8f7;
  --md-sys-color-on-surface: #22191b;
  --md-sys-color-surface-variant: #f3dddf;
  --md-sys-color-on-surface-variant: #524345;
  --md-sys-color-outline: #847375;
  --md-sys-color-outline-variant: #d6c2c4;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-inverse-surface: #382e2f;
  --md-sys-color-inverse-on-surface: #feedee;
  --md-sys-color-inverse-primary: #ffb2be;
  --md-sys-color-primary-fixed: #ffd9de;
  --md-sys-color-on-primary-fixed: #3a0716;
  --md-sys-color-primary-fixed-dim: #ffb2be;
  --md-sys-color-on-primary-fixed-variant: #713340;
  --md-sys-color-secondary-fixed: #ffd9de;
  --md-sys-color-on-secondary-fixed: #2c1519;
  --md-sys-color-secondary-fixed-dim: #e4bdc2;
  --md-sys-color-on-secondary-fixed-variant: #5c3f44;
  --md-sys-color-tertiary-fixed: #ffddbb;
  --md-sys-color-on-tertiary-fixed: #2b1700;
  --md-sys-color-tertiary-fixed-dim: #ebbe90;
  --md-sys-color-on-tertiary-fixed-variant: #5f411c;
  --md-sys-color-surface-dim: #e7d6d7;
  --md-sys-color-surface-bright: #fff8f7;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #fff0f1;
  --md-sys-color-surface-container: #fbeaeb;
  --md-sys-color-surface-container-high: #f5e4e5;
  --md-sys-color-surface-container-highest: #f0dee0;
}
```