A theme for Instructure made by Instructure Inc.
npm install @instructure/instructure-theme---
category: packages
---
[![npm][npm]][npm-url]
[![MIT License][license-badge]][license]
[![Code of Conduct][coc-badge]][coc]
A UI component theme for Instructure made by Instructure Inc.
This theme has a 3:1 minimum contrast requirement.
``sh`
npm install @instructure/instructure-theme
Before mounting (rendering) your React application:
- global theming:
`js
import { theme } from '@instructure/instructure-theme'
theme.use()
`
- application level theming:
`jsx
import { theme } from '@instructure/instructure-theme'
ReactDOM.render(
element
)
`
To override the variables:
- globally:
`js
import { theme } from '@instructure/instructure-theme'
theme.use({ overrides: { colors: { brand: 'red' } } })
`
- application level:
`jsx
import { theme } from '@instructure/instructure-theme'
const themeOverrides = { colors: { brand: 'red' } }
ReactDOM.render(
element
)
``
[npm]: https://img.shields.io/npm/v/@instructure/instructure-theme.svg
[npm-url]: https://npmjs.com/package/@instructure/instructure-theme
[license-badge]: https://img.shields.io/npm/l/instructure-ui.svg?style=flat-square
[license]: https://github.com/instructure/instructure-ui/blob/master/LICENSE
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
[coc]: https://github.com/instructure/instructure-ui/blob/master/CODE_OF_CONDUCT.md