Skip to main content

CSS Variables

WebJET Elements uses CSS variables as the main way to customize the appearance. The built-in light.css and dark.css files define default tokens, and your application can override them with custom values.

Setting the values​

Global variables​

Typically set global variables to :root, or to a theme container such as .wje-theme-dark, .wje-theme-light or [data-theme="dark"].

/* Application-wide variables */
:root {
  --wje-background: #ffffff;
  --wje-color: #1f2937;

  --wje-font-family: inter, system-ui, sans-serif;
}

Variables in components​

You can also override a variable just for a specific component. In this way, you can modify the appearance of all instances of the element without interfering with its implementation.

/* Sets the border color of all buttons */
wje-button {
  --wje-button-border-color: #0af4fc;
}

/* Sets the border color of all buttons with id 'custom' */
#custom {
  --wje-button-border-color: #0af4fc;
}

Variables via Javascript​

You can also change CSS variables dynamically using JavaScript, for example when switching the theme or branding for tenants.

document.documentElement.style.setProperty('--wje-background', '#f8fafc');
document.documentElement.style.setProperty('--wje-color', '#0f172a');

Getting value​

Using CSS​

The var() function is used to use the value of a variable in CSS. You can also specify a fallback value for it.

#custom {
  --wje-button-border-color: var(--wje-color-primary-9, #0af4fc);
}

Using JavaScript​

To read the resulting value, use getComputedStyle(), not just el.style. So you also get the values that came from the loaded topic.

const rootStyles = getComputedStyle(document.documentElement);
const background = rootStyles.getPropertyValue('--wje-background').trim();

WebJET Elements variables​

Customizing components using variables​

Each component exposes its own set of CSS variables. For a full list, see the CSS Custom Variables section of its API page. For example, for a button you can edit values such as --wje-button-border-color, --wje-button-border-radius or --wje-button-outline-width.

Customizing an application using global variables​

For the whole application, global tokens such as:

  • --wje-background
  • --wje-color
  • --wje-border-color
  • --wje-font-family
  • --wje-color-primary-1 to --wje-color-primary-11

For more detailed information, see Colors, Templates, and Dark Mode.

Content