category: packages
ui-themes
![Code of Conduct](https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square)
Installation
npm install @instructure/ui-themes
Usage
Before mounting (rendering) your React application:
-
global theming:
import { canvas } from '@instructure/ui-themes'
canvas.use()
-
application level theming:
import { canvas } from '@instructure/ui-themes'
ReactDOM.render(
<InstUISettingsProvider theme={canvas}>
<App />
</InstUISettingsProvider>,
element
)
To override the theme variables:
-
globally:
import { canvas } from '@instructure/ui-themes'
canvas.use({ overrides: { colors: { brand: 'red' } } })
-
application level:
import { canvas } from '@instructure/ui-themes'
const themeOverrides = { colors: { brand: 'red' } }
ReactDOM.render(
<InstUISettingsProvider theme={{ ...canvas, ...themeOverrides }}>
<App />
</InstUISettingsProvider>,
element
)
You can read more about how our theming system works and how to use it here