theme-context

ThemeContext component

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

• Getting started
• Provide a theme to components
• Consume theme values in a component

Getting started

yarn add @hig/theme-context @hig/theme-data

Provide a theme to components

import HIGDarkBlueTheme from '@hig/theme-data/build/esm/darkBlueMediumDensityTheme';
import ThemeContext from '@hig/theme-context';

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

For information on customizing a theme or importing theme data in different formats, see the theme-data README.

Consume theme values in a component

import ThemeContext from '@hig/theme-context';

function MyThemedComponent() {
  <ThemeContext.Consumer>{({ resolvedRoles, metadata }) => (
    <div style={{
      backgroundColor: resolvedRoles["colorScheme.surface.level200"],
      borderRadius: resolvedRoles["basics.borderRadii.small"],
      color: resolvedRoles["colorScheme.text.default"],
      padding: resolvedRoles["density.spacings.medium"],
    }}>
      The current theme is "${metadata.name}".
    </div>
  )}</ThemeContext.Consumer>
}