@instructure/ui-themes

---

category: packages

ui-themes

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

Changelog

10.4.1 (2024-10-28)

Bug Fixes

• docs screenreader alerts are no longer screenreader focusable (c225853)
• ui-buttons: add back ic-brand theme tokens to basebutton (ff21f05)
• ui-toggle-details: do not put aria-expanded and aria-controls on the toggle if there is nothing to toggle (82094c3)
• update license (1c039d9)