From a29e90a065c8a1a04e57512ffe40a4e4f82fc7c2 Mon Sep 17 00:00:00 2001
From: monerooo <102408599+monerooo@users.noreply.github.com>
Date: Fri, 1 Apr 2022 20:02:53 +0200
Subject: [PATCH] Dark Mode Button

---
 _includes/head.html          |  73 ++++++++++++++++++++++++
 _includes/header-custom.html | 107 ++---------------------------------
 2 files changed, 79 insertions(+), 101 deletions(-)

diff --git a/_includes/head.html b/_includes/head.html
index 203c106..875850b 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -29,4 +29,77 @@
 
 	<!-- RSS -->
 	<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="ATOM Feed" />
+	
+	<!-- Dark Mode Button -->
+	<style>
+	.switch {
+	  position: relative;
+	  display: inline-block;
+	  width: 60px;
+	  height: 34px;
+	  margin-top: 0px;
+	}
+
+	.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: 26px;
+	  width: 26px;
+	  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(26px);
+	  -ms-transform: translateX(26px);
+	  transform: translateX(26px);
+	}
+
+	/* Rounded sliders */
+	.slider.round {
+	  border-radius: 34px;
+	}
+
+	.slider.round:before {
+	  border-radius: 50%;
+	}
+
+	table {
+	  margin-top: 34px;
+	}
+
+	td {
+	  height: 50px;
+	  vertical-align: middle;
+	}
+	</style>
 </head>
diff --git a/_includes/header-custom.html b/_includes/header-custom.html
index 2b50b80..47c3f56 100644
--- a/_includes/header-custom.html
+++ b/_includes/header-custom.html
@@ -1,84 +1,10 @@
-<style>
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 60px;
-  height: 34px;
-  margin-top: 0px;
-}
-
-.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: 26px;
-  width: 26px;
-  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(26px);
-  -ms-transform: translateX(26px);
-  transform: translateX(26px);
-}
-
-/* Rounded sliders */
-.slider.round {
-  border-radius: 34px;
-}
-
-.slider.round:before {
-  border-radius: 50%;
-}
-
-table {
-  margin-top: 34px;
-}
-
-td {
-  height: 50px;
-  vertical-align: middle;
-}
-</style>
-
-
-
-<!--<label class="switch">-->
-  <!--<input type="checkbox" checked>-->
-  <!--<span class="slider round"></span>-->
-<!--</label>-->
 <header id="header">
-
-	<!-- Your custom header here -->
+	<!-- Dark Mode Button -->
+	<label class="switch">
+		<input type="checkbox">
+		<span class="slider round"></span>
+	</label>
+	
 	<div>
         <a href="{{ site.baseurl }}">
 		  <img src="{{ "/img/revuo-monero-logo.png" | prepend: site.baseurl | replace: '//', '/' }}" alt="Revuo Monero Logo">
@@ -88,26 +14,5 @@ td {
         <a href="{{ site.baseurl }}" class="wk">Weekly</a>
         <a href="/periodicals/" class="pd">Periodical</a>
     </div>
-
-    <!--Add dark mode here-->
-	<div>
-    <table align="center">
-	<tr>
-	    <td>
-	    <img src="{{ "/img/dark-theme-icon2.png" | prepend: site.baseurl | replace: '//', '/' }}" height="50px" width="50px" alt="Dark Theme">
-	    </td>
-
-	    <td>
-<label class="switch">
-  <input type="checkbox">
-  <span class="slider round"></span>
-</label>
-
-	    </td>
-	</tr>
-    </table>
-	</div>
-
-    <!--Finish dark mode-->
 	
 </header>