name: Introduction menu: Themes route: /themes/introduction

Introduction

Themes hold the design tokens for our individual brands and are an integral part of our UI.

Setup

1. Choose a Theme

Currently available themes include:

2. App Root

Wrap your entire application with the <ThemeProvider />, providing your preferred theme via the theme prop.

Be sure to include Global styles, as these will inherit the theme and set the integral style foundations for your app.

/* App.tsx */
import React from 'react';
import { Global } from '@heathmont/moon-global';
import { ThemeProvider, sportsbetDark } from '@heathmont/moon-themes';

export const App = () => (
  <ThemeProvider theme={sportsbetDark}>
    <React.Fragment>
      <Global />
      <main>{/* Your App… */}</main>
    </React.Fragment>
  </ThemeProvider>
);

3. TypeScript Support

If you're using TypeScript, you can extend styled-components' types to include our theming schema.

To make use of extra features (such as auto-completion in VSCode), create a d.ts file with the following:

/* types/styled-components.d.ts */
import 'styled-components';
import { Theme } from '@heathmont/moon-themes';

declare module 'styled-components' {
  export interface DefaultTheme extends Theme {}
}

Using Themes

With Styled Components

The theme context is included by default in styled components props, and can be implemented as follows:

import styled from 'styled-components';

/* Access `theme` from styled component props */
const Example = styled.div(({ theme }) => ({
  display: 'block',
  color: theme.colorNew.bulma,
  padding: theme.space.default,
}));

/* Alternatively, destructure the theme properties… */
const Example = styled.div(({ theme: { colorNew, space } }) => ({
  display: 'block',
  color: colorNew.bulma,
  padding: space.default,
}));

Without Styled Components

The useTheme helper function returns the current theme from the theme context:

import React from 'react';
import { useTheme } from '@heathmont/moon-themes';

const Example = () => {
  const theme = useTheme();

  return <p>{theme.brand}</p>; /* Returns the theme brand name. */
};

or for more manual control:

import React from 'react';
import { ThemeContext } from '@heathmont/moon-themes';

const Example = () => {
  const theme = React.useContext(ThemeContext);

  return <p>{theme.brand}</p>; /* Returns the theme brand name. */
};