Simple Dark Light Themed Web Page Demo

Tutorials - 2025-07-31

How I made the dark/light theme on this web site is a question I have been asked. I normally make a small script, demo, page or something once I figure something out. That way I have a reference to fall back on, and lots of times a demo.

So, I pieced together a very simple code demo of how to do it.

Copy the following code and save it to a file named: index.html
Then open it in your browser to see it work.




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Dark Light Themed Web Page Demo</title>
	<style>
		body {
			font-family: sans-serif;
			margin: 20px;
			transition: background-color 0.3s, color 0.3s; /* Transistion Speed */
		}

		/* Light Theme style (default) */
		body {
			background-color: #ffffff;
			color: #000000;
		}

		/* Dark Theme style */
		body.dark-theme {
			background-color: #000000;
			color: #ffffff;
		}

		button {
			padding: 10px 15px;
			cursor: pointer;
			border: none;
			border-radius: 5px;
			background-color: #007bff;
			color: white;
		}

		button:hover {
			background-color: #0056b3;
		}
	</style>
</head>
<body>

	<h1>Simple Dark Light Themed Web Page Demo</h1>
	<button id="toggletheme">Toggle Theme</button>
	<p>This is a web page to demo switching between light and dark themes.</p>
	<p>The page uses a cookie to remember the theme setting !!</p>
	<h3>Use the button to toggle themes.</h3>

    <script>
		document.addEventListener('DOMContentLoaded', () => {
			// Get a reference to the button
			const themeToggleButton = document.getElementById('toggletheme');
			// Get a reference to the 'body' of the page
			const body = document.body;

			// Check for saved theme preference in local storage
			const savedTheme = localStorage.getItem('theme');
			if (savedTheme === 'dark') {
				// Add the dark theme to the classlist
				body.classList.add('dark-theme');
			}

			// Add code to run on the 'click' event, to our button
			themeToggleButton.addEventListener('click', () => {
				// Toggle the classlist
				body.classList.toggle('dark-theme');

				// Save theme preference to local storage
				if (body.classList.contains('dark-theme')) {
					localStorage.setItem('theme', 'dark');
				} else {
					localStorage.setItem('theme', 'light');
				}
			});
		});
	</script>
	
    <footer>
        <p>Demo Created by Rock Stevens - <a href="http://rockstevens.com">rockstevens.com</a></p>
    </footer>
	
</body>
</html>