Home

Bootstrap 4 Color Switcher

How to make Color Switcher in Bootstrap 4

Free code snippet for bootstrap 4 color switcher. You can use this snippet to create awesome color switcher to show demo of theme, website etc. To make this switcher working perfectly, you need Bootstrap, FontAwesome and jQuery.



You need to include two css files in header beside bootstrap and fontawesome. First will be style.css which includes all the style you need for your theme or website and next will be deafult.css with id of color-opt which includes default color to show on different elements which you want to change according to switcher.
 
<link href="style.css" rel="stylesheet">
 
<link href="default.css" rel="stylesheet" id="color-opt">
Create some css files under css/colors/.. give following name to them default.css, blue.css, pink.css, orange.css, purple.css, red.css, yellow.css, turquoise.css. All styles should defined color accoring to their name.
Next we will need some html for our color switcher. There will be a div with id style-switcher and ul with class pattern. We will use anchor tag to select color. I have created 8 colors with different class name so that it can be styled nicely.
 
<div id="style-switcher" style="left: 0px;">
<div>
<h3>Choose your color</h3>
<ul class="pattern">
    <li>
        <a class="color1" href="#"></a>
    </li>
    <li>
        <a class="color2" href="#"></a>
    </li>
    <li>
        <a class="color3" href="#"></a>
    </li>
    <li>
        <a class="color4" href="#"></a>
    </li>
    <li>
        <a class="color5" href="#"></a>
    </li>
    <li>
        <a class="color6" href="#"></a>
    </li>
    <li>
        <a class="color7" href="#"></a>
    </li>
    <li>
        <a class="color8" href="#"></a>
    </li>
</ul>
</div>
<div class="bottom">
<a href="#" class="settings"><i class="fa fa-cogs"></i></a>
</div>
</div>
 
After creating HTML structure for our switcher, we need some CSS to style this and make looking nice on the browser. Add following CSS to your stylesheet.

/* Demo Only */
#style-switcher,
#style-switcher .bottom a.settings {
    background: #FFF;
    border:1px solid #f0f0f0;
    color: #333;
}

#style-switcher div h3 {
    color: #1D1D1D;
    font-size: 16px;
    margin: 0px 3px 20px 0;
}

#style-switcher {
    left: -189px;
    position: fixed;
    top: 17%;
    width: 189px;
    z-index: 9999;
    padding: 10px 5px;
}

#style-switcher div {
    padding: 5px 10px;
}

#style-switcher .bottom {
    background: #FFF;
    color: #252525;
    padding: 0;
}

#style-switcher .bottom a.settings {
    display: block;
    height: 41px;
    position: absolute;
    right: -40px;
    top: 0;
    width: 40px;
    padding: 3px;
}

#style-switcher .bottom a {
    text-decoration: none;
}

#style-switcher .bottom a.settings i {
    margin-left: 8px;
    color: #000;
    font-size: 18px;
    position: absolute;
    margin-top: 9px;
}
ul.pattern {
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    border-radius: 0;
}

ul.pattern li {
    float: left;
    margin: 2px;
}

ul.pattern li a {
    cursor: pointer;
    display: block;
    height: 35px;
    width: 35px;
    border-radius: 50%;
}

ul.pattern .color1 {
    background-color: #01bf86;
}

ul.pattern .color2 {
    background-color: #4db5ed;
}

ul.pattern .color3 {
    background-color: #ff8acc;
}

ul.pattern .color4 {
    background-color: #f57c00;
}

ul.pattern .color5 {
    background-color: #8066e9;
}

ul.pattern .color6 {
    background-color: #e55a55;
}

ul.pattern .color7 {
    background-color: #ffbd00;
}

ul.pattern .color8 {
    background-color: #00b19d;
}


@media only screen and (max-width:479px) {
  #style-switcher {
      display: none
  }
}
Finally we need to add some JS code to make this working.

window.console = window.console || (function(){
 var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile = c.clear = c.exception = c.trace = c.assert = function(){};
 return c;
})();


jQuery(document).ready(function($) {


  $("ul.pattern .color1" ).click(function(){
   $("#color-opt").attr("href", "css/colors/default.css" );
   return false;
  });

  $("ul.pattern .color2" ).click(function(){
   $("#color-opt").attr("href", "css/colors/blue.css" );
   return false;
  });

  $("ul.pattern .color3" ).click(function(){
   $("#color-opt").attr("href", "css/colors/pink.css" );
   return false;
  });

  $("ul.pattern .color4" ).click(function(){
   $("#color-opt").attr("href", "css/colors/orange.css" );
   return false;
  });
  $("ul.pattern .color5" ).click(function(){
   $("#color-opt").attr("href", "css/colors/purple.css" );
   return false;
  });
  $("ul.pattern .color6" ).click(function(){
   $("#color-opt").attr("href", "css/colors/red.css" );
   return false;
  });
  $("ul.pattern .color7" ).click(function(){
   $("#color-opt").attr("href", "css/colors/yellow.css" );
   return false;
  });
  $("ul.pattern .color8" ).click(function(){
   $("#color-opt").attr("href", "css/colors/turquoise.css" );
   return false;
  });

  $("#style-switcher .bottom a.settings").click(function(e){
   e.preventDefault();
   var div = $("#style-switcher");
   if (div.css("left") === "-189px") {
    $("#style-switcher").animate({
     left: "0px"
    });
   } else {
    $("#style-switcher").animate({
     left: "-189px"
    });
   }
  })

  $("ul.pattern li a").click(function(e){
   e.preventDefault();
   $(this).parent().parent().find("a").removeClass("active");
   $(this).addClass("active");
  })

  $("#style-switcher").animate({
   left: "-189px"
  });

 });
Bootstrap 4 Color Switcher Reviewed by Prem Regmi on 6:37:00 PM Rating: 5

No comments:

Designed by Next Bootstrap

Contact Form

Name

Email *

Message *

Powered by Blogger.