<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row d-flex justify-content-center"> <div class="switcher"> <h2 class="text-center text-primary">Color Switcher</h2> <button class="btn btn-primary btn-box rounded-circle" data-color="#0d6efd"></button> <button class="btn btn-secondary btn-box rounded-circle" data-color="#6c757d"></button> <button class="btn btn-success btn-box rounded-circle" data-color="#198754"></button> <button class="btn btn-danger btn-box rounded-circle" data-color="#dc3545"></button> <button class="btn btn-warning btn-box rounded-circle" data-color="#ffc107"></button> <button class="btn btn-info btn-box rounded-circle" data-color="#0dcaf0"></button> <button class="btn btn-dark btn-box rounded-circle" data-color="#212529"></button> </div> </div> </div>

.btn-box{ width:2rem; height:2rem; }

const buttons = document.querySelectorAll('.btn-box'); const body = document.body; buttons.forEach((btn) => { btn.addEventListener('click', (e) => { // Access the custom data-color attribute const selectedColor = e.target.dataset.color; if (selectedColor) { body.style.backgroundColor = selectedColor; } }); });