Skip to content

Commit 1eb92e5

Browse files
JulianPrieberJulianPrieber
committed
Added dark mode toggle for Admin/User Panel
A simple toggle switch that sets an override cookie with JavaScript. The cookie is still read with PHP/blade.
1 parent fe81015 commit 1eb92e5

File tree

5 files changed

+63
-8
lines changed

5 files changed

+63
-8
lines changed

‎littlelink/css/animate.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,4 +142,47 @@ section:hover #footer_spin{
142142
section #footer_spin{
143143
animation: spin 4s linear infinite;
144144
animation-play-state: paused;
145+
}
146+
147+
.toggle {
148+
display: flex;
149+
align-items: center;
150+
justify-content: space-around;
151+
max-width: 140px;
152+
transform: scale(0.7);
153+
}
154+
.toggle span {
155+
margin: 0 0.5rem;
156+
}
157+
.toggle input[type=checkbox] {
158+
height: 0;
159+
width: 0;
160+
visibility: hidden;
161+
}
162+
.toggle input[type=checkbox]:checked + label {
163+
background: teal;
164+
}
165+
.toggle input[type=checkbox]:checked + label:after {
166+
left: calc(100% - 2px);
167+
transform: translateX(-100%);
168+
}
169+
.toggle label {
170+
cursor: pointer;
171+
width: 75px;
172+
height: 34px;
173+
background: rgba(0, 0, 0, 0.27);
174+
display: block;
175+
border-radius: 40px;
176+
position: relative;
177+
}
178+
.toggle label:after {
179+
content: "";
180+
position: absolute;
181+
top: 2px;
182+
left: 2px;
183+
width: 30px;
184+
height: 30px;
185+
background: #fff;
186+
border-radius: 40px;
187+
transition: 0.3s;
145188
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,9 @@ function update_color_scheme() {
4242
}
4343
</script>
4444
<?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')
45+
$color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false;
46+
$color_scheme_override = isset($_COOKIE["color_scheme_override"]) ? $_COOKIE["color_scheme_override"] : false; ?>
47+
@if ($color_scheme == 'dark' and $color_scheme_override != 'light' or $color_scheme_override == 'dark')
4748
<link rel="stylesheet" href="{{ asset('css/app-dark.css') }}">
4849
@endif
4950
<!-- end dark mode detection -->

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,9 @@ function update_color_scheme() {
3535
}
3636
</script>
3737
<?php // loads dark mode CSS if dark mode detected
38-
$color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; ?>
39-
@if ($color_scheme == 'dark')
38+
$color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false;
39+
$color_scheme_override = isset($_COOKIE["color_scheme_override"]) ? $_COOKIE["color_scheme_override"] : false; ?>
40+
@if ($color_scheme == 'dark' and $color_scheme_override != 'light' or $color_scheme_override == 'dark')
4041
<!-- switch the two <link> Tags below to default to dark mode if cookie detection fails -->
4142
<link rel="stylesheet" href="{{ asset('/studio/css/bootstrap.min-dark.css') }}">
4243
<link rel="stylesheet" href="{{ asset('/studio/css/style-dashboard-dark.css') }}">
@@ -247,6 +248,14 @@ function URL_exists(string $url): bool
247248
<a style="color:tomato;" class="nav-link" href="{{ url('panel/diagnose') }}" title="Your security is at risk. Some files can be accessed by everyone. Immediate action is required! Click this message to learn more.">Your security is at risk!</a>
248249
@endif
249250
251+
@if ($color_scheme_override == 'dark' or ($color_scheme == 'dark' and $color_scheme_override != 'dark' and $color_scheme_override != 'light'))
252+
<div id="myBtn" class="toggle"><span>🌙</span><input type="checkbox" id="toggle-switch" /><label for="toggle-switch"></label><span>☀️</span></div>
253+
<script>function ColorOverrride(){document.cookie="color_scheme_override=light; path=/",location.reload()}var btn=document.getElementById("myBtn");btn.addEventListener("click",ColorOverrride);</script>
254+
@elseif ($color_scheme_override == 'light' or ($color_scheme == 'light' and $color_scheme_override != 'dark' and $color_scheme_override != 'light'))
255+
<div id="myBtn" class="toggle"><span>🌙</span><input type="checkbox" id="toggle-switch" checked/><label for="toggle-switch"></label><span>☀️</span></div>
256+
<script>function ColorOverrride(){document.cookie="color_scheme_override=dark; path=/",location.reload()}var btn=document.getElementById("myBtn");btn.addEventListener("click",ColorOverrride);</script>
257+
@endif
258+
250259
<a class="nav-link" href="{{ url('') }}/@<?= Auth::user()->littlelink_name ?>" target="_blank">View Page</a>
251260
</div>
252261
</li>

‎resources/views/pages.blade.php‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,9 @@ function update_color_scheme() {
4242
}
4343
</script>
4444
<?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')
45+
$color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false;
46+
$color_scheme_override = isset($_COOKIE["color_scheme_override"]) ? $_COOKIE["color_scheme_override"] : false; ?>
47+
@if ($color_scheme == 'dark' and $color_scheme_override != 'light' or $color_scheme_override == 'dark')
4748
<!-- switch the two <link> Tags below to default to dark mode if cookie detection fails -->
4849
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-dark.css') }}">
4950
@else

‎resources/views/panel/phpinfo.blade.php‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,9 @@ function update_color_scheme() {
2828
}
2929
</script>
3030
<?php // loads dark mode CSS if dark mode detected
31-
$color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; ?>
32-
@if ($color_scheme == 'dark')
31+
$color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false;
32+
$color_scheme_override = isset($_COOKIE["color_scheme_override"]) ? $_COOKIE["color_scheme_override"] : false; ?>
33+
@if ($color_scheme == 'dark' and $color_scheme_override != 'light' or $color_scheme_override == 'dark')
3334
<!-- switch the two <link> Tags below to default to dark mode if cookie detection fails -->
3435
<link rel="stylesheet" href="{{ asset('/studio/css/bootstrap.min-dark.css') }}">
3536
<link rel="stylesheet" href="{{ asset('/studio/css/style-dashboard-dark.css') }}">

0 commit comments

Comments
 (0)