In de moderne webontwikkeling is het belangrijk om gebruikers de mogelijkheid te geven om hun ervaring aan te passen. Een dynamische themawisselaar is een geweldige manier om dit te bereiken. In deze gids leer je hoe je een themawisselaar kunt implementeren die tussen licht- en donkere modi wisselt, gebruikersvoorkeuren opslaat en een naadloze ervaring biedt.
Deze functionaliteit is niet alleen handig, maar toont ook je vaardigheden als ontwikkelaar. We zullen stapsgewijs door de implementatie gaan, van het opzetten van de HTML-structuur tot het toevoegen van interactiviteit met JavaScript. Laten we beginnen!
De basis van je HTML-structuur
Om te beginnen, moet je een basis-HTML-pagina opzetten. Dit is het skelet van je project. Je hebt een container nodig voor je inhoud en een knop voor de themawisselaar. Hier is een voorbeeld van hoe je dit kunt doen:
<!DOCTYPE html>
<html lang="en">
<head>
< Meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Theme Switcher</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Dynamic Theme Switcher</h1>
<p>Effortlessly toggle between light and dark modes to enhance your browsing comfort.</p>
<label class="theme-switch">
<input type="checkbox" id="themeToggle">
<span class="slider round"></span>
</label>
<div class="content-card">
<h2>Welcome to our website!</h2>
<p>This is an example content section. Notice how the colors of the background, text, and card dynamically change when you flip the theme switch above. We use vanilla JavaScript to manage the state and CSS variables for a smooth transition.</p>
<p>Your preference is saved locally, so the site remembers your choice even after you close and reopen your browser.</p>
<button class="action-button">Learn More</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Stijl toevoegen met CSS
Met CSS kun je je thema’s tot leven brengen. We zullen CSS-gebruikersvariabelen gebruiken om de stijlen voor zowel licht- als donkere modi te definiëren. Dit maakt het wisselen van thema’s eenvoudig en efficiënt. Hier is een voorbeeld van hoe je dit kunt doen:
/* Global Box Model & Font Settings */
*, *:before, *:after {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 20px;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* CSS Variables for Theme Management */:root {
/* Light Theme Defaults */
--bg-color: #f0f2f5;
--text-color: #333333;
--heading-color: #2c3e50;
--card-bg: #ffffff;
--card-border: #e0e0e0;
--button-bg: #007bff;
--button-text: #ffffff;
--switch-bg-off: #ccc;
--switch-bg-on: #66bb6a;
--switch-handle: #ffffff;
}
body.dark-theme {
/* Dark Theme Overrides */
--bg-color: #1a202c;
--text-color: #e2e8f0;
--heading-color: #edf2f7;
--card-bg: #2d3748;
--card-border: #4a5568;
--button-bg: #667eea;
--button-text: #ffffff;
--switch-bg-off: #718096;
--switch-bg-on: #9f7aea;
--switch-handle: #ffffff;
}
/* Main Container Styling */.container {
background-color: var(--bg-color);
color: var(--text-color);
padding: 40px;
border-radius: 12px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
max-width: 700px;
width: 100%;
text-align: center;
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
/* Theme Switch Styles */.theme-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin: 20px auto 40px;
}.theme-switch input {
opacity: 0;
width: 0;
height: 0;
}.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--switch-bg-off);
-webkit-transition:.4s;
transition:.4s;
}.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: var(--switch-handle);
-webkit-transition:.4s;
transition:.4s;
}
input:checked +.slider {
background-color: var(--switch-bg-on);
}
input:focus +.slider {
box-shadow: 0 0 1px var(--switch-bg-on);
}
input:checked +.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */.slider.round {
border-radius: 34px;
}.slider.round:before {
border-radius: 50%;
}
/* Content Card Styling */.content-card {
background-color: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 8px;
padding: 30px;
margin-top: 30px;
text-align: left;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Action Button Styling */.action-button {
background-color: var(--button-bg);
color: var(--button-text);
border: none;
padding: 12px 25px;
border-radius: 6px;
cursor: pointer;
font-size: 1.0em;
font-weight: bold;
transition: background-color 0.3s ease, transform 0.2s ease;
}.action-button:hover {
background-color: var(--button-bg);
filter: brightness(110%);
transform: translateY(-2px);
}.action-button:active {
transform: translateY(0);
}Interactiviteit toevoegen met JavaScript
Met JavaScript kun je je themawisselaar interactief maken. We zullen een event listener toevoegen die reageert op gebruikersacties en de thema’s wisselt. Hier is een voorbeeld van hoe je dit kunt doen:
document.addEventListener('DOMContentLoaded', => {
// Get references to the theme toggle checkbox and the body element
const themeToggle = document.getElementById('themeToggle');
const body = document.body;
/**
* Sets the theme based on the `isDark` boolean.
* Adds or removes the 'dark-theme' class on the body and updates the toggle state.
* @param {boolean} isDark - True for dark theme, false for light theme.
*/
const setTheme = (isDark) => {
if (isDark) {
body.classList.add('dark-theme');
themeToggle.checked = true;
} else {
body.classList.remove('dark-theme');
themeToggle.checked = false;
}
};
// --- Initial Theme Load --- //
// 1. Check for a saved theme preference in localStorage
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
// If 'dark' preference is found, apply dark theme
setTheme(true);
} else if (savedTheme === 'light') {
// If 'light' preference is found, apply light theme
setTheme(false);
} else {
// 2. If no saved preference, check user's system preference
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
setTheme(prefersDark); // Apply system preference
}
// --- Event Listener for Theme Toggle --- //
// Add a 'change' event listener to the theme toggle checkbox
themeToggle.addEventListener('change', => {
if (themeToggle.checked) {
// If the toggle is checked (user wants dark theme)
setTheme(true);
localStorage.setItem('theme', 'dark'); // Save preference
} else {
// If the toggle is unchecked (user wants light theme)
setTheme(false);
localStorage.setItem('theme', 'light'); // Save preference
}
});
});Met deze code kun je een dynamische themawisselaar implementeren die gebruikers de keuze geeft tussen licht- en donkere modi. Dit verbetert de gebruikerservaring aanzienlijk en toont je vaardigheden als ontwikkelaar.
