Brtest Tutorial
Project: Light/Dark Mode Switch
In this project, you will create a simple toggle button that switches your web page between light mode and dark mode. You will use JavaScript to respond to button clicks, update CSS styles, and store the user�s choice.
Project Overview
You will build a web page that:
- Switches between light and dark themes
- Uses
classList.toggle()for easy styling - Remembers the theme with
localStorage
HTML Structure
Example
Basic HTML setup:
<div class='container'>
<h2>Light/Dark Mode Switch</h2>
<p>Click the button below to change the theme.</p>
<button id='toggleBtn'>🌙 Dark Mode</button>
</div>
Try it Yourself »
CSS Styling
We define light mode as default, and dark mode using a CSS class.
Example
Light and dark styles:
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
color: #222;
text-align: center;
padding: 50px;
transition: background 0.3s, color 0.3s;
}
.container {
max-width: 400px;
margin: auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: background 0.3s;
}
button {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 6px;
cursor: pointer;
background: #111;
color: white;
transition: background 0.3s;
}
.dark-mode {
background: #111;
color: #f4f4f4;
}
.dark-mode .container {
background: #222;
box-shadow: 0 4px 10px rgba(255,255,255,0.1);
}
.dark-mode button {
background: #f4f4f4;
color: #111;
}
Try it Yourself »
JavaScript Functionality
Now let�s add interactivity.
We will toggle a CSS class on the body element when the button is clicked.
Example
Toggle dark mode with JavaScript:
<script>
const btn = document.getElementById('toggleBtn');
const body = document.body;
// Load saved theme
if (localStorage.getItem('theme') === 'dark') {
body.classList.add('dark-mode');
btn.textContent = '☀️ Light Mode';
}
// Toggle theme
btn.addEventListener('click', () => {
body.classList.toggle('dark-mode');
const dark = body.classList.contains('dark-mode');
btn.textContent = dark ? '☀️ Light Mode' : '🌙 Dark Mode';
localStorage.setItem('theme', dark ? 'dark' : 'light');
});
</script>
Try it Yourself »
How It Works
- The button click toggles the
dark-modeclass on thebody. - CSS automatically updates the background and text colors.
- The current theme is saved in
localStorageso it stays after refreshing the page.
Bonus Features
- Detect the user�s system preference using
window.matchMedia('(prefers-color-scheme: dark)'). - Add a smooth fade-in or icon animation when switching themes.
- Sync the theme across multiple pages using
localStorage.
Challenge
- Add a keyboard shortcut (e.g. press �D�) to toggle dark mode.
- Store the date and time the user last changed the theme.
- Animate the background color transition using CSS.
Summary
- You built a light/dark mode switch using JavaScript and CSS classes.
classList.toggle()makes theme switching simple.localStorageremembers user settings across reloads.
Next, you'll move on to the JavaScript Browser API section � learning how to interact with browser features such as local storage, geolocation, and history.
