Nightclub Party Music

    @itwin/itwinui-variables

    1.0.0 • Public • Published

    @itwin/itwinui-variables

    Installation

    npm install @itwin/itwinui-variables
    yarn add @itwin/itwinui-variables

    Usage

    Import in CSS:

    @import '@itwin/itwinui-variables';

    Or in JS:

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

    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 data-iui-theme="dark">
      <!-- your application code -->
    </body>

    You can also specify data-iui-contrast to switch to a high contrast 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 (color-scheme and contrast), then import os.css:

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

    Install

    npm i @itwin/itwinui-variables

    DownloadsWeekly Downloads

    501

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    27.4 kB

    Total Files

    5

    Last publish

    Collaborators

    • imodeljs
    • colinkerr