<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DarkMode</title>
<style>
body { background: #F7F8F9; }
button {
color: black;
background-color: white;
}
</style>
<script>
function colorSwap(Mode) {
var colorName = "";
var color = "";
var BodyColor = "";
// Getting what color the client has stored
var CookieList = document.cookie.split("; ");
for ( i = 0; i < CookieList.length; i++){
if (CookieList[i].split("=")[0] == "color"){
var backGroundColor = CookieList[i].split("=")[1];
break;
}
}
// Checks if from a button change or reload of site
if (Mode == 0 ){
if ( backGroundColor == "white" ) {
BodyColor = "#F7F8F9";
color="white";
colorText="Black";
colorName = "Dark";
} else{
BodyColor = "#292929";
color="Black";
colorText="white";
colorName = "Light";
}
} else {
if ( backGroundColor == "white" ) {
BodyColor = "#292929";
color="black";
colorText="white";
colorName = "Light"
document.cookie = "color=black";
} else{
BodyColor = "#F7F8F9";
color="white";
colorText="black";
colorName = "Dark";
document.cookie = "color=white";
}
}
// Getting what color the client has stored
var CookieList = document.cookie.split("; ");
for ( i = 0; i < CookieList.length; i++){
if (CookieList[i].split("=")[0] == "color"){
var backGroundColor = CookieList[i].split("=")[1];
break;
}
}
//document.getElementsByTagName('body')[0].style.color=color;
document.getElementById('btnID').style.background=colorText;
document.getElementById('masthead').style.color=color;
document.getElementById('site-navigation').style.color=color;
document.getElementById('btnID').style.color=color;
document.getElementsByTagName('body')[0].style.background=BodyColor;
document.getElementById('masthead').style.background=color;
document.getElementById('site-navigation').style.background=color;
document.getElementsByClassName('separate-containers')[0].querySelectorAll('.inside-article').forEach(el => { el.style.background=color; el.style.color=colorText;});
// For the main page post coloring design
document.querySelectorAll('.entry-title').forEach(el => { el.getElementsByTagName('a')[0].style.color=colorText; });
document.querySelectorAll('.entry-title').forEach(el => { el.style.color=colorText; });
document.querySelectorAll('.entry-summary').forEach(el => { el.style.color=colorText; });
/* Site bar design
document.getElementById("block-13").style.background=color;
document.getElementById("block-2").style.background=color;
document.getElementById("block-3").style.background=color;
document.getElementById("block-4")[2].style.background=color;
*/
document.querySelectorAll('.widget.inner-padding.widget_block').forEach(el => { el.style.background=color; } );
var x = document.getElementsByClassName('sidebar')[0].getElementsByClassName('widget').length
document.getElementsByClassName('wp-block-search__label')[0].style.color=colorText;
document.querySelectorAll('.wp-block-heading').forEach( el => { el.style.color=colorText; } );
document.getElementsByClassName('sidebar')[0].getElementsByClassName('widget')[x-1] .style.color=colorText;
document.getElementById('btnID').innerHTML=colorName;
}
function CheckCookie(){
// Setting up a coockie for a new user
if (document.cookie == null || !document.cookie.includes("color=") ) {
document.cookie = "color=white";
}
colorSwap(0);
//console.log( ( (document.cookie).split(";")[0] ).split("=")[0] )
}
</script>
</head>
<body onload="CheckCookie()">
<button id = "btnID" onclick="colorSwap(1)">Dark</button>
</body>
</html>