You could use CSS variables and a little bit of JavaScript to switch themes.
Define the theming in the .light or the .dark then set the class of the body to it. It will set the variables to the theme color.
Ex:
function toLight() {
document.body.classList.remove('dark');
document.body.classList.add('light');
}
function toDark() {
document.body.classList.remove('light');
document.body.classList.add('dark');
}
.light {
--font-color: #111;
--bg-color: #fff;
}
.dark {
--font-color: #eee;
--bg-color: #111;
}
p, h1 {
color: var(--font-color);
}
body {
background-color: var(--bg-color);
}
<body class="light">
<h1>title</h1>
<p>text blah blah</p>
<button onclick="toDark()">switch to dark</button>
<button onclick="toLight()">switch to light</button>
</body>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
