Skip to content

Commit 9d368ef

Browse files
JulianPrieberJulianPrieber
committed
Switched to dark mode detection via CSS instead of JavaScript
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.
1 parent 0e271a1 commit 9d368ef

File tree

3 files changed

+8
-99
lines changed

3 files changed

+8
-99
lines changed

‎resources/views/home.blade.php‎

Lines changed: 2 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,800&display=swap" rel="stylesheet">
88
<link rel="stylesheet" href="{{ asset('littlelink/css/normalize.css') }}">
9-
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
9+
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-auto.css') }}">
1010
<link rel="stylesheet" href="{{ asset('littlelink/css/brands.css') }}">
1111
<link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
1212
<link rel="stylesheet" href="{{ asset('littlelink/css/animate.css') }}">
@@ -15,41 +15,6 @@
1515
@else
1616
<link rel="icon" type="image/svg+xml" href="{{ asset('littlelink/images/logo.svg') }}">
1717
@endif
18-
19-
<!-- begin dark mode detection -->
20-
<script src="{{ asset('littlelink/js/js.cookie.min.js') }}"></script>
21-
<script>
22-
// code to set the `color_scheme` cookie
23-
var $color_scheme = Cookies.get("color_scheme");
24-
function get_color_scheme() {
25-
return (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
26-
}
27-
function update_color_scheme() {
28-
Cookies.set("color_scheme", get_color_scheme());
29-
}
30-
// read & compare cookie `color-scheme`
31-
if ((typeof $color_scheme === "undefined") || (get_color_scheme() != $color_scheme))
32-
update_color_scheme();
33-
// detect changes and change the cookie
34-
if (window.matchMedia)
35-
window.matchMedia("(prefers-color-scheme: dark)").addListener( update_color_scheme );
36-
// reloads page to apply the dark mode cookie
37-
window.onload = function() {
38-
if(!window.location.hash && get_color_scheme() == "dark" && (get_color_scheme() != $color_scheme)) {
39-
window.location = window.location + '#dark';
40-
window.location.reload();
41-
}
42-
}
43-
</script>
44-
<?php // loads dark mode CSS if dark mode detected
45-
$color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; ?>
46-
@if ($color_scheme == 'dark')
47-
<!-- switch the two <link> Tags below to default to dark mode if cookie detection fails -->
48-
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-dark.css') }}">
49-
@else
50-
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
51-
@endif
52-
<!-- end dark mode detection -->
5318
</head>
5419
<body>
5520

@@ -97,12 +62,10 @@ function update_color_scheme() {
9762
<?php echo $message->home_message; ?>
9863
</div>
9964

100-
<?php $initial=1; // <-- Effectively sets the initial loading time of the buttons. This value should be left at 1. ?>
101-
<!-- Replace # with your profile URL. Delete whatever you don't need & create your own brand styles in css/brands.css -->
65+
<?php $initial=1; // <-- Effectively sets the initial loading time of the buttons. This value should be left at 1. ?>
10266
<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>
10367
<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>
10468
<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>
105-
<!--<a class="button button-pinterest" href="#"><img class="icon" src="{{ asset('littlelink/icons/pinterest.svg') }}">Pinterest</a>-->
10669
</br></br>
10770

10871
<p>and {{ $countButton - 3 }} other buttons ...</p>

‎resources/views/layouts/footer.blade.php‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,15 @@
88
</div>
99

1010
@if(env('DISPLAY_CREDIT') === true)
11-
<?php if ($color_scheme == 'dark') {
12-
$textcolor = '#FFFFFF';
13-
} else {
14-
$textcolor = '#100a26';
15-
} ?>
11+
<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>
1612
<a class="spacing" href="https://littlelink-custom.com" target="_blank" title="Learn more">
1713
<section class="hvr-grow fadein">
1814
<div class="parent-footer" >
1915
<img id="footer_spin" class="footer_spin image-footer1 generic" src="{{ asset('littlelink/images/just-gear.svg') }}" alt="LittleLink Custom"></img>
2016
<img class="image-footer2" src="{{ asset('littlelink/images/just-ll.svg') }}" alt="LittleLink Custom"></img>
2117
</div>
2218

23-
<a href="https://littlelink-custom.com" style="color: {{ $textcolor }}; font-weight: 700; font-size: 15px;">Powered by LittleLink Custom</a>
19+
<a href="https://littlelink-custom.com" class="txt txt-clr">Powered by LittleLink Custom</a>
2420
</section>
2521
</a><br><br><br>
2622
@endif

‎resources/views/littlelink.blade.php‎

Lines changed: 4 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<!-- This shows a preview for title, description and avatar image of users profiles if shared on social media sites -->
1212

1313
<!-- Facebook Meta Tags -->
14-
<meta property="og:url" content="{{ url('') }}/{{ "@".$littlelink_name }}">
14+
<meta property="og:url" content="{{ url('') }}/@littlelink_name">
1515
<meta property="og:type" content="website">
1616
<meta property="og:title" content="{{ $userinfo->name }}">
1717
<meta property="og:description" content="{{ $userinfo->littlelink_description }}">
@@ -23,8 +23,8 @@
2323

2424
<!-- Twitter Meta Tags -->
2525
<meta name="twitter:card" content="summary_large_image">
26-
<meta property="twitter:domain" content="{{ url('') }}/{{ "@".$littlelink_name }}">
27-
<meta property="twitter:url" content="{{ url('') }}/{{ "@".$littlelink_name }}">
26+
<meta property="twitter:domain" content="{{ url('') }}/@littlelink_name">
27+
<meta property="twitter:url" content="{{ url('') }}/@littlelink_name">
2828
<meta name="twitter:title" content="{{ $userinfo->littlelink_name }}">
2929
<meta name="twitter:description" content="{{ $userinfo->littlelink_description }}">
3030
@if(file_exists(base_path("img/$littlelink_name" . ".png" )))
@@ -40,7 +40,7 @@
4040

4141
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,800&display=swap" rel="stylesheet">
4242
<link rel="stylesheet" href="{{ asset('littlelink/css/normalize.css') }}">
43-
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
43+
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-auto.css') }}">
4444
<link rel="stylesheet" href="{{ asset('littlelink/css/brands.css') }}">
4545
<link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
4646
<link rel="stylesheet" href="{{ asset('littlelink/css/animate.css') }}">
@@ -50,56 +50,6 @@
5050
@else
5151
<link rel="icon" type="image/svg+xml" href="{{ asset('littlelink/images/logo.svg') }}">
5252
@endif
53-
<style>
54-
.container { max-width: 1080px !important; }
55-
.button-title {
56-
color: white !important;
57-
background: #505050 !important;
58-
height: auto !important;
59-
line-height: 28px !important;
60-
width: auto !important;
61-
padding: 10px !important;
62-
min-width: 300px !important;
63-
}
64-
65-
@media (max-width: 767px) {
66-
}
67-
</style>
68-
69-
<!-- begin dark mode detection -->
70-
<script src="{{ asset('littlelink/js/js.cookie.min.js') }}"></script>
71-
<script>
72-
// code to set the `color_scheme` cookie
73-
var $color_scheme = Cookies.get("color_scheme");
74-
function get_color_scheme() {
75-
return (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
76-
}
77-
function update_color_scheme() {
78-
Cookies.set("color_scheme", get_color_scheme());
79-
}
80-
// read & compare cookie `color-scheme`
81-
if ((typeof $color_scheme === "undefined") || (get_color_scheme() != $color_scheme))
82-
update_color_scheme();
83-
// detect changes and change the cookie
84-
if (window.matchMedia)
85-
window.matchMedia("(prefers-color-scheme: dark)").addListener( update_color_scheme );
86-
// reloads page to apply the dark mode cookie
87-
window.onload = function() {
88-
if(!window.location.hash && get_color_scheme() == "dark" && (get_color_scheme() != $color_scheme)) {
89-
window.location = window.location + '#dark';
90-
window.location.reload();
91-
}
92-
}
93-
</script>
94-
<?php // loads dark mode CSS if dark mode detected
95-
$color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; ?>
96-
@if ($color_scheme == 'dark')
97-
<!-- switch the two <link> Tags below to default to dark mode if cookie detection fails -->
98-
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-dark.css') }}">
99-
@else
100-
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
101-
@endif
102-
<!-- end dark mode detection -->
10353
</head>
10454
<body>
10555

0 commit comments

Comments
 (0)