From 1eb92e56b2d2d888fdc073bf8593807b3b4158ba Mon Sep 17 00:00:00 2001
From: Julian Prieber <60265788+JulianPrieber@users.noreply.github.com>
Date: Fri, 13 May 2022 13:03:10 +0200
Subject: [PATCH] Added dark mode toggle for Admin/User Panel

A simple toggle switch that sets an override cookie with JavaScript.

The cookie is still read with PHP/blade.
---
 littlelink/css/animate.css                | 43 +++++++++++++++++++++++
 resources/views/layouts/guest.blade.php   |  5 +--
 resources/views/layouts/sidebar.blade.php | 13 +++++--
 resources/views/pages.blade.php           |  5 +--
 resources/views/panel/phpinfo.blade.php   |  5 +--
 5 files changed, 63 insertions(+), 8 deletions(-)

diff --git a/littlelink/css/animate.css b/littlelink/css/animate.css
index 3a4d356..4a103df 100644
--- a/littlelink/css/animate.css
+++ b/littlelink/css/animate.css
@@ -142,4 +142,47 @@ section:hover #footer_spin{
 section #footer_spin{
   animation: spin 4s linear infinite;
   animation-play-state: paused; 
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  max-width: 140px;
+  transform: scale(0.7);
+}
+.toggle span {
+  margin: 0 0.5rem;
+}
+.toggle input[type=checkbox] {
+  height: 0;
+  width: 0;
+  visibility: hidden;
+}
+.toggle input[type=checkbox]:checked + label {
+  background: teal;
+}
+.toggle input[type=checkbox]:checked + label:after {
+  left: calc(100% - 2px);
+  transform: translateX(-100%);
+}
+.toggle label {
+  cursor: pointer;
+  width: 75px;
+  height: 34px;
+  background: rgba(0, 0, 0, 0.27);
+  display: block;
+  border-radius: 40px;
+  position: relative;
+}
+.toggle label:after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 30px;
+  height: 30px;
+  background: #fff;
+  border-radius: 40px;
+  transition: 0.3s;
 }
\ No newline at end of file
diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php
index 99ffcb9..58fe78f 100755
--- a/resources/views/layouts/guest.blade.php
+++ b/resources/views/layouts/guest.blade.php
@@ -42,8 +42,9 @@
 		}
 	</script>
 		<?php // loads dark mode CSS if dark mode detected
-		     $color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; ?>
-		@if($color_scheme == 'dark')
+		     $color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; 
+			 $color_scheme_override = isset($_COOKIE["color_scheme_override"]) ? $_COOKIE["color_scheme_override"] : false; ?>
+		@if ($color_scheme == 'dark' and $color_scheme_override != 'light' or $color_scheme_override == 'dark')
 		<link rel="stylesheet" href="{{ asset('css/app-dark.css') }}">
 		@endif
   <!-- end dark mode detection -->
diff --git a/resources/views/layouts/sidebar.blade.php b/resources/views/layouts/sidebar.blade.php
index 89a6de5..d421c25 100755
--- a/resources/views/layouts/sidebar.blade.php
+++ b/resources/views/layouts/sidebar.blade.php
@@ -35,8 +35,9 @@
 		}
 	</script>
 		<?php // loads dark mode CSS if dark mode detected
-		     $color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; ?>
-		@if ($color_scheme == 'dark')
+		     $color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; 
+			 $color_scheme_override = isset($_COOKIE["color_scheme_override"]) ? $_COOKIE["color_scheme_override"] : false; ?>
+		@if ($color_scheme == 'dark' and $color_scheme_override != 'light' or $color_scheme_override == 'dark')
 					<!-- switch the two <link> Tags below to default to dark mode if cookie detection fails -->
 					<link rel="stylesheet" href="{{ asset('/studio/css/bootstrap.min-dark.css') }}">
 					<link rel="stylesheet" href="{{ asset('/studio/css/style-dashboard-dark.css') }}">
@@ -247,6 +248,14 @@ if ($url1sb->successful() or $url2sb->successful()) {
 					<a style="color:tomato;" class="nav-link" href="{{ url('panel/diagnose') }}" title="Your security is at risk. Some files can be accessed by everyone. Immediate action is required! Click this message to learn more.">Your security is at risk!</a>
 					@endif
 
+					@if ($color_scheme_override == 'dark' or ($color_scheme == 'dark' and $color_scheme_override != 'dark' and $color_scheme_override != 'light'))
+					<div id="myBtn" class="toggle"><span>🌙</span><input type="checkbox" id="toggle-switch" /><label for="toggle-switch"></label><span>☀️</span></div>
+					<script>function ColorOverrride(){document.cookie="color_scheme_override=light; path=/",location.reload()}var btn=document.getElementById("myBtn");btn.addEventListener("click",ColorOverrride);</script>
+					@elseif ($color_scheme_override == 'light' or ($color_scheme == 'light' and $color_scheme_override != 'dark' and $color_scheme_override != 'light'))
+					<div id="myBtn" class="toggle"><span>🌙</span><input type="checkbox" id="toggle-switch" checked/><label for="toggle-switch"></label><span>☀️</span></div>
+					<script>function ColorOverrride(){document.cookie="color_scheme_override=dark; path=/",location.reload()}var btn=document.getElementById("myBtn");btn.addEventListener("click",ColorOverrride);</script>
+					@endif
+
                     <a class="nav-link" href="{{ url('') }}/@<?= Auth::user()->littlelink_name ?>" target="_blank">View Page</a>
                   </div>
                 </li>
diff --git a/resources/views/pages.blade.php b/resources/views/pages.blade.php
index 404668c..81adc7c 100755
--- a/resources/views/pages.blade.php
+++ b/resources/views/pages.blade.php
@@ -42,8 +42,9 @@
 		}
 	</script>
 		<?php // loads dark mode CSS if dark mode detected
-		     $color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; ?>
-		@if ($color_scheme == 'dark')
+		   $color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; 
+			 $color_scheme_override = isset($_COOKIE["color_scheme_override"]) ? $_COOKIE["color_scheme_override"] : false; ?>
+		@if ($color_scheme == 'dark' and $color_scheme_override != 'light' or $color_scheme_override == 'dark')
 					<!-- switch the two <link> Tags below to default to dark mode if cookie detection fails -->
 					<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-dark.css') }}">
 				@else
diff --git a/resources/views/panel/phpinfo.blade.php b/resources/views/panel/phpinfo.blade.php
index d43449c..0b6c756 100644
--- a/resources/views/panel/phpinfo.blade.php
+++ b/resources/views/panel/phpinfo.blade.php
@@ -28,8 +28,9 @@
 		}
 	</script>
 		<?php // loads dark mode CSS if dark mode detected
-		     $color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; ?>
-		@if ($color_scheme == 'dark')
+		     $color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; 
+			 $color_scheme_override = isset($_COOKIE["color_scheme_override"]) ? $_COOKIE["color_scheme_override"] : false; ?>
+		@if ($color_scheme == 'dark' and $color_scheme_override != 'light' or $color_scheme_override == 'dark')
 					<!-- switch the two <link> Tags below to default to dark mode if cookie detection fails -->
 					<link rel="stylesheet" href="{{ asset('/studio/css/bootstrap.min-dark.css') }}">
 					<link rel="stylesheet" href="{{ asset('/studio/css/style-dashboard-dark.css') }}">