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

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.
This commit is contained in:
Julian Prieber 2022-05-13 13:03:10 +02:00
parent fe81015483
commit 1eb92e56b2
5 changed files with 63 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
littlelink/css/animate.css vendored
View File

@ -143,3 +143,46 @@ section #footer_spin{
animation: spin 4s linear infinite; animation: spin 4s linear infinite;
animation-play-state: paused; animation-play-state: paused;
} }
.toggle {
display: flex;
align-items: center;
justify-content: space-around;
max-width: 140px;
transform: scale(0.7);
}
.toggle span {
margin: 0 0.5rem;
}
.toggle input[type=checkbox] {
height: 0;
width: 0;
visibility: hidden;
}
.toggle input[type=checkbox]:checked + label {
background: teal;
}
.toggle input[type=checkbox]:checked + label:after {
left: calc(100% - 2px);
transform: translateX(-100%);
}
.toggle label {
cursor: pointer;
width: 75px;
height: 34px;
background: rgba(0, 0, 0, 0.27);
display: block;
border-radius: 40px;
position: relative;
}
.toggle label:after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 30px;
height: 30px;
background: #fff;
border-radius: 40px;
transition: 0.3s;
}

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

@ -42,8 +42,9 @@
} }
</script> </script>
<?php // loads dark mode CSS if dark mode detected <?php // loads dark mode CSS if dark mode detected
$color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; ?> $color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false;
@if($color_scheme == 'dark') $color_scheme_override = isset($_COOKIE["color_scheme_override"]) ? $_COOKIE["color_scheme_override"] : false; ?>
@if ($color_scheme == 'dark' and $color_scheme_override != 'light' or $color_scheme_override == 'dark')
<link rel="stylesheet" href="{{ asset('css/app-dark.css') }}"> <link rel="stylesheet" href="{{ asset('css/app-dark.css') }}">
@endif @endif
<!-- end dark mode detection --> <!-- end dark mode detection -->

13
resources/views/layouts/sidebar.blade.php
View File

@ -35,8 +35,9 @@
} }
</script> </script>
<?php // loads dark mode CSS if dark mode detected <?php // loads dark mode CSS if dark mode detected
$color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; ?> $color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false;
@if ($color_scheme == 'dark') $color_scheme_override = isset($_COOKIE["color_scheme_override"]) ? $_COOKIE["color_scheme_override"] : false; ?>
@if ($color_scheme == 'dark' and $color_scheme_override != 'light' or $color_scheme_override == 'dark')
<!-- switch the two <link> Tags below to default to dark mode if cookie detection fails --> <!-- switch the two <link> Tags below to default to dark mode if cookie detection fails -->
<link rel="stylesheet" href="{{ asset('/studio/css/bootstrap.min-dark.css') }}"> <link rel="stylesheet" href="{{ asset('/studio/css/bootstrap.min-dark.css') }}">
<link rel="stylesheet" href="{{ asset('/studio/css/style-dashboard-dark.css') }}"> <link rel="stylesheet" href="{{ asset('/studio/css/style-dashboard-dark.css') }}">
@ -247,6 +248,14 @@ if ($url1sb->successful() or $url2sb->successful()) {
<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> <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>
@endif @endif
@if ($color_scheme_override == 'dark' or ($color_scheme == 'dark' and $color_scheme_override != 'dark' and $color_scheme_override != 'light'))
<div id="myBtn" class="toggle"><span>🌙</span><input type="checkbox" id="toggle-switch" /><label for="toggle-switch"></label><span>☀️</span></div>
<script>function ColorOverrride(){document.cookie="color_scheme_override=light; path=/",location.reload()}var btn=document.getElementById("myBtn");btn.addEventListener("click",ColorOverrride);</script>
@elseif ($color_scheme_override == 'light' or ($color_scheme == 'light' and $color_scheme_override != 'dark' and $color_scheme_override != 'light'))
<div id="myBtn" class="toggle"><span>🌙</span><input type="checkbox" id="toggle-switch" checked/><label for="toggle-switch"></label><span>☀️</span></div>
<script>function ColorOverrride(){document.cookie="color_scheme_override=dark; path=/",location.reload()}var btn=document.getElementById("myBtn");btn.addEventListener("click",ColorOverrride);</script>
@endif
<a class="nav-link" href="{{ url('') }}/@<?= Auth::user()->littlelink_name ?>" target="_blank">View Page</a> <a class="nav-link" href="{{ url('') }}/@<?= Auth::user()->littlelink_name ?>" target="_blank">View Page</a>
</div> </div>
</li> </li>

5
resources/views/pages.blade.php
View File

@ -42,8 +42,9 @@
} }
</script> </script>
<?php // loads dark mode CSS if dark mode detected <?php // loads dark mode CSS if dark mode detected
$color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; ?> $color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false;
@if ($color_scheme == 'dark') $color_scheme_override = isset($_COOKIE["color_scheme_override"]) ? $_COOKIE["color_scheme_override"] : false; ?>
@if ($color_scheme == 'dark' and $color_scheme_override != 'light' or $color_scheme_override == 'dark')
<!-- switch the two <link> Tags below to default to dark mode if cookie detection fails --> <!-- 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') }}"> <link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-dark.css') }}">
@else @else

5
resources/views/panel/phpinfo.blade.php
View File

@ -28,8 +28,9 @@
} }
</script> </script>
<?php // loads dark mode CSS if dark mode detected <?php // loads dark mode CSS if dark mode detected
$color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; ?> $color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false;
@if ($color_scheme == 'dark') $color_scheme_override = isset($_COOKIE["color_scheme_override"]) ? $_COOKIE["color_scheme_override"] : false; ?>
@if ($color_scheme == 'dark' and $color_scheme_override != 'light' or $color_scheme_override == 'dark')
<!-- switch the two <link> Tags below to default to dark mode if cookie detection fails --> <!-- switch the two <link> Tags below to default to dark mode if cookie detection fails -->
<link rel="stylesheet" href="{{ asset('/studio/css/bootstrap.min-dark.css') }}"> <link rel="stylesheet" href="{{ asset('/studio/css/bootstrap.min-dark.css') }}">
<link rel="stylesheet" href="{{ asset('/studio/css/style-dashboard-dark.css') }}"> <link rel="stylesheet" href="{{ asset('/studio/css/style-dashboard-dark.css') }}">