@instructure/canvas-high-contrast-theme

canvas-high-contrast-theme

A high contrast UI component theme made by Instructure Inc.

This theme meets the WCAG 2.1 Level AAA minimum contrast requirements.

Installation

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

Usage

Before mounting (rendering) your React application:

• application level theming:

import { theme } from '@instructure/canvas-high-contrast-theme'

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

To override the variables:

import { theme } from '@instructure/canvas-high-contrast-theme'
const themeOverrides = { spacing: { xxxSmall: '0.3rem' } }

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