Fixed dark mode for login/register...

JulianPrieber · web-flow · commit c1110d4cedee · 2022-02-21T23:34:07.000+01:00
This fixed the issue of dark mode not displaying on the register, login, forgot password and a few other pages. This one took me a while to fix, and I still don't really know what is going on here. The aforementioned pages already implemented a dark mode, but it didn't seem to work for me. After some testing, I discovered that the dark mode preset doesn't load on chromium based browsers. I have absolutely no idea why that is, if someone could help me with this that would be amazing. I might make an issue out of this later on. As I still wanted to fix this, I finally achieved my goal by doing the caveman approach: I first added the usual dark mode detection. The same used on the home and little link pages (see previous commits if you're interested). Then I wrote and if statement that loads the newly added app-dark.css (see previous commit) that changes text and background color on the pages in question, if the browser type is chromium and dark mode is selected in the browser settings. "@if(strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome' !== false) and $color_scheme == 'dark')" This doesn't look optimal, and I would rather just have the same dark mode as on Firefox, but this is the best I can currently do with my available time.
diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php
@@ -15,6 +15,31 @@
 
         <!-- Scripts -->
         <script src="{{ asset('js/app.js') }}" defer></script>
+        
+  <!-- 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 );
+	</script>
+		<?php // loads dark mode CSS if dark mode detected
+		     $color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; ?>
+		@if(strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome' !== false) and $color_scheme == 'dark')
+		<link rel="stylesheet" href="{{ asset('css/app-dark.css') }}">
+		@endif
+  <!-- end dark mode detection -->
     </head>
     <body>
         <div class="font-sans text-gray-900 antialiased">
