🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

@itwin/itwinui-variables

Package Overview
Dependencies
Maintainers
2
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@itwin/itwinui-variables - npm Package Compare versions

Comparing version

to
3.0.0-dev.1

2

package.json
{
"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