@instructure/ui-themes

---

category: packages

ui-themes

     

Installation

yarn add @instructure/ui-themes

Usage

Before mounting (rendering) your React application:

import { canvas } from '@instructure/ui-themes'

ReactDOM.render(
  <EmotionThemeProvider theme={canvas}>
    <App />
  </EmotionThemeProvider>,
  element
)

To override the variables:

import { canvas } from '@instructure/ui-themes'
const themeOverrides = { colors: { brand: 'red' } }

ReactDOM.render(
  <EmotionThemeProvider theme={{ ...canvas, ...themeOverrides }}>
    <App />
  </EmotionThemeProvider>,
  element
)

To use the high contrast theme:

import { canvasHighContrast } from '@instructure/ui-themes'

ReactDOM.render(
  <EmotionThemeProvider theme={canvasHighContrast}>
    <App />
  </EmotionThemeProvider>,
  element
)