Discovery of color-scheme property
By putting the color-scheme property in your css, you can easily define the theme.
1
2
3
:root {
color-scheme: dark;
}
And by adding a bit of javascript you can easily change the theme of your website
1
2
3
4
5
6
7
<div>
<p>mon text</p>
</div>
<div>
<button onclick="change_theme();">Change the theme</button>
</div>
1
2
3
4
5
function change_theme(){
var theme = getComputedStyle(document.body).getPropertyValue('color-scheme');
var new_theme = (theme == 'dark') ? 'light': 'dark';
document.documentElement.style.setProperty("color-scheme", new_theme);
}
Codepen
You can find the full codepen here