Creating custom themes

thenativeweb-ux comes with two default themes, themes.TheNativeWeb and themes.Wolkenkit. Both of them extend the abstract class Theme.

In order to create a custom theme, you have two options: create a new theme by extending the abstract Theme or extending one of the default themes.

Creating a theme from scratch

You create a custom theme by extending the abstract class Theme. Use this option if you would like to override theme properties like colors or font sizes.

const customThemeThatExtendsBaseTheme = new CustomThemeThatExtendsBaseTheme({
  name: 'CustomTheme',
  spaceUnit: 18,

  brandColors: {
    black: '#000000',
    highlight: '#48bb78',
    gray: '#222',
    grayDark: '#111',
    grayLight: '#eeeeee',
    grayModest: '#999999',
    white: '#ffffff'
  },

  interactionColors: {
    focus: '#363d45'
  },

  fontSizes: {
    xxs: '12px',
    xs: '16px',
    sm: '18px',
    md: '20px',
    lg: '24px',
    xl: '30px',
    xxl: '48px'
  },

  pattern: {
    opacity: 0.05,
    backgroundImage: 'none'
  }
});

<ThemeProvider theme={ customThemeThatExtendsBaseTheme }>
  <Button>Styled with theme that extends base class</Button>
</ThemeProvider>

Extending one of the default themes

If you would like to use a default theme but simply need to override some properties, extend themes.TheNativeWeb or themes.Wolkenkit.

class CustomThemeThatExtendsWolkenkit extends themes.Wolkenkit {
  public constructor () {
    super();

    this.font.size.md = '18px';
  }
}

<ThemeProvider theme={ new CustomThemeThatExtendsWolkenkit() }>
  <Button>Styled with theme that extends Wolkenkit</Button>
</ThemeProvider>

Extending a theme with custom properties

If you want to extend your theme with additional properties, add them as readonly properties to your theme class.

class CustomThemeWithCustomProperty extends themes.Wolkenkit {
  public readonly customComponent = {
    width: '300px'
  };
}

You can now use these properties when styling your custom components. You just need to make sure that you reference the custom theme instead of the default one.

import { CustomTheme as Theme } from '../../themes/CustomTheme';

const styles = (theme: Theme) => ({
  CustomComponent: {
    width: theme.customComponent.width
  }
});

export { styles };