I have implemented a feature on my website that allows users to toggle between dark and light themes using the select tag with jQuery.
Here is the code snippet that I am currently using:
$(function() {
// Code for changing stylesheets based on select option
});
$(document).ready(function() {
// Code for setting the value of the select element
});Now, I want to replace the select tag with a checkbox for toggling between themes/stylesheets.
Update
I have updated the code snippet successfully to achieve this functionality:
$(document).ready(function() {
// Code for implementing theme toggle functionality using a checkbox
});<?php
if (isset($_COOKIE['css'])) {
$style = $_COOKIE['css'];
} else {
$style = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo $style; ?>.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<body>
<div class="style">
<label>Dark Theme</label>
<input type="checkbox" name="" id="style">
<button type="submit" id="btnSubmit" class="btn btn-success">Change</button>
</div>
</body>
</html>