<span id="mode-toggle">モード切替</span>
<div id="wrap">
<h1>Sample Text</h1>
</div>
#mode-toggle {
cursor: pointer;
color: #000;
}
#wrap {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
color: var(--text-color);
background-color: var(--bg-color);
transition: color .5s, background-color .5s;
}
:root {
--mode:light;
--bg-color: var(--light-bg-color);
--text-color: var(--light-text-color);
// Light Mode
--light-bg-color: #fff;
--light-text-color: #000;
// Dark Mode
--dark-bg-color: #000;
--dark-text-color: #fff;
}
View Compiled
const modeToggle = () => {
$('#mode-toggle').on('click', function() {
const html = document.querySelector('html');
const currentMode = getComputedStyle(html).getPropertyValue("--mode");
let mode = null, bgColor = null, textColor = null;
switch (currentMode) {
case 'light':
mode = 'dark';
bgColor = getComputedStyle(html).getPropertyValue("--dark-bg-color");
textColor = getComputedStyle(html).getPropertyValue("--dark-text-color");
break;
case 'dark':
mode = 'light';
bgColor = getComputedStyle(html).getPropertyValue("--light-bg-color");
textColor = getComputedStyle(html).getPropertyValue("--light-text-color");
break;
default:
break;
}
html.style.setProperty('--mode', mode);
html.style.setProperty('--bg-color', bgColor);
html.style.setProperty('--text-color', textColor);
});
}
$(function() {
modeToggle();
});
This Pen doesn't use any external CSS resources.