Change Background Color Dynamically using Bootstrap Color Picker

It's very interesting to change the styles of website dynamically. In many websites, users are enabled to change background color of website dynamically. So in this tutorial you will learn how to change background color of website dynamically using Bootstrap Color Picker and save into MySQL database table using PHP. In this tutorial, we have used Bootstrap Color Picker plugin to create color picker. The tutorial explained in very easy steps with live demo and link to download source code of live demo.


So let’s start the coding. We will have following file structure to change background color of website dynamically using Bootstrap Color Picker.

• index.php


• save_change.php


• scripts.js

Steps1: Include Bootstrap Color Picker Plugin
As we will use Bootstrap Color Picker plugin to create color picker, so we need to include plugin files in index.php to create Color Picker. We will also include scripts.js to create color picker on page load.

<script src="bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js"></script>
<link href="bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css" rel="stylesheet">
<script src="scripts/scripts.js"></script>




Steps2: Create Color Picker HTML
In index.php, we will create HTML to create color picker to change background color and reset background color.
<div class="container">
<h2>Change Background Color Dynamically using Bootstrap Color Picker</h2>
<div class="row">
<div class="col-md-4 col-md-offset-2 well">
<a class="btn btn-default" id="change-color">Change background color</a>
<a class="btn btn-default" id="reset-color">Reset Default</a>
</div>
</div>
</div>


Steps3: Change Background Color Dynamically
Now in scripts.js, we will handle functionality to change background color dynamically when choose color from Color Picker. The Ajax request also sends to server side save_change.php with changed color value to save changed color into MySQL database.

$('#change-color').colorpicker().on('changeColor', function(e) {
console.log( e.color.toString('rgba'));
var background_color = e.color.toString('rgba');
$('body')[0].style.backgroundColor = background_color;
$.ajax({
method: "POST",
url: "save_change.php",
data: { change_color:1, background: background_color}
})
.done(function(response) {
// display change color message
});
});


We will also handle functionality to reset background color when Reset Default button clicked. The Ajax request also send to server side save_change.php to save default background color into MySQL database.

$( "#reset-color" ).click(function() {
$('body')[0].style.backgroundColor = "";
$.ajax({
method: "POST",
url: "save_change.php",
data: {change_color:1, background: "#fff"}
})
.done(function(response) {
});
});


Steps4: Save Changed Background Color into MySQL Database
Finally in save_change.php, you can write your MySQL update query to update changed background color according to your requirement.
<?php
include_once("../db_connect.php");
if(isset($_POST['change_color'])) {
// Write update MySQL query to update background color in MySQL database table
}
?>


You can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]