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"/>