Simple library that paints HTML elements in rainbow colors
npm install rainbow-elementsyarn add rainbow-elementsThis library paints the children of the dom with rainbow colors, so wrapper dom is needed.
Add class="rainbow-elements" attribute to the wrapper DOM
<div class="rainbow-elements" data-re-type="background">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>Import rainbow-elements and execute run() method
import { re } from "rainbow-elements";
re.run();Then, the div elements inside the wrapper div colored rainbow.
<body>
<div class="rainbow-elements" data-re-type="background">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
<script src="https://unpkg.com/rainbow-elements@latest/dist/rainbow-elements.js"></script>const { re } = window.RainbowElements;
re.run();| method | parameter | description |
|---|---|---|
| paint() | none |
paint rainbow colors the doms in current page |
| clear() | none |
erase rainbow colors the doms in current page |
| run() | none |
execute paint() and subscribe paint() method to the mutation observer |
| stop() | none |
execute clear() and unsubscribe paint() method |
If you use this library in SPA, It is enough to call the run() or stop() method once in root file. Elements in all pages are automatically painted in rainbow colors.
run() and stop() methods use the mutation observer. you need to check out the browser compatibility.
This library changes hsla values of the elements.
※ re-type "background" and "svg" are deprecated.
They are replaced with "backgroundColor", "fill" and "stroke".
| attribute | value or range | default value | type | description |
|---|---|---|---|---|
| class | "rainbow-elements" | none |
string | The class of the wrapper dom should be named "rainbow-elements" for the library to detect the dom. |
| data-re-type | "color"| "backgroundColor"| "fill"| "stroke" |
"color" | string | (optional) [ re-type] changes the element.style[re-type] |
| data-re-saturation | "0" ~ "1" (float) | "1" | string | (optional) "0" means "0%" of the saturation and "1" means "100%" of that. |
| data-re-lightness | "0" ~ "1" (float) | "0.5" | string | (optional) "0" means "0%" of the lightness and "1" means "100%" of that. |
| data-re-alpha | "0" ~ "1" (float) | "1" | string | (optional) It is just alpha value |