Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including styled-components-theme with all npm packages installed. Try it out:

var styledComponentsTheme = require("styled-components-theme")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

styled-components-theme v1.0.5

Defines themes via flexible color selectors for use with styled-components

styled-components-theme


NPM Version NPM Downloads Build Status codecov.io styled with prettier

styled-components-theme generates selectors for colors in your styled-components theme that allows color manipulation, using the color library via calls on the selectors themselves.

A selector, in this context, is defined as a function that looks like (props) => props.theme.myColor that the styled-components library accepts as a template variable.


Why?

styled-components is an awesome library, and their React context-based theming scheme is great, but:

  1. Having ${(props) => props.theme.highlight} functions all over your template literals to use any of your theme colors is both hard to read and cumbersome to type.

  2. In migrating from SASS and CSS Modules, I missed the ability to lighten() or darken() or transparentize() a theme color at will to make subtle gradients or overlays.


Installation

Using npm:

  $ npm install --save styled-components-theme

Using yarn:

  $ yarn add styled-components-theme

Usage

1) Define your theme colors

// colors.js

const colors = {
  main:  '#393276',
  dark:  '#0D083B',
  light: '#837EB1'
}

export default colors

2) Apply your theme with ThemeProvider

import { ThemeProvider } from 'styled-components';
import colors from './colors' // from Step #1

const App = props =>
  <ThemeProvider theme={colors}>
    {props.children}
  </ThemeProvider>

3) Create an importable theme object using styled-components-theme

// theme.js

import createTheme from 'styled-components-theme';
import colors from './colors' // from Step #1

const theme = createTheme(...Object.keys(colors))
export default theme

4) Use the theme colors in your components

import styled from 'styled-components'
import theme from './theme' // from Step #3

const Header = styled.div`
  background: ${theme.dark};
  color: ${theme.light};
`

const Button = styled.button`
  background-image: linear-gradient(${theme.light}, ${theme.light.darken(0.3));
  color: ${theme.dark};
  padding: 10px;
`

Available manipulation functions

This library uses the color manipulation provided by the color library.

theme.color.negate()         // rgb(0, 100, 255) -> rgb(255, 155, 0)

theme.color.lighten(0.5)     // hsl(100, 50%, 50%) -> hsl(100, 50%, 75%)
theme.color.darken(0.5)      // hsl(100, 50%, 50%) -> hsl(100, 50%, 25%)

theme.color.saturate(0.5)    // hsl(100, 50%, 50%) -> hsl(100, 75%, 50%)
theme.color.desaturate(0.5)  // hsl(100, 50%, 50%) -> hsl(100, 25%, 50%)
theme.color.greyscale()      // #5CBF54 -> #969696

theme.color.whiten(0.5)      // hwb(100, 50%, 50%) -> hwb(100, 75%, 50%)
theme.color.blacken(0.5)     // hwb(100, 50%, 50%) -> hwb(100, 50%, 75%)

theme.color.fade(0.5)        // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)
theme.color.opaquer(0.5)     // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 1.0)

theme.color.rotate(180)      // hsl(60, 20%, 20%) -> hsl(240, 20%, 20%)
theme.color.rotate(-90)      // hsl(60, 20%, 20%) -> hsl(330, 20%, 20%)

FAQ

Why use color? Why not [other color manipulation library]?

Because color's manipulation methods were so influenced by SASS, LESS and Stylus, they are already familiar to CSS coders.

Isn't Color mutable? Don't I need to clone()?

Yes, Color is mutable, but this library handles the cloning for you, so you can chain the manipulation methods together to your heart's content without mutating the original theme color. e.g. theme.primary.saturate(0.3).lighten(0.2).fade(0.4).

The manipulation methods in styled-components-theme are immutable.


Made with ❤️ in 🇪🇸 by @erikras.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free