Hello everyone,
I've been doing web design for a while.
My skills are still very limited.
But I thank you in advance that I have the opportunity to ask for help here and, if possible, to offer help.
I would like to add a "dark mode" to my website. Unfortunately, I can only find themes, templates, for Wordpress, etc. on Google. However, I can't find how I can do this myself.
I want the site to recognize when the OS is in dark mode, activate the dark mode of the website, or if the user activates it, the site remembers that. How do you usually approach this topic?
My way, which doesn't work as intended:
(Time delay until the javascript sets the right class)
(detection prefer-color-scheme dark is not implemented yet)
CSS:
HTML:
Javascript:
Thx!
Gebi65
And sry for my very bad english
I've been doing web design for a while.
My skills are still very limited.
But I thank you in advance that I have the opportunity to ask for help here and, if possible, to offer help.
I would like to add a "dark mode" to my website. Unfortunately, I can only find themes, templates, for Wordpress, etc. on Google. However, I can't find how I can do this myself.
I want the site to recognize when the OS is in dark mode, activate the dark mode of the website, or if the user activates it, the site remembers that. How do you usually approach this topic?
My way, which doesn't work as intended:
(Time delay until the javascript sets the right class)
(detection prefer-color-scheme dark is not implemented yet)
CSS:
CSS:
:root {
--bg-color-body: rgb(255, 255, 255);
--color-font: #333333;
--color-bg-header: white;
.dark_mode {
--bg-color-body: rgb(68, 68, 68);
--color-font: rgb(202, 202, 202);
--color-bg-header: grey;
HTML:
HTML:
<body class="dark_mode">
</body>
Javascript:
JavaScript:
window.onload = function ismatch() {
let cookie_string = document.cookie;
// alert(cookie_string);
let cookie_test = cookie_string.search("light");
if (cookie_test >= 0) {
document.getElementById('nachtmodus').checked = true;
document.body.classList.toggle("dark_mode");
}
else {
document.getElementById('nachtmodus').checked = false;
}
}
function darkmode() {
a = document.getElementById('nachtmodus');
if(a.checked) {
document.getElementById('daynight').style.display ="none"; } else {
document.getElementById('daynight').style.display ="inline";
}
a = document.getElementById('nachtmodus');
if (a.checked) {
document.body.classList.toggle("dark_mode");
document.cookie = "style=light; path=/";
}
if (!a.checked) {
document.body.classList.toggle("light");
document.cookie = "style=dark; path=/";
}
}
Thx!
Gebi65
And sry for my very bad english
Last edited: