Minimal jQuery Based Site Theme / Color Scheme Switcher - Blast.js

Blast.js is a very small jQuery based theme / skin / color scheme switcher that makes it easier to quickly switch between color schemes on your webpage.

How to use it:

1. Download and include the jQuery Blast.js plugin's files on the webpage which have jQuery library included.

<link href="blast.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="blast.min.js"></script>

2. Create a color scheme panel from which you're able to choose colors.

<colorsBox>
  <icon>≡</icon>
  <div class="blast-frame">
    <p>change colors</p>
    <div class="blast-colors">
      <div class="blast-color">#3D261A</div>
      <div class="blast-color">#B6B254</div>
      <div class="blast-color">#6B2E56</div>
      <div class="blast-color">#48A871</div>
      <div class="blast-color">#2D1D44</div>
      <div class="blast-color">#3F4E92</div>
      <div class="blast-color">#DCC218</div>
      <div class="blast-color">#F5005E</div>
      <div class="blast-color">#916E30</div>
      <div class="blast-color">#D0A571</div>
      <div class="blast-color">#379AA4</div>
      <div class="blast-color">#216348</div>
      <div class="blast-color">#3B3B3B</div>
      <div class="blast-color">#CF2626</div>
    </div>
    <p class="blast-custom-colors">Custom colors</p>
    <input type="color" name="blastCustomColor" value="#cf2626">
  </div>
</colorsBox>

3. Add the data-blast="borderColor" attribute to desired element and we're done.

<p data-blast="color">Colors blast</p>

Change log:

2017-03-11

• JS & CSS update

---

This awesome jQuery plugin is developed by menemelkatan. For more Advanced Usages, please check the demo page or visit the official website.