@itwin/itwinui-variables NPM

@itwin/itwinui-variables

Installation

npm install @itwin/itwinui-variables

Usage

Import in CSS:

@import '@itwin/itwinui-variables';

Or in JS (if using a bundler):

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

Specify a theme ("light" or "dark") by adding a data-iui-theme attribute to the top of your app.

<body data-iui-theme="light">
  <!-- 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);
}

You can also specify data-iui-contrast to switch to a high contrast version of the current theme.

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

If you want the variables to automatically respect the user preferences (prefers-color-scheme and prefers-contrast), then you need to additionally import os.css, and use data-iui-theme without a value. For example:

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

<body data-iui-theme>
  <!-- your application code -->
</body>

css theme itwinui itwin design system design token

@infinitebrahmanuniverse/nolb-_itw @everything-registry/sub-chunk-475 @zalastax/nolb-_itw @itwin/core-react @itwin/breakdown-trees-react @itwin/appui-layout-react @itwin/appui-react @itwin/components-react @itwin/imodel-components-react

2 months ago

6 months ago

10 months ago

8 months ago

9 months ago

9 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago