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.
