devol/LinkStack
1
0
Fork 0
mirror of https://github.com/LinkStackOrg/LinkStack.git synced 2025-05-02 02:48:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

Switched to dark mode detection via CSS instead of JavaScript

Browse Source 
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.
This commit is contained in:
Julian Prieber 2022-05-12 20:17:48 +02:00
parent 0e271a1ce2
commit 9d368ef9cb
3 changed files with 8 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
resources/views/home.blade.php
View File

@ -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>

8
resources/views/layouts/footer.blade.php
View File

@ -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

58
resources/views/littlelink.blade.php
View File

@ -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>