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.

Also, read:

• Load Dynamic Content in Bootstrap Popover with Ajax, PHP & MySQL
• Create Dynamic Bootstrap Tabs with PHP & MySQL
• Bootstrap Contact Form with Captcha using Ajax and PHP
• Multi Select Dropdown with Checkbox using Bootstrap, jQuery and PHP

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 may also like:

• Build Live Chat System with Ajax, PHP & MySQL
• Create Event Calendar with jQuery, PHP and MySQL
• Build Invoice System with PHP & MySQL
• Push Notification System with PHP & MySQL
• Create Bootstrap Cards with PHP and MySQL
• Build Content Management System with PHP & MySQL
• Convert Unix Timestamp To Readable Date Time in PHP
• Ajax Drop Down Selection Data Load with PHP & MySQL
• Inventory Management System with Ajax, PHP & MySQL
• Drag and Drop File Upload using jQuery and PHP
• Load Dynamic Content in Bootstrap Popover with Ajax, PHP & MySQL

You can view the live demo from the Demo link and can download the script from the Download link below.
Demo Download