Themespick

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

Installation

To install this library type the following command into the terminal:

npm i themespick

Hot to use Themespick

Themespick provides several functions for theme management in the application.

---

initThemes

Inits the set of defined themes. It should be used at the start of 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.

---

addTheme

Provides the ability to dynamically add a new theme to existing ones. Theme name should be unique and theme object can not be empty, otherwise an error will be thrown.

import { addTheme } from 'themespick'

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

---

applyTheme

Applies chosen theme to application. Pass the theme name to the method that you specified when initializing the theme manager.

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"
})

---

getTheme

Returns the theme object that was saved to theme manager while initialization

import { getTheme } from 'themespick'

const themeObject = getTheme('darkBlue')

---

getVarValue

Returns the current value of css variable by name

import { getVarValue } from 'themespick'

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

---

setVarValue

Sets the value to css variable

import { setVarValue } from 'themespick'

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

---

removeTheme

Removes the specified theme

import { removeTheme } from 'themespick'

removeTheme('darkBlue')

---

Shared variables

Sometimes several themes can use the common css variables and there is not good to repeat them in every theme objects. Library provides a functionality to get rid of this. You should splecify a ref property as listed below:

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.

---

Using local storage / session storage to save selected theme

To activate actual theme saving to local or session storage you should specify the last argument of initThemes method. For local storage:

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

For session storage:

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

---

Themespick fits perfectly to all types of front-end applications.

Since the library uses a CSS Variables it may not work in older browsers.
Here the list of CSS Variables support:
https://caniuse.com/css-variables
If your application supports old browsers and you want to use this library, you can use pollyfills or "ponyfills" to fix this issue. Here some popular:
https://jhildenbiddle.github.io/css-vars-ponyfill/#/
https://github.com/nuxodin/ie11CustomProperties