themespick v1.0.1

Themespick

Themespick is based on CSS variables and provides a mechasinm of switching between different themes in the application.

npm i themespick

Themespick provides several functions for theme management in the application.

import { initThemes } from 'themespick'

const themes = {
  darkBlue: {
    "--main-background": "blue",
    "--main-font-color": "black"
  },
  lightBlue: {
   "--main-background": "cyan",
   "--main-font-color": "white"
  }
}

initThemes(themes, 'lightBlue')

Themes object is a simple javascript object that contains theme set. Themes object can not be empty and must contain at list one theme, otherwise an error will be thrown. Second argument - default theme that will be choosen automatically after application starts. If it is empty - first theme from the object will be picked.

import { addTheme } from 'themespick'

addTheme('pinkIndigo', {
   "--main-background": "purple",
   "--main-font-color": "pink"
})

import { applyTheme } from 'themespick'

applyTheme('darkBlue')

If you don't want to initialize theme manager, you can provide theme object directly to applyTheme method:

applyTheme({
   "--main-background": "turquoise",
   "--main-font-color": "white"
})

import { getTheme } from 'themespick'

const themeObject = getTheme('darkBlue')

import { getVarValue } from 'themespick'

const bgColor = getVarValue('--main-background')

import { setVarValue } from 'themespick'

const bgColor = setVarValue('--main-background', '#00ff00')

import { removeTheme } from 'themespick'

removeTheme('darkBlue')

const themes = {
  whiteColors: {
    "--main-background": "white",
    "--modal-shadow-color": "pink"
  },
  whiteIcecream: {
    "ref": "whiteColors"
    "--main-font-color": "black"
  },
  whiteIce: {
   "ref": "whiteColors"
   "--main-font-color": "cyan"
  }
}

initThemes(themes, 'whiteIce')

The ref property means the reference to the shared styles. References point theme manager to use shared styles specified in the themes object. In the case above whiteIcecream and whiteIce themes use the shared whiteColors theme.

initThemes(themes, 'whiteIce', { key: 'selected', storage: 'localStorage' })

For session storage:

initThemes(themes, 'whiteIce', { key: 'selected', storage: 'sessionStorage' })