@hig/themes

0.3.0 • Public • Published

ThemeContext component

Themable HIG components within a ThemeContext.Provider will have access to the provided theme.

Getting started

yarn add @hig/themes

Provide a theme to components

import { ThemeContext, HIGLightGrayTheme } from '@hig/themes`;

function MyApp() {
  <ThemeContext.Provider value={HIGLightGrayTheme}>
    <TheRestOfMyApp />
  </ThemeContext.Provider>
}

Consume theme values in a component

import { ThemeContext } from '@hig/themes`;

function MyThemedComponent() {
  <ThemeContext.Consumer>{({ themeData, themeName }) => (
    <div style={{
      backgroundColor: themeData["COLOR_SCHEME.SURFACE_LEVEL_2_COLOR"],
      borderRadius: themeData["BASICS.BORDER_RADII.s"],
      color: themeData["COLOR_SCHEME.TEXT_COLOR"],
      padding: themeData["DENSITY.SPACINGS.M"],
    }}>
      The current theme is "{themeName}".
    </div>
  )}</ThemeContext.Consumer>
}

Readme

Keywords

none

Package Sidebar

Install

npm i @hig/themes

Weekly Downloads

1

Version

0.3.0

License

Apache-2.0

Unpacked Size

19.2 kB

Total Files

5

Last publish

Collaborators

  • hig-bot
  • nfiniteset
  • wmui51
  • staceyshk