<div class="container">
<div class="color-switch">
<button class="js--change-scheme" data-scheme="light"></button>
<button class="dark js--change-scheme" data-scheme="dark"></button>
</div>
<p>
You grabbed my hand<br />
And we fell into it<br />
Like a daydream<br />
Or a fever
</p>
</div>
:root {
--type: #383735;
--background: #f7f3e9;
--highlight: #dd6969;
--mid: #787671;
--button-light: #f7f3e9;
--button-dark: #383735;
--margin: 1rem;
--transition-speed: 200ms;
--transition-timing: ease;
}
:root body.dark {
--type: #f7f3e9;
--background: #383735;
}
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--background);
min-height: 100%;
font-family: Constantia, Georgia, serif;
line-height: 1.5;
color: var(--type);
transition: all var(--transition-speed) var(--transition-timing);
}
p {
padding: calc(var(--margin) * 2);
font-size: 1.5rem;
}
.container {
border: 1px solid var(--mid);
border-top-right-radius: var(--margin);
padding: var(--margin) 0;
margin: var(--margin);
}
.color-switch {
display: flex;
justify-content: flex-end;
padding: 0 var(--margin);
}
button {
cursor: pointer;
width: 2em;
height: 2em;
border: 2px solid var(--highlight);
border-radius: 50%;
margin-left: var(--margin);
background-color: var(--button-light);
transition: border-color var(--transition-speed) var(--transition-timing);
}
button.dark {
background-color: var(--button-dark);
border-color: var(--button-light);
}
body.dark button {
border-color: var(--button-light);
}
body.dark button.dark {
border-color: var(--highlight);
}
const schemeToggle = document.querySelectorAll('.js--change-scheme');
const storedScheme = localStorage.getItem('as-scheme');
const { classList } = document.body;
function setInitialScheme() {
if (storedScheme) {
classList.add(storedScheme);
return;
}
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
classList.add('dark');
}
};
function changeScheme(scheme) {
if (scheme === 'dark') {
classList.add('dark');
localStorage.setItem('as-scheme', 'dark');
}
else {
classList.remove('dark');
localStorage.setItem('as-scheme', 'light');
}
}
schemeToggle.forEach(button => {
button.addEventListener('click', () => {
changeScheme(button.dataset.scheme);
});
});
setInitialScheme();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.