Weloop theme

A global theme to unify styles through apps

A simple package to help us keeping one style in all apps.

• Installation
• Styled component use
• Direct use
• Content

Installation

Install the dependencies.

npm i weloop-theme

Styled component use

styled-components has full theming support by exporting a wrapper component. This component provides a theme to all React components underneath itself via the context API. In the render tree all styled-components will have access to the provided theme, even when they are multiple levels deep.

To illustrate this, let's create our Button component, but this time we'll pass some variables down as a theme.

import theme from "weloop-theme"

// Define our button, but with the use of props.theme this time
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* Color the border and text with theme.main */
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;

// We are passing a default theme for Buttons that arent wrapped in the ThemeProvider
Button.defaultProps = {
  theme: {
    main: "palevioletred"
  }
}

// Define what props.theme will look like
const theme = {
  main: "mediumseagreen"
};

render(
  <div>
    <Button>Normal</Button>

    <ThemeProvider theme={theme}>
      <Button>Themed</Button>
    </ThemeProvider>
  </div>
);

For a global use it's better to add the ThemeProvider in the index.js

Direct use

import theme from "weloop-theme"

console.log(theme.primaryColor)

Content

theme file