Dark Mode Development Tutorials, Guides & Insights

You can adjust CSS variables within media queries to create adaptive layouts.

:root {
    --container-width: 80%;
}

@media (max-width: 768px) {
    :root {
        --container-width: 95%;
    }
}

.container {
    width: var(--container-width);
}

// Check if the user prefers dark mode using window.matchMedia
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

// Log whether dark mode is preferred by the user
console.log('Dark Mode:', isDarkMode);

// Get the dark mode toggle button by its ID
const darkModeToggle = document.getElementById('darkModeToggle');

// Add a click event listener to toggle dark mode on the body
darkModeToggle.addEventListener('click', () => {
    // Toggle the 'dark-mode' class on the body
    document.body.classList.toggle('dark-mode');
});