@itwin/itwinui-variables
Advanced tools
Comparing version
{ | ||
"name": "@itwin/itwinui-variables", | ||
"version": "2.1.0-dev.0", | ||
"version": "3.0.0-dev.1", | ||
"author": "Bentley Systems", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
@@ -9,6 +9,2 @@ # @itwin/itwinui-variables | ||
```console | ||
yarn add @itwin/itwinui-variables | ||
``` | ||
## Usage | ||
@@ -22,3 +18,3 @@ | ||
Or in JS: | ||
Or in JS (if using a bundler): | ||
@@ -35,5 +31,5 @@ ```js | ||
Add the `iui-root` class to the top of your app. | ||
Specify a theme ("light" or "dark") by adding a `data-iui-theme` attribute to the top of your app. | ||
```html | ||
<body class="iui-root"> | ||
<body data-iui-theme="light"> | ||
<!-- your application code --> | ||
@@ -53,6 +49,6 @@ </body> | ||
By default, the variables use light theme. You can switch to dark theme using `data-iui-theme` in your HTML. | ||
You can also specify `data-iui-contrast` to switch to a high contrast version of the current theme. | ||
```html | ||
<body class="iui-root" data-iui-theme="dark"> | ||
<body data-iui-theme="dark" data-iui-contrast="high"> | ||
<!-- your application code --> | ||
@@ -62,14 +58,12 @@ </body> | ||
You can also specify `data-iui-contrast` to switch to a high contrast theme. | ||
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: | ||
```css | ||
@import '@itwin/itwinui-variables'; | ||
@import '@itwin/itwinui-variables/os.css'; | ||
``` | ||
```html | ||
<body class="iui-root" data-iui-theme="dark" data-iui-contrast="high"> | ||
<body data-iui-theme> | ||
<!-- your application code --> | ||
</body> | ||
``` | ||
If you want the variables to automatically respect the user preferences (color-scheme and contrast), then additionally import `os.css`: | ||
```css | ||
@import '@itwin/itwinui-variables/os.css'; | ||
``` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
27869
0.32%557
0.18%65
-8.45%