@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.9.0 (2024-12-12)

Bug Fixes

• ui-pagination: fix color of pageInput's label (b91cfe1)

Features

• link: add textUnderlineOffset to Link component theme override (2b2a997)
• many: make meta package export every component and type definition (dee9abb)
• shared-types,ui-options,ui-select: allow to change font weight of selected option item in Select (6818928)
• ui-date-input: add support for custom calendar icon (a0fff9d)
• ui-number-input: add customizable icons for increment and decrement buttons (7be2226)