Getting started

using npm

npm i @heathmont/moon-themes @heathmont/moon-core @heathmont/moon-components

using yarn

yarn add @heathmont/moon-themes @heathmont/moon-core @heathmont/moon-components

Your project should include "react", "react-dom" and "styled-components" as its dependency.

using npm

npm i react react-dom styled-components

using yarn

yarn add react react-dom styled-components

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

Be sure to include global styles and font-face definitions, as these will inherit the theme and set the integral style foundations for your app.

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

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

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

Access 'theme' from styled component props

import styled from 'styled-components';

const Example = styled.div(({ theme }) => ({
  display: 'block',
  color: theme.colorNew.bulma,
  padding: theme.space.default,
}));

Or alternatively, destructure the theme properties…

import styled from 'styled-components';

const Example = styled.div(({ theme: { colorNew, space } }) => ({
  display: 'block',
  color: colorNew.bulma,
  padding: space.default,
}));

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. */
};

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