@instructure/ui-themes

category: packages

ui-themes

Installation

npm install @instructure/ui-themes

Usage

Before mounting (rendering) your React application:

• application level theming:

  ---
  type: code
  ---
  import canvas from '@instructure/ui-themes'
  
  ReactDOM.render(
    <InstUISettingsProvider theme={canvas}>
      <App />
    </InstUISettingsProvider>,
    element
  )
  

• (DEPRECATED) global theming:

  ---
  type: code
  ---
  import canvas from '@instructure/ui-themes'
  
  canvas.use()
  

To override the theme variables:

• (DEPRECATED) globally:

  ---
  type: code
  ---
  import canvas from '@instructure/ui-themes'
  
  canvas.use({ overrides: { colors: { brand: 'red' } } })
  

• application level:

  ---
  type: code
  ---
  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.16.3 (2025-04-30)

Bug Fixes

• ui-date-input,ui-avatar: add ref support to functional components (6a6ba49)
• ui-focusable: fix Focusable example using the wrong ARIA tag (c88b21c)
• ui-modal: set inverseBackground to grey100100 (2ef4a6b)
• ui-options,ui-menu: improve hover animations (fed526c)
• ui-table: fix table crashing in stacked layout when using falsy children (cb1b2ae)
• ui-time-select,ui-simple-select,ui-select: make Select accessible for iOS VoiceOver (b501a7b)