@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
CSSBaseline
Usage of the 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")
);
ThemeProvider
Usage of the 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
.