# themespick

> This library provides a mechanism of managing application themes

Latest version **1.0.1** (published 2023-05-11) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install themespick
pnpm add themespick
yarn add themespick
bun add themespick
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-05-11 |
| First published | 2023-05-11 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 30.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | vb_201 |
| Keywords | Theme, CSS Variable, Theme manager, UI Theming, JavaScript |

## Links

- npm: https://www.npmjs.com/package/themespick
- Repository: https://github.com/viacheslav-dev-1/themespick
- Homepage: https://github.com/viacheslav-dev-1/themespick#readme
- Issues: https://github.com/viacheslav-dev-1/themespick/issues
- npm.io page: https://npm.io/package/themespick

## Recent versions

- 1.0.1 (latest) — 2023-05-11
- 1.0.0 — 2023-05-11

## README

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

<h3>Installation</h3>
To install this library type the following command into the terminal:

```
npm i themespick
```

<h3>Hot to use Themespick</h3>

Themespick provides several functions for theme management in the application.
<hr>
<h4>initThemes</h4>
Inits the set of defined themes. It should be used at the start of application.

```javascript
import { initThemes } from 'themespick'
```

```javascript
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.

<hr>
<h4>addTheme</h4>
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.

```javascript
import { addTheme } from 'themespick'
```

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

<hr>
<h4>applyTheme</h4>
Applies chosen theme to application. Pass the theme name to the method that you specified when initializing the theme manager.

```javascript
import { applyTheme } from 'themespick'
```

```javascript
applyTheme('darkBlue')
```
If you don't want to initialize theme manager, you can provide theme object directly to <b>applyTheme</b> method:

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

<hr>
<h4>getTheme</h4>
Returns the theme object that was saved to theme manager while initialization

```javascript
import { getTheme } from 'themespick'
```

```javascript
const themeObject = getTheme('darkBlue')
```

<hr>
<h4>getVarValue</h4>
Returns the current value of css variable by name

```javascript
import { getVarValue } from 'themespick'
```

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

<hr>
<h4>setVarValue</h4>
Sets the value to css variable

```javascript
import { setVarValue } from 'themespick'
```

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

<hr>
<h4>removeTheme</h4>
Removes the specified theme

```javascript
import { removeTheme } from 'themespick'
```

```javascript
removeTheme('darkBlue')
```

<hr>
<h4>Shared variables</h4>
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 <b>ref</b> property as listed below:

```javascript
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 <b>ref</b> 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 <b>whiteIcecream</b> and <b>whiteIce</b> themes use the shared <b>whiteColors</b> theme.

<hr>
<h4>Using local storage / session storage to save selected theme</h4>
To activate actual theme saving to local or session storage you should specify the last argument of <b>initThemes</b> method.
For local storage:

```javascript
initThemes(themes, 'whiteIce', { key: 'selected', storage: 'localStorage' })
```
For session storage:

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

<hr>
Themespick fits perfectly to all types of front-end applications.<br><br>
Since the library uses a CSS Variables it may not work in older browsers.<br>
Here the list of CSS Variables support:<br>
https://caniuse.com/css-variables
<br>
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: <br>
https://jhildenbiddle.github.io/css-vars-ponyfill/#/ <br>
https://github.com/nuxodin/ie11CustomProperties <br>

---
_Source: https://npm.io/package/themespick · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._