2021-04-16 01:00:00 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
|
|
|
|
|
|
|
|
<title>{{ config('app.name') }}</title>
|
|
|
|
|
|
|
|
|
|
<!-- Fonts -->
|
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
|
|
|
|
|
|
|
|
|
|
<!-- Styles -->
|
|
|
|
|
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
|
|
|
|
|
|
|
|
|
|
<!-- Scripts -->
|
|
|
|
|
<script src="{{ asset('js/app.js') }}" defer></script>
|
Fixed dark mode for login/register...
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.
2022-02-21 23:34:07 +01:00
|
|
|
|
|
|
|
|
<!-- 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; ?>
|
2022-02-27 19:43:58 +01:00
|
|
|
@if($color_scheme == 'dark')
|
Fixed dark mode for login/register...
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.
2022-02-21 23:34:07 +01:00
|
|
|
<link rel="stylesheet" href="{{ asset('css/app-dark.css') }}">
|
|
|
|
|
@endif
|
|
|
|
|
<!-- end dark mode detection -->
|
2021-04-16 01:00:00 +02:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="font-sans text-gray-900 antialiased">
|
|
|
|
|
{{ $slot }}
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
