https://github.com/patelka2211/dynamic-colors
Dynamic Colors is a JavaScript library that can dynamically generate color theme from a single HEX color and it provides a range of useful APIs for creating, managing, and manipulating color themes.
https://github.com/patelka2211/dynamic-colors
kpverse material-dynamic-colors material-theme npm-package patelka2211 typescript
Last synced: about 1 year ago
JSON representation
Dynamic Colors is a JavaScript library that can dynamically generate color theme from a single HEX color and it provides a range of useful APIs for creating, managing, and manipulating color themes.
- Host: GitHub
- URL: https://github.com/patelka2211/dynamic-colors
- Owner: patelka2211
- License: mit
- Created: 2023-06-15T06:12:34.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-14T08:05:05.000Z (over 2 years ago)
- Last Synced: 2024-03-14T20:04:59.404Z (over 2 years ago)
- Topics: kpverse, material-dynamic-colors, material-theme, npm-package, patelka2211, typescript
- Language: TypeScript
- Homepage: https://kpverse.in/dynamic-colors/
- Size: 208 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://npmjs.com/package/dynamic-colors "Dynamic Colors from KPVERSE")
# Dynamic Colors
**Dynamic Colors** is a JavaScript library that can dynamically generate color palette from a single HEX color and it provides a range of useful APIs for creating, managing, and manipulating color palettes such as [_create()_](#create), [_remove()_](#remove), [_setAutoTheme()_](#setautotheme), [_setDarkTheme()_](#setdarktheme), [_setLightTheme()_](#setlighttheme), [_themeCycle()_](#themecycle), [_isInstance()_](#isinstance).
## Installation
[](https://www.npmjs.com/package/dynamic-colors)
[](https://bundlephobia.com/package/dynamic-colors@1.1.5)
[](https://www.npmjs.com/package/dynamic-colors)
[](https://cdn.jsdelivr.net/gh/patelka2211/dynamic-colors@1.1.5/)
To install Dynamic Colors using npm, run the following command:
```sh
npm i dynamic-colors
```
Alternatively, you can include [Dynnamic Colors's IIFE file](https://cdn.jsdelivr.net/gh/patelka2211/dynamic-colors@1.1.5/DynamicColors.js) in your website using a `` tag:
```html
<script src="https://cdn.jsdelivr.net/gh/patelka2211/dynamic-colors@1.1.5/DynamicColors.js">
```
## Available APIs
### create()
The [create()](#create) function creates a new instance of the [DynamicColors class](#dynamiccolors-class), which is used to manage color palettes.
| | Available as |
| :------ | :--------------------- |
| in ESM | create() |
| in IIFE | DynamicColors.create() |
### remove()
The [remove()](#remove) function is used to unsubscribe an instance of the [DynamicColors class](#dynamiccolors-class) from all available DynamicColors instances. By calling this function with the desired instance as an argument, you can effectively remove the instance's association with the color palettes managed by Dynamic Colors.
| | Available as |
| :------ | :--------------------- |
| in ESM | remove() |
| in IIFE | DynamicColors.remove() |
### setAutoTheme()
The [setAutoTheme()](#setautotheme) function subscribes all instances of the [DynamicColors class](#dynamiccolors-class) to automatically change the theme based on the user's operating system theme.
| | Available as |
| :------ | :--------------------------- |
| in ESM | setAutoTheme() |
| in IIFE | DynamicColors.setAutoTheme() |
### setDarkTheme()
The [setDarkTheme()](#setdarktheme) function changes all instances of the [DynamicColors class](#dynamiccolors-class) to a dark theme.
| | Available as |
| :------ | :--------------------------- |
| in ESM | setDarkTheme() |
| in IIFE | DynamicColors.setDarkTheme() |
### setLightTheme()
The [setLightTheme()](#setlighttheme) function changes all instances of the [DynamicColors class](#dynamiccolors-class) to a light theme.
| | Available as |
| :------ | :---------------------------- |
| in ESM | setLightTheme() |
| in IIFE | DynamicColors.setLightTheme() |
### themeCycle()
The [themeCycle()](#themecycle) function cycles through different themes based on the current theme:
| | Available as |
| :------ | :------------------------- |
| in ESM | themeCycle() |
| in IIFE | DynamicColors.themeCycle() |
- If the current theme is `Auto`, the next theme will be `Light`.
- If the current theme is `Light`, the next theme will be `Dark`.
- If the current theme is `Dark`, the next theme will be `Auto`.
### isInstance()
Determines whether the given object is an instance of [`DynamicColors`](#dynamiccolors-class). Returns `true` if the object is an instance of [`DynamicColors`](#dynamiccolors-class), otherwise `false`.
## Internally used functionalities
### DynamicColors class
The [DynamicColors class](#dynamiccolors-class) is used internally by Dynamic Colors to manage the color palettes it generates. It has the following characteristics:
The [DynamicColors class](#dynamiccolors-class) is created using the [create()](#create) function and can only be removed using the [remove()](#remove) function.
### Material Dynamic Colors
Dynamic Colors leverages the power of [Material Dynamic Colors](https://github.com/leonardorafael/material-dynamic-colors) internally to generate color palettes. It builds upon the functionality provided by [Material Dynamic Colors](https://github.com/leonardorafael/material-dynamic-colors) and offers additional features. With Dynamic Colors, you can go beyond the basic color generation and enjoy advanced functionalities tailored to your specific needs, enabling you to create dynamic visual experiences for your web applications.
## License
[](./LICENSE)
This project is licensed under the [MIT License](./LICENSE), which permits you to use, copy, modify, merge, publish, distribute, and sublicense the software, subject to the conditions stated in the [LICENSE file](./LICENSE).