@itwin/itwinui-variables

Installation

npm install @itwin/itwinui-variables

yarn add @itwin/itwinui-variables

Usage

Import in CSS:

@import '@itwin/itwinui-variables';

Or in JS:

import '@itwin/itwinui-variables';

Note: If your project doesn't support export maps, then you might need to import the css file explicitly:
@import '@itwin/itwinui-variables/index.css';

Add the iui-root class to the top of your app.

<body class="iui-root">
  <!-- your application code -->
</body>

Now you can start using the variables:

button {
  background-color: var(--iui-color-background);
  border: var(--iui-color-border);
  color: var(--iui-color-text);
}

By default, the variables use light theme. You can switch to dark theme using data-iui-theme in your HTML.

<body class="iui-root" data-iui-theme="dark">
  <!-- your application code -->
</body>

You can also specify data-iui-contrast to switch to a high contrast theme.

<body class="iui-root" data-iui-theme="dark" data-iui-contrast="high">
  <!-- your application code -->
</body>

If you want the variables to automatically respect the user preferences (color-scheme and contrast), then additionally import os.css:

@import '@itwin/itwinui-variables/os.css';