@instructure/ui-themes
TypeScript icon, indicating that this package has built-in type declarations

9.0.1 • Public • Published

category: packages

ui-themes

npm  MIT License  Code of Conduct

Installation

npm install @instructure/ui-themes

Usage

Before mounting (rendering) your React application:
  • global theming:

    import { canvas } from '@instructure/ui-themes'
    
    canvas.use()
  • application level theming:

    import { canvas } from '@instructure/ui-themes'
    
    ReactDOM.render(
      <InstUISettingsProvider theme={canvas}>
        <App />
      </InstUISettingsProvider>,
      element
    )
To override the theme variables:
  • globally:

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

    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

Readme

Keywords

none

Package Sidebar

Install

npm i @instructure/ui-themes

Weekly Downloads

30,828

Version

9.0.1

License

MIT

Unpacked Size

143 kB

Total Files

17

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