Getting started
Installation
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
Peer dependencies
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
Set up Theme
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> );
Using Themes With Styled Components
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, }));
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. */ };
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 {} }