devol
/
LinkStack
mirror of https://github.com/LinkStackOrg/LinkStack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.
This commit is contained in:
JulianPrieber 2022-02-21 23:34:07 +01:00 committed by GitHub
parent c24863f7cc
commit c1110d4ced
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
resources/views/layouts/guest.blade.php
View File

@ -15,6 +15,31 @@
<!-- Scripts --> <!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script> <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> </head>
<body> <body>
<div class="font-sans text-gray-900 antialiased"> <div class="font-sans text-gray-900 antialiased">