From 9d368ef9cb04ab579b4ba8aa34d8394fcaac9389 Mon Sep 17 00:00:00 2001
From: Julian Prieber <60265788+JulianPrieber@users.noreply.github.com>
Date: Thu, 12 May 2022 20:17:48 +0200
Subject: [PATCH] Switched to dark mode detection via CSS instead of JavaScript

Switched to dark mode detection via CSS instead of JavaScript on users LittleLink pages and the home page.

I decided to use this approach instead of the previous JavaScript version. This means that a manual switch to change between light and dark mode by user won't be added.
---
 resources/views/home.blade.php           | 41 +----------------
 resources/views/layouts/footer.blade.php |  8 +---
 resources/views/littlelink.blade.php     | 58 ++----------------------
 3 files changed, 8 insertions(+), 99 deletions(-)
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 05d4e3b..3356b23 100755
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="{{ asset('littlelink/css/normalize.css') }}">
-  <link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
+  <link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-auto.css') }}">
   <link rel="stylesheet" href="{{ asset('littlelink/css/brands.css') }}">
   <link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
   <link rel="stylesheet" href="{{ asset('littlelink/css/animate.css') }}">
@@ -15,41 +15,6 @@
   @else
   <link rel="icon" type="image/svg+xml" href="{{ asset('littlelink/images/logo.svg') }}">
   @endif
-
-  <!-- begin dark mode detection -->
-	<script src="{{ asset('littlelink/js/js.cookie.min.js') }}"></script>
-	<script>
-		// code to set the `color_scheme` cookie
-		var $color_scheme = Cookies.get("color_scheme");
-		function get_color_scheme() {
-		return (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
-		}
-		function update_color_scheme() {
-		Cookies.set("color_scheme", get_color_scheme());
-		}
-		// read & compare cookie `color-scheme`
-		if ((typeof $color_scheme === "undefined") || (get_color_scheme() != $color_scheme))
-		update_color_scheme();
-		// detect changes and change the cookie
-		if (window.matchMedia)
-		window.matchMedia("(prefers-color-scheme: dark)").addListener( update_color_scheme );
-		// reloads page to apply the dark mode cookie
-		window.onload = function() {
-		    if(!window.location.hash && get_color_scheme() == "dark" && (get_color_scheme() != $color_scheme)) {
-		        window.location = window.location + '#dark';
-		        window.location.reload();
-		    }
-		}
-	</script>
-		<?php // loads dark mode CSS if dark mode detected
-		     $color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; ?>
-		@if ($color_scheme == '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
-					<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
-					@endif
-  <!-- end dark mode detection -->
 </head>
 <body>
 
@@ -97,12 +62,10 @@ foreach($pages as $page)
 		      <?php echo $message->home_message; ?>
         </div>
         
-<?php $initial=1; // <-- Effectively sets the initial loading time of the buttons. This value should be left at 1. ?>
-        <!-- Replace # with your profile URL. Delete whatever you don't need & create your own brand styles in css/brands.css -->  
+        <?php $initial=1; // <-- Effectively sets the initial loading time of the buttons. This value should be left at 1. ?>
         <div style="--delay: {{ $initial++ }}s" class="button-entrance"><div class="button button-github button hvr-grow hvr-icon-wobble-vertical"><img class="icon hvr-icon" src="{{ asset('littlelink/icons/github.svg') }}">Github</div></div>
         <div style="--delay: {{ $initial++ }}s" class="button-entrance"><div class="button button-twitter button hvr-grow hvr-icon-wobble-vertical"><img class="icon hvr-icon" src="{{ asset('littlelink/icons/twitter.svg') }}">Twitter</div></div>
         <div style="--delay: {{ $initial++ }}s" class="button-entrance"><div class="button button-instagram button hvr-grow hvr-icon-wobble-vertical"><img class="icon hvr-icon" src="{{ asset('littlelink/icons/instagram.svg') }}">Instagram</div></div>
-        <!--<a class="button button-pinterest" href="#"><img class="icon" src="{{ asset('littlelink/icons/pinterest.svg') }}">Pinterest</a>-->
         </br></br>
 
         <p>and {{ $countButton - 3 }} other buttons ...</p>
diff --git a/resources/views/layouts/footer.blade.php b/resources/views/layouts/footer.blade.php
index f82410a..0885df7 100755
--- a/resources/views/layouts/footer.blade.php
+++ b/resources/views/layouts/footer.blade.php
@@ -8,11 +8,7 @@
 </div>
 
 @if(env('DISPLAY_CREDIT') === true)
-<?php if ($color_scheme == 'dark') {
-			$textcolor = '#FFFFFF';
-				} else {
-					$textcolor = '#100a26';
-						} ?>
+<style>.txt{font-weight:700;font-size:15px}@media (prefers-color-scheme: dark){.txt-clr{color:#FFF!important;}}@media (prefers-color-scheme: light){.txt-clr{color:#100a26!important;}}</style>
 <a class="spacing" href="https://littlelink-custom.com" target="_blank" title="Learn more">
 	<section class="hvr-grow fadein">
 		<div class="parent-footer" >
@@ -20,7 +16,7 @@
 			<img class="image-footer2" src="{{ asset('littlelink/images/just-ll.svg') }}" alt="LittleLink Custom"></img>
 		</div>
 
-		<a href="https://littlelink-custom.com" style="color: {{ $textcolor }}; font-weight: 700; font-size: 15px;">Powered by LittleLink Custom</a>
+		<a href="https://littlelink-custom.com" class="txt txt-clr">Powered by LittleLink Custom</a>
 	</section>
 </a><br><br><br>
 @endif
\ No newline at end of file
diff --git a/resources/views/littlelink.blade.php b/resources/views/littlelink.blade.php
index 572075e..34173bb 100644
--- a/resources/views/littlelink.blade.php
+++ b/resources/views/littlelink.blade.php
@@ -11,7 +11,7 @@
   <!-- This shows a preview for title, description and avatar image of users profiles if shared on social media sites -->
 
     <!-- Facebook Meta Tags -->
-    <meta property="og:url" content="{{ url('') }}/{{ "@".$littlelink_name }}">
+    <meta property="og:url" content="{{ url('') }}/@littlelink_name">
     <meta property="og:type" content="website">
     <meta property="og:title" content="{{ $userinfo->name }}">
     <meta property="og:description" content="{{ $userinfo->littlelink_description }}">
@@ -23,8 +23,8 @@
     
     <!-- Twitter Meta Tags -->
     <meta name="twitter:card" content="summary_large_image">
-    <meta property="twitter:domain" content="{{ url('') }}/{{ "@".$littlelink_name }}">
-    <meta property="twitter:url" content="{{ url('') }}/{{ "@".$littlelink_name }}">
+    <meta property="twitter:domain" content="{{ url('') }}/@littlelink_name">
+    <meta property="twitter:url" content="{{ url('') }}/@littlelink_name">
     <meta name="twitter:title" content="{{ $userinfo->littlelink_name }}">
     <meta name="twitter:description" content="{{ $userinfo->littlelink_description }}">
     @if(file_exists(base_path("img/$littlelink_name" . ".png" )))
@@ -40,7 +40,7 @@
 
   <link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="{{ asset('littlelink/css/normalize.css') }}">
-  <link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
+  <link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-auto.css') }}">
   <link rel="stylesheet" href="{{ asset('littlelink/css/brands.css') }}">
   <link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
   <link rel="stylesheet" href="{{ asset('littlelink/css/animate.css') }}">
@@ -50,56 +50,6 @@
   @else
   <link rel="icon" type="image/svg+xml" href="{{ asset('littlelink/images/logo.svg') }}">
   @endif
-  <style>
-	.container { max-width: 1080px !important; }
-  	.button-title { 
-  		    color: white !important;
-		    background: #505050 !important;
-		    height: auto !important;
-		    line-height: 28px !important;
-		    width: auto !important;
-		    padding: 10px !important;
-		    min-width: 300px !important;
-  	}
-  	
-  	@media (max-width: 767px) {
-  	}
-  </style>
-  
-  <!-- begin dark mode detection -->
-	<script src="{{ asset('littlelink/js/js.cookie.min.js') }}"></script>
-	<script>
-		// code to set the `color_scheme` cookie
-		var $color_scheme = Cookies.get("color_scheme");
-		function get_color_scheme() {
-		return (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
-		}
-		function update_color_scheme() {
-		Cookies.set("color_scheme", get_color_scheme());
-		}
-		// read & compare cookie `color-scheme`
-		if ((typeof $color_scheme === "undefined") || (get_color_scheme() != $color_scheme))
-		update_color_scheme();
-		// detect changes and change the cookie
-		if (window.matchMedia)
-		window.matchMedia("(prefers-color-scheme: dark)").addListener( update_color_scheme );
-		// reloads page to apply the dark mode cookie
-		window.onload = function() {
-		    if(!window.location.hash && get_color_scheme() == "dark" && (get_color_scheme() != $color_scheme)) {
-		        window.location = window.location + '#dark';
-		        window.location.reload();
-		    }
-		}
-	</script>
-		<?php // loads dark mode CSS if dark mode detected
-		     $color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; ?>
-		@if ($color_scheme == '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
-					<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
-					@endif
-  <!-- end dark mode detection -->
 </head>
 <body>
 
