Create Dark/Light Color Modes in PHP website With Bootstrap & Jquery

With Bootstrap 5.3, Color modes are now supported in Bootstrap

How Does Color Mode Work in Bootstrap

To set the color mode in bootstrap, we need to specify the color mode with the data-bs-theme attribute

<!doctype html>
<html data-bs-theme="dark" >

Include Bootstrap CSS & JS

<!--Add this in head--->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<!--Add this in footer-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

Include Jquery Script in head

<!--Add this in head-->
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>

Create the switch in bootstrap

<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">

Using Cookies to Remember Color Mode

Javascript function to set cookies

<script>
	function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
</script>

Save Preferred Color mode in Cookies

<script>
$( document ).ready(function() {
    $("#flexSwitchCheckDefault").change(function(){
        
        var colorMode = $('html').attr('data-bs-theme');

        if(colorMode  == 'light'){
            //$(this).attr('color-mode','dark');
            $('html').attr('data-bs-theme','dark');
			setCookie('site-theme', 'dark', 7);
        }
        if(colorMode == 'dark'){
          //  $(this).attr('color-mode','light');
            $('html').attr('data-bs-theme','light');
            setCookie('site-theme', 'light', 7);
        }
    });
});
</script>

Check cookies in PHP

<html <?php if($_COOKIE['site-theme'] == 'dark'){ echo 'data-bs-theme="dark"';}else{echo 'data-bs-theme="light"';}?> >

Popular Articles on Bootstrap

Create WordPress Theme from Scratch with Bootstrap 5