From 5db777053ea577beacf1a5be49e30db5ba534e96 Mon Sep 17 00:00:00 2001
From: JulianPrieber <60265788+JulianPrieber@users.noreply.github.com>
Date: Fri, 18 Feb 2022 10:10:13 +0100
Subject: [PATCH] Added dark mode detection
Added automatic dark mode detection to littlelink.blade.php via a cookie with js.cookie.min.js (see previous commit).
Detecting the dark mode setting is done with JavaScript. The script detects the preferred dark mode setting in the client's browser and saves it with a cookie. If the script detects a change in this setting, it corrects the cookie.
Loading the appropriate skeleton.css is done via PHP with an if-else statement. If the cookie (saved by the previous script) color scheme equals 'dark' it will load skeleton-dark.css (found in /littlelink/css).
If dark mode is not detected OR nothing is detected/cookie is getting blocked, the statement defaults to skeleton-light.css (also found in /littlelink/css).
You could change what the if-else statement defaults to (i.e. which color scheme is loaded if the cookie fails to detect) by switching 'skeleton-dark.css' and 'skeleton-light.css' around (see comment in if statement).
Everything added is commented and marked with begin/end.
Credit to 'user1575941' on Stack Overflow who's commented code REALLY helped getting behind all this.
---
resources/views/littlelink.blade.php | 28 ++++++++++++++++++++++++++++
1 file changed, 28 insertions(+)
diff --git a/resources/views/littlelink.blade.php b/resources/views/littlelink.blade.php
index 1425f47..909f716 100644
--- a/resources/views/littlelink.blade.php
+++ b/resources/views/littlelink.blade.php
@@ -57,6 +57,34 @@
@media (max-width: 767px) {
}
+
+
+
+
+
+ @if ($color_scheme == 'dark')
+
+
+ @else
+
+ @endif
+