import { extendTheme } from '@uhg-abyss/mobile';

The tool extendTheme allows for extending preset themes and allows you to override those themes to fit your design needs. extendTheme is used in conjunction with ThemeProvider and createTheme.

Properties

extendTheme(
  baseTheme: object,
  ...override: object[],
): object;

Usage

extendTheme takes in a base theme object and one or more override objects. The override objects can contain any of the theme properties listed below to modify the base theme. If multiple override objects are provided, they will be merged in the order they are passed in, with later overrides taking precedence over earlier ones. If you do not have access to the base theme object, you can use the ThemeProvider's theme prop as a function to get the current theme object as a parameter and pass it to extendTheme as the base theme.

If the token format is still in a nested JSON structure, you can use flattenTokens to flatten the tokens before passing them to extendTheme.

Overriding theme from createTheme

In this example, we create a base theme using createTheme and then extend it using extendTheme with our custom overrides.

import { ThemeProvider, createTheme, extendTheme } from '@uhg-abyss/mobile';
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';

const baseTheme = createTheme('uhc');

const themeOverride = {
  theme: {
    colors: {...},
    space: {...},
    fontSizes: {...},
    fonts: {...},
    fontWeights: {...},
    lineHeights: {...},
    letterSpacings: {...},
    sizes: {...},
    borderWidths: {...},
    borderStyles: {...},
    radii: {...},
    shadows: {...},
    zIndices: {...},
    transitions: {...},
  },
};

const extendedTheme = extendTheme(baseTheme, themeOverride);

const App = () => {
  return <ThemeProvider theme={extendedTheme}>...</ThemeProvider>;
};

AppRegistry.registerComponent(appName, () => App);

() => {
  const baseTheme = createTheme('uhc');
  const extendedTheme = extendTheme(baseTheme, {
    theme: {
      colors: {
        'core.color.purple.90': '#6950C3',
        'core.color.purple.120': '#2F1783',
        'semantic.color.surface.interactive.standards.rest.primary':
          '$core.color.purple.90',
        'semantic.color.surface.interactive.standards.active.primary':
          '$core.color.purple.120',
      },
    },
  });

  return (
    <React.Fragment>
      <Layout.Stack grow space={16}>
        <ThemeProvider theme={baseTheme}>
          <Button>Original Button</Button>
        </ThemeProvider>
        <ThemeProvider theme={extendedTheme}>
          <Button>Custom Button</Button>
        </ThemeProvider>
      </Layout.Stack>
    </React.Fragment>
  );
};

Overriding theme from ThemeProvider

In this example, we use the ThemeProvider's theme prop as a function to get the current theme and extend it with our custom overrides using extendTheme.

import { ThemeProvider, extendTheme } from '@uhg-abyss/mobile';
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';

const themeOverride = {
  theme: {
    colors: {...},
    space: {...},
    fontSizes: {...},
    fonts: {...},
    fontWeights: {...},
    lineHeights: {...},
    letterSpacings: {...},
    sizes: {...},
    borderWidths: {...},
    borderStyles: {...},
    radii: {...},
    shadows: {...},
    zIndices: {...},
    transitions: {...},
  },
};

const App = () => {
  return (
    <ThemeProvider
      theme={(currentTheme) =>
        extendTheme(currentTheme, themeOverride)
      }
    >
      ...
    </ThemeProvider>
  );
};

AppRegistry.registerComponent(appName, () => App);

<React.Fragment>
  <Layout.Stack grow space={16}>
    <Button>Original Button</Button>
    <ThemeProvider
      theme={(currentTheme) =>
        extendTheme(currentTheme, {
          theme: {
            colors: {
              'core.color.purple.90': '#6950C3',
              'core.color.purple.120': '#2F1783',
              'semantic.color.surface.interactive.standards.rest.primary':
                '$core.color.purple.90',
              'semantic.color.surface.interactive.standards.active.primary':
                '$core.color.purple.120',
            },
          },
        })
      }
    >
      <Button>Custom Button</Button>
    </ThemeProvider>
  </Layout.Stack>
</React.Fragment>;

Extend theme with flattened tokens

In this example, we use flattenTokens to flatten nested token objects before passing them to extendTheme.