How can we implement a dark mode using jQuery on an HTML page?
add a comment
1 Answer
Here is a basic example of implementing a dark mode using jQuery:
HTML:
<body>
<div id="main-content">
<h1>Welcome to my website</h1>
<p>This is some sample text</p>
<button id="dark-mode-btn">Toggle Dark Mode</button>
</div>
</body>
CSS:
body {
background-color: #f2f2f2;
color: #333;
}
.dark-mode {
background-color: #333;
color: #f2f2f2;
}
jQuery:
$(document).ready(function() {
// toggle dark mode on button click
$('#dark-mode-btn').click(function() {
$('body').toggleClass('dark-mode');
});
});
In this example, we have a button with an ID of "dark-mode-btn" that toggles the "dark-mode" class on the body element when clicked. The "dark-mode" class applies a dark background color and light text color to create a dark mode effect. You can customize the dark mode styles to fit your specific needs.
Your Answer
Stats
Asked: 2023-06-17 01:37:49 +0000
Seen: 11 times
Last updated: Jun 17 '23