@hig/themes

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>
}