Colornip is an pukka-easiest color-switcher on planet. Simple, small, fast, pure JavaScript. Fun.
https://zafree.github.io/colornip
- Link css files. (Be careful about
id="theme"
. Don't change it)
<link rel="stylesheet" href="css/colornip.css">
<link id="theme" rel="stylesheet" href="css/theme-light.css">
- Add
<script>
to bottom of page
<script src="js/colornip.js"></script>
- Set
data-dir
path of your theme directory forid="colors"
<ul id="colors" data-dir="css/theme-color/">
...
</ul>
- Set
data-scheme
anddata-color
for eachli
<ul id="colors" data-dir="css/theme-color/">
<li data-scheme="theme-light" data-color="#f2f2f2"></li>
<li data-scheme="theme-blue" data-color="#d3f8ff"></li>
<li data-scheme="theme-orange" data-color="#fff4d3"></li>
<li data-scheme="theme-green" data-color="#d3ffd2"></li>
<li data-scheme="theme-pink" data-color="#ffe4f7"></li>
...
</ul>
It's the best way to change theme-color. No dependencies. Pure JavaScript. Nice switcher animation effect. Better user experience. Happy client. Wow and wow.
Colornip should (in theory) work in all relevant browsers (ie6+). If not, create an issue! Thanks!
Written by Zafree, made better by you.