styled-palette

A helper utility for selecting colors in styled-components theme. Similar to styled-components-theme, but with Typescript support and ability to nest colors inside theme.

Setup

npm i styled-palette

DEMO

TODO: add demo gif

Usage

theme.ts

import createThemes from 'styled-palette'
import { ThemeProvider as StyledThemeProvider } from 'styled-components'

const BASE_THEME = {
  spacing: 16,
  name: 'My summer theme',
} as const

// Palette may only contain colors strings
const LIGHT_PALETTE = {
  main: {
    background: 'white',
    text: 'black',
  },
  accent: 'cyan',
  border: 'black',
}

// Each palette should have the same structure, so they are interchangeable
const DARK_PALETTE = {
  main: {
    background: 'black',
    text: 'white',
  },
  accent: 'fuchsia',
  border: 'white',
}

const {
  themes: [light, dark],
  palette,
  usePalette,
} = createThemes(
  [LIGHT_PALETTE, DARK_PALETTE],

  // This is optional. BASE_THEME will be added to each theme
  BASE_THEME
)

// Wrap your App with this provider
export const ThemeProvider = (props) => {
  const theme = useSomeLogicWhetherToUseDarkTheme() ? dark : light
  return <StyledThemeProvider {...props} theme={theme} />
}

export { palette, usePalette }

...later that day in another file

import styled from 'styled-components'
import { palette } from './theme.ts'

export const Card = styled.div`
  background-color: ${palette.main.background};
  color: ${palette.main.text};
  border: 3px solid ${palette.border};
`

Example

TODO: example sandbox

License

MIT