<html>
<body>
<h1>Hello World</h1>
<h2>Welcome to my Dark Mode Test</h2>
<p>
Here is some text to convert to dark mode
</p>
<img alt="test" src="https://livecodestream.dev/featured.png" width="100px" />
<br />
<button onclick="toggleTheme('dark');">Dark</button>
<button onclick="toggleTheme('light');">Light Mode</button>
</body>
</html>
:root {
--background-primary: #fff;
--color-primary: #333;
}
html[data-theme='dark'] {
--background-primary: #030303;
--color-primary: #ccc;
}
html {
transition: color 300ms, background-color 300ms;
background: var(--background-primary);
color: var(--color-primary);
}
h1, h2, p {
color: var(--color-primary);
}
// Capture the current theme from local storage and adjust the page to use the current theme.
const htmlEl = document.getElementsByTagName('html')[0];
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
if (currentTheme) {
htmlEl.dataset.theme = currentTheme;
}
// When the user changes the theme, we need to save the new value on local storage
const toggleTheme = (theme) => {
htmlEl.dataset.theme = theme;
localStorage.setItem('theme', theme);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.