styled-theming
Create themes for your app using styled-components
Read the introductory blog post
Installation
yarn add styled-components styled-theming
Example
;
;
;
const boxBackgroundColor =
;
const Box = styleddiv`
background-color: ;
`;
{
return
<ThemeProvider theme= mode: 'light' >
<Box>
Hello World
</Box>
</ThemeProvider>
;
}
API
<ThemeProvider>
<ThemeProvider>
is part of styled-components, but is required for styled-theming.
;
<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= modesdark sizeslarge >
You should generally set up a <ThemeProvider>
at the root of your 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: '...' />
;
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' />
;
The values of this object can be any CSS value.
;
;
These values can also be functions that return CSS values.
;
theme
will create a function that you can use as a value in styled-component's styled
function.
;
;
const backgroundColor =
;
const Box = styleddiv`
background-color:
`;
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.
;
;
const backgroundColor = theme
;
const Button = styledbutton`
background-color: ;
`;
ButtonpropTypes =
variant: PropTypes
;
ButtondefaultProps =
variant: 'default'
;
<Button/>
<Button variant="primary"/>
<Button variant="success"/>
<Button variant="warning"/>