@instructure/canvas-high-contrast-theme
TypeScript icon, indicating that this package has built-in type declarations

9.0.1 • Public • Published

category: packages

canvas-high-contrast-theme

npm MIT License Code of Conduct

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: { colors: { brand: 'red' } } })
  • application level:

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

Readme

Keywords

none

Package Sidebar

Install

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

Weekly Downloads

15,108

Version

9.0.1

License

MIT

Unpacked Size

138 kB

Total Files

14

Last publish

Collaborators

  • bpjatacsuk
  • ajmal-esa
  • razorsh4rk
  • david.wenzlick.inst
  • robinkuss64
  • ardena
  • jcflow
  • jguardadom
  • jdewar
  • xcudder
  • ericsaupe
  • joyenjoyer
  • omarpr
  • cguanzon-inst
  • sarahgerard
  • jacksonhowe
  • jakeoeding
  • camray
  • cjs118
  • matyas.szabo
  • herrtopi
  • angela.gomba
  • kyler-instructure
  • instuici
  • eschiebel
  • maths22
  • jcrystal
  • skacsmark
  • itadmins
  • quizzesuici
  • instructure-toolsmiths-service-user
  • aogata-inst
  • instout