@instructure/canvas-high-contrast-theme

category: packages

canvas-high-contrast-theme

A high contrast UI component theme for Canvas LMS made by Instructure Inc.

This theme meets the WCAG 2 Level AA 4.5:1 minimum contrast requirements.

Installation

npm install @instructure/canvas-high-contrast-theme

Usage

Before mounting (rendering) your React application:

• global theming:

  import { theme } from '@instructure/canvas-high-contrast-theme'
  
  theme.use()
  

• application level theming:

  import { theme } from '@instructure/canvas-high-contrast-theme'
  
  ReactDOM.render(
    <InstUISettingsProvider theme={theme}>
      <App />
    </InstUISettingsProvider>,
    element
  )
  

To override the variables:

• globally:

  import { theme } from '@instructure/canvas-high-contrast-theme'
  
  theme.use({ overrides: { spacing: { xxxSmall: '0.3rem' } } })
  

• application level:

  import { theme } from '@instructure/canvas-high-contrast-theme'
  const themeOverrides = { spacing: { xxxSmall: '0.3rem' } }
  
  ReactDOM.render(
    <InstUISettingsProvider theme={{ ...theme, ...themeOverrides }}>
      <App />
    </InstUISettingsProvider>,
    element
  )