Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/styled-components/styled-theming
Create themes for your app using styled-components
https://github.com/styled-components/styled-theming
css-in-js react styled-components theming
Last synced: 4 days ago
JSON representation
Create themes for your app using styled-components
- Host: GitHub
- URL: https://github.com/styled-components/styled-theming
- Owner: styled-components
- License: mit
- Created: 2017-07-26T22:14:41.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-10-01T20:07:40.000Z (over 3 years ago)
- Last Synced: 2025-01-10T12:51:33.182Z (11 days ago)
- Topics: css-in-js, react, styled-components, theming
- Language: JavaScript
- Homepage:
- Size: 61.5 KB
- Stars: 1,169
- Watchers: 14
- Forks: 39
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - styled-theming - components | styled-components | 1097 | (JavaScript)
README
# styled-theming
> Create themes for your app using [styled-components](https://www.styled-components.com/)
Read the [introductory blog post](http://thejameskyle.com/styled-theming.html)
## Installation
```sh
yarn add styled-components styled-theming
```
## Example
```js
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 (
Hello World
);
}
```
## API
### ``
See [styled-components docs](https://www.styled-components.com/docs/advanced#theming)
`` is part of styled-components, but is required for styled-theming.
```js
import {ThemeProvider} from 'styled-components';
```
`` accepts a single prop `theme` which you should pass an object
with either strings or getter functions. For example:
```js
modes.dark, size: sizes => sizes.large }}>
```
You should generally set up a `` at the root of your app:
```js
function App() {
return (
{/* rest of your app */}
);
}
```
### `theme(name, values)`
Most of your theming will be done with this function.
`name` should match one of the keys in your `` theme.
```js
theme('whatever', {...});
```
`values` should be an object where one of the keys will be selected by the
value provided to `` theme.
```js
theme('mode', {
light: '...',
dark: '...',
});
```
The values of this object can be any CSS value.
```js
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.
```js
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.
```js
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}
`;
```
The values will be passed through like any other interpolation
in styled-components. You can use the `css` helper to add entire
blocks of styles, including their own interpolations.
```js
import styled, {css} from 'styled-components';
import theme from 'styled-theming';
const white = "#fff";
const black = "#000";
const boxStyles = theme('mode', {
light: css`
background: ${white};
color: ${black};
`,
dark: css`
background: ${black};
color: ${white};
`,
});
const Box = styled.div`
${boxStyles}
`;
```
### `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.
```js
import styled from 'styled-components';
import theme from 'styled-theming';
const backgroundColor = theme.variants('mode', 'variant', {
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',
};
```