You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
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
1.0.0

2

package.json
{
"name": "@itwin/itwinui-variables",
"version": "1.0.0-dev.1",
"version": "1.0.0",
"author": "Bentley Systems",

@@ -5,0 +5,0 @@ "license": "MIT",

@@ -15,18 +15,50 @@ # @itwin/itwinui-variables

As a stylesheet:
Import in CSS:
```html
<link rel="stylesheet" href="@itwin/itwinui-variables" />
```css
@import '@itwin/itwinui-variables';
```
Or, as a CSS import
Or in JS:
```js
import '@itwin/itwinui-variables';
```
> **Note**: If your project doesn't support export maps, then you might need to import the css file explicitly:
>
> ```css
> @import '@itwin/itwinui-variables/index.css';
> ```
Now you can start using the variables:
```css
@import url('@itwin/itwinui-variables');
button {
background-color: var(--iui-color-background);
border: var(--iui-color-border);
color: var(--iui-color-text);
}
```
Or, as a JS import:
By default, the variables use light theme. You can switch to dark theme using `data-iui-theme` in your HTML.
```js
import '@itwin/itwinui-variables';
```html
<body data-iui-theme="dark">
<!-- your application code -->
</body>
```
You can also specify `data-iui-contrast` to switch to a high contrast theme.
```html
<body 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 import `os.css`:
```css
@import '@itwin/itwinui-variables/os.css';
```