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';

Keywords

FAQs

What is @itwin/itwinui-variables?

Is @itwin/itwinui-variables popular?

Is @itwin/itwinui-variables well maintained?

Package last updated on 17 Aug 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install