❤
npm
Sign UpSign In

styled-theming
DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/styled-theming package

2.2.0 • Public • Published

styled-theming

Create themes for your app using styled-components

Read the introductory blog post

Installation

               

                yarn add styled-components styled-theming

Example

               

                import React from 'react';
               

               

                import styled, {ThemeProvider} from 'styled-components';
               

               

                import theme from 'styled-theming';
               

               

                 
               

               

                const boxBackgroundColor = theme('mode', {
               

               

                  light: '#fff',
               

               

                  dark: '#000',
               

               

                });
               

               

                 
               

               

                const Box = styled.div`
               

               

                  background-color: ${boxBackgroundColor};
               

               

                `;
               

               

                 
               

               

                export default function App() {
               

               

                  return (
               

               

                    <ThemeProvider theme={{ mode: 'light' }}>
               

               

                      <Box>
               

               

                        Hello World
               

               

                      </Box>
               

               

                    </ThemeProvider>
               

               

                  );
               

               

                }

API

<ThemeProvider>

See styled-components docs

<ThemeProvider> is part of styled-components, but is required for styled-theming.

               

                import {ThemeProvider} from 'styled-components';

<ThemeProvider> accepts a single prop theme which you should pass an object with either strings or getter functions. For example:

               

                <ThemeProvider theme={{ mode: 'dark', size: 'large' }}>
               

               

                <ThemeProvider theme={{ mode: modes => modes.dark, size: sizes => sizes.large }}>

You should generally set up a <ThemeProvider> at the root of your app:

               

                function App() {
               

               

                  return (
               

               

                    <ThemeProvider theme={...}>
               

               

                      {/* rest of your app */}
               

               

                    </ThemeProvider>
               

               

                  );
               

               

                }

theme(name, values)

Most of your theming will be done with this function.

name should match one of the keys in your <ThemeProvider> theme.

               

                <ThemeProvider theme={{ whatever: '...' }}/>
               

               

                 
               

               

                theme('whatever', {...});

values should be an object where one of the keys will be selected by the value provided to <ThemeProvider> theme.

               

                <ThemeProvider theme={{ mode: 'light' }}/>
               

               

                <ThemeProvider theme={{ mode: 'dark' }}/>
               

               

                 
               

               

                theme('mode', {
               

               

                  light: '...',
               

               

                  dark: '...',
               

               

                });

The values of this object can be any CSS value.

               

                theme('mode', {
               

               

                  light: '#fff',
               

               

                  dark: '#000',
               

               

                });
               

               

                 
               

               

                theme('font', {
               

               

                  sansSerif: '"Helvetica Neue", Helvetica, Arial, sans-serif',
               

               

                  serif: 'Georgia, Times, "Times New Roman", serif',
               

               

                  monoSpaced: 'Consolas, monaco, monospace',
               

               

                });

These values can also be functions that return CSS values.

               

                theme('mode', {
               

               

                  light: props => props.theme.userProfileAccentColor.light,
               

               

                  dark: props => props.theme.userProfileAccentColor.dark,
               

               

                });

theme will create a function that you can use as a value in styled-component's styled function.

               

                import styled from 'styled-components';
               

               

                import theme from 'styled-theming';
               

               

                 
               

               

                const backgroundColor = theme('mode', {
               

               

                  light: '#fff',
               

               

                  dark: '#000',
               

               

                });
               

               

                 
               

               

                const Box = styled.div`
               

               

                  background-color: ${backgroundColor}
               

               

                `;

theme.variants(name, prop, themes)

It's often useful to create variants of the same component that are selected via an additional prop.

To make this easier with theming, styled-theming provides a theme.variants function.

               

                import styled from 'styled-components';
               

               

                import theme from 'styled-theming';
               

               

                 
               

               

                const backgroundColor = theme.variants('variant', 'mode', {
               

               

                  default: { light: 'gray', dark: 'darkgray' },
               

               

                  primary: { light: 'blue', dark: 'darkblue' },
               

               

                  success: { light: 'green', dark: 'darkgreen' },
               

               

                  warning: { light: 'orange', dark: 'darkorange' },
               

               

                });
               

               

                 
               

               

                const Button = styled.button`
               

               

                  background-color: ${backgroundColor};
               

               

                `;
               

               

                 
               

               

                Button.propTypes = {
               

               

                  variant: PropTypes.oneOf(['default', 'primary', 'success', 'warning'])
               

               

                };
               

               

                 
               

               

                Button.defaultProps = {
               

               

                  variant: 'default',
               

               

                };
               

               

                 
               

               

                <Button/>
               

               

                <Button variant="primary"/>
               

               

                <Button variant="success"/>
               

               

                <Button variant="warning"/>

Readme

Keywords

none

Package Sidebar

Install

npm i styled-theming

Repository

github.com/styled-components/styled-theming

Homepage

github.com/styled-components/styled-theming#readme

Weekly Downloads

49,340

Version

2.2.0

License

MIT

Last publish

Collaborators

  • thejameskyle
Try on RunKit
Report malware