Bight/dark mode signature

by Alon Rotem

HTML

<div class="switchArea">
<label class="switch">
  <input id="chkDark" type="checkbox">
  <span class="slider"></span>
</label>
<span id="lbldark" class="switchlabel">Dark mode</span>
</div>

<h2>
Main signature
</h2>

<div dir="ltr">
<table border="0" cellpadding="0" style="font-family:Calibri,Candara,Segoe,Optima,Arial,sans-serif;font-size:10pt" cellspacing="0"><tbody>

<tr><td colspan="2" style="padding:5px 0px">Alon Rotem.</td></tr>



<tr>
<td><a href="tel:+31640444881" style="text-decoration:none" title="Call me! (NL)" target="_blank">
<img src="https://1.bp.blogspot.com/-OK44pKTvamY/YHhD1AI3VfI/AAAAAAABIy0/bS9JVL-8FyQSHWCFzWWuprhn0TneWEiMQCLcBGAsYHQ/s0/phone-call-nl.png">
</a></td><td>
<a href="tel:+31640444881" style="text-decoration: none; color: rgb(66, 133, 244); position: relative;top: -4px;padding-left: 5px;" title="Call me! (NL)" target="_blank">+31 6 40 444 881</a>
<a href="https://wa.me/31640444881" title="WhatsApp me! (NL)" style="text-decoration:none" target="_blank"><img src="https://1.bp.blogspot.com/--t9Nw_Ctf5E/YHhD1bln1YI/AAAAAAABIy4/cF6gYerp-C4ZDvIhGFpKAx-eG2q0qolQgCLcBGAsYHQ/s0/whatsapp.png"></a>
</td>
</tr>

<tr>
<td>
<a href="tel:+359884013532" style="text-decoration:none" title="Call me! (BG)" target="_blank">
<img src="https://1.bp.blogspot.com/-xdF_KTw_a7w/YHhD06aU1fI/AAAAAAABIys/RsWCiRmBT-spH7GoKKr-6ZmjdXz4rZX3wCLcBGAsYHQ/s0/phone-call-bg.png">
</a></td><td>
<a href="tel:+359884013532" style="text-decoration: none; color: rgb(66, 133, 244); position: relative;top: -4px;padding-left: 5px;" title="Call me! (BG)" target="_blank" >+359 88 401 3532</a>
<a href="https://wa.me/359884013532" title="WhatsApp me! (BG)" style="text-decoration:none" target="_blank"><img src="https://1.bp.blogspot.com/--t9Nw_Ctf5E/YHhD1bln1YI/AAAAAAABIy4/cF6gYerp-C4ZDvIhGFpKAx-eG2q0qolQgCLcBGAsYHQ/s0/whatsapp.png"></a>
</td>
</tr>


<tr>
<td><a title="Call me on Skype" style="text-decoration:none">
<img...

CSS

body
{
  height: 100%;
  background-color: white;
  color: black;
  transition: background-color 1s ease;
  transition: color 1s ease;
  font-family: arial;
}

.bodyDark
{
  background-color: black;
  color: white;
  transition: background-color 1s ease;
  transition: color 1s ease;
}

.switch {
  position: relative;
  display: inline-block;
  width: 37px;
  height: 23px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(15px);
  -ms-transform: translateX(15px);
  transform: translateX(15px);
}

.switchlabel
{
  font-family: arial;
  font-size: 11pt;
  position: relative;
  top: 4px;
}
.switchArea
{
  margin-bottom: 50px;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  //alert("ready");
  var chkDark = document.getElementById("chkDark");
  var lbldark = document.getElementById("lbldark");
  chkDark.addEventListener("click", toggleDark);
  lbldark.addEventListener("click", toggleDark);
  toggleDark();
});

function toggleDark(e)
{
	var chkDark = document.getElementById("chkDark");
	if(e && e.target && e.target.id=="lbldark")
  {
  	chkDark.checked = !chkDark.checked;
  }
  if(chkDark.checked)
  {
  	document.body.classList.add("bodyDark");
  }
  else
  {
  	//alert("bright");
    document.body.classList.remove("bodyDark");
  }
}