@equinor/opt-ui-styles v4.6.6

@equinor/opt-ui-styles

Component part of OPT-UI. This package host the components style and the theming system functionality for @equinor/opt-ui-core.

Installation

Install the package in your project directory with:

// with npm
npm install @equinor/opt-ui-styles

// with yarn
yarn add @equinor/opt-ui-styles

Usage of the CSSBaseline

This package offers a global css that acts as a normalize css for all the custom styles in OPT.

To used, it only need to be added once in all the code. The best part to add it is on the root when the app is rendered. For example:

import { CSSBaseline } from "@equinor/opt-ui-styles";

ReactDOM.render(
  <>
    <CSSBaseline />
    <App />
  </>,
  document.getElementById("app")
);

Usage of the ThemeProvider

This package offers a theme provider that allows to have light or dark theme or even a totally different set up of colors.

It can be used in any part of the code but we recommend to add it is on the root when the app is rendered

Light mode

import { ThemeProvider } from "@equinor/opt-ui-styles";

ReactDOM.render(
  <>
    <ThemeProvider mode="light">
      <App />
    </ThemeProvider>
  </>,
  document.getElementById("app")
);

Dark mode

import { ThemeProvider } from "@equinor/opt-ui-styles";

ReactDOM.render(
  <>
    <ThemeProvider mode="dark">
      <App />
    </ThemeProvider>
  </>,
  document.getElementById("app")
);

Note: if you also use the CSSBaseline you should place it inside the ThemeProvider.