devol/LinkStack
1
0
Fork 0
mirror of https://github.com/LinkStackOrg/LinkStack.git synced 2025-03-20 13:30:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor dark mode handling: remove old script and implement new logic in DarkMode.php

Browse Source
This commit is contained in:
Julian Prieber 2024-12-19 22:52:05 +01:00
parent 5685d2f677
commit 484ef2f49e
7 changed files with 89 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
app/View/Includes/DarkMode.php Normal file
View File

@ -0,0 +1,77 @@
<?php
$colorMode = null;
$script =
<<<HTML
<script>
// Function to get the value of a cookie by name
function getCookie(name) {
const cookies = document.cookie.split('; ');
for (const cookie of cookies) {
const [key, value] = cookie.split('=');
if (key === name) {
return value;
}
}
return null;
}
// Function to set a cookie
function setCookie(name, value, days) {
let expires = '';
if (days) {
const date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
// Corrected this line to properly handle JavaScript template literals
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function setColorMode() {
// Retrieve the value of the 'color-mode' cookie
var colorMode = getCookie('color-mode');
// Check if the value is valid and set it to 'auto' if not
if (!colorMode || (colorMode !== 'light' && colorMode !== 'dark')) {
colorMode = 'auto';
setCookie('color-mode', colorMode, 365); // Set the cookie to expire in 1 year
}
if (colorMode === 'auto') {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
setCookie('prefers-color-mode', 'dark', 365);
if (!document.body.classList.contains('dark')) {
document.body.classList.add('dark');
}
} else {
setCookie('prefers-color-mode', 'light', 365);
}
}
if (colorMode === 'dark') {
if (!document.body.classList.contains('dark')) {
document.body.classList.add('dark');
}
}
};
document.addEventListener('DOMContentLoaded', () => {
if (typeof Livewire === 'undefined') {
setColorMode();
}
});
document.addEventListener('livewire:navigated', () => {
setColorMode();
});
</script>
HTML;
echo $script;
if (isset($_COOKIE['color-mode'])) {
$colorMode = $_COOKIE['color-mode'];
}
if ($colorMode === 'auto' && isset($_COOKIE['prefers-color-mode'])) {
$colorMode = $_COOKIE['prefers-color-mode'];
}

43
assets/js/detect-dark-mode.js vendored
View File

@ -1,43 +0,0 @@
// Function to get the value of a cookie by name
function getCookie(name) {
const cookies = document.cookie.split('; ');
for (const cookie of cookies) {
const [key, value] = cookie.split('=');
if (key === name) {
return value;
}
}
return null;
}
// Function to set a cookie
function setCookie(name, value, days) {
let expires = '';
if (days) {
const date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
expires = `; expires=${date.toUTCString()}`;
}
document.cookie = `${name}=${value || ''}${expires}; path=/`;
}
// Retrieve the value of the 'color-mode' cookie
var colorMode = getCookie('color-mode');
// Check if the value is valid and set it to 'auto' if not
if (!colorMode || (colorMode !== 'light' && colorMode !== 'dark')) {
colorMode = 'auto';
setCookie('color-mode', colorMode, 365); // Set the cookie to expire in 1 year
}
// If color mode is 'auto', detect the user's color scheme
if (colorMode === 'auto') {
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDarkScheme) {
document.body.classList.add('dark');
}
} else if (colorMode === 'dark') {
if (!document.body.classList.contains('dark')) {
document.body.classList.add('dark');
}
}

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

@ -1,6 +1,4 @@
<?php include app_path("View/Includes/DarkMode.php"); ?>
<!doctype html>
@include('layouts.lang')
<head>
@ -48,8 +46,6 @@
<link rel="icon" type="image/svg+xml" href="{{ asset('assets/linkstack/images/logo.svg') }}">
@endif
<script src="{{asset('assets/js/detect-dark-mode.js')}}"></script>
<!-- Library / Plugin Css Build -->
<link rel="stylesheet" href="{{asset('assets/css/core/libs.min.css')}}" />
@ -85,7 +81,7 @@
foreach($pages as $page){}
@endphp
<body class=" " data-bs-spy="scroll" data-bs-target="#elements-section" data-bs-offset="0" tabindex="0">
<body class="{{ $colorMode ?? null }}" data-bs-spy="scroll" data-bs-target="#elements-section" data-bs-offset="0" tabindex="0">
<!--Nav Start-->
<nav class="nav navbar navbar-expand-lg navbar-light iq-navbar fixed-top">
<div class="container-fluid navbar-inner">

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

@ -1,3 +1,4 @@
<?php include app_path("View/Includes/DarkMode.php"); ?>
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
@ -8,8 +9,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="{{asset('assets/js/detect-dark-mode.js')}}"></script>
@if(file_exists(base_path("assets/linkstack/images/").findFile('favicon')))
<link rel="icon" type="image/png" href="{{ asset('assets/linkstack/images/'.findFile('favicon')) }}">
@else
@ -51,7 +50,7 @@
<link rel="stylesheet" href="{{ asset('assets/external-dependencies/bootstrap-icons.css') }}">
</head>
<body>
<body class="{{ $colorMode ?? null }}">
{{ $slot }}

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

@ -2,17 +2,12 @@
use SimpleSoftwareIO\QrCode\Facades\QrCode;
use App\Models\User;
use App\Models\UserData;
include app_path("View/Includes/DarkMode.php");
$usrhandl = Auth::user()->littlelink_name;
$spa = env('SPA_MODE', false);
$colorMode = null;
if (isset($_COOKIE['color-mode'])) {
$colorMode = $_COOKIE['color-mode'];
} else {
$colorMode = 'auto';
}
$betaServer = env('BETA_SERVER', 'https://beta.linkstack.org/');
$versionServer = env('VERSION_SERVER', 'https://version.linkstack.org/');
@endphp
@ -157,11 +152,11 @@
<script src="{{ asset('assets/js/main-dashboard.js') }}"></script>
<script src="{{ asset('assets/vendor/livewire/core.min.js') }}"></script>
</head>
<body class="{{$colorMode ?? 'auto'}}">
<body class="{{ $colorMode ?? null }}">
@if(!$spa)
<!-- loader Start -->
<div id="loading">
<div id="loader" @if($colorMode == 'dark')style="background:#222738"@endif class="loader simple-loader">
<div id="loader" @if(isset($colorMode) && $colorMode == 'dark')style="background:#222738"@endif class="loader simple-loader">
<div class="loader-body"></div>
</div>
</div>
@ -1208,10 +1203,6 @@ MODAL; // <-- Indentation breaks my code editor :/
</div>
</div>
@if($colorMode == 'auto')
<script src="{{asset('assets/js/detect-dark-mode.js')}}"></script>
@endif
{{-- Unused. Download for removed PNG QR Code generation feature. --}}
{{-- <script>
document.addEventListener("DOMContentLoaded", function() {

7
resources/views/linkinfo.blade.php
View File

@ -1,6 +1,4 @@
<?php include app_path("View/Includes/DarkMode.php"); ?>
<!doctype html>
@include('layouts.lang')
<head>
@ -20,7 +18,6 @@
<link rel="icon" type="image/svg+xml" href="{{ asset('assets/linkstack/images/logo.svg') }}">
@endif
<script src="{{asset('assets/js/detect-dark-mode.js')}}"></script>
<link rel="stylesheet" href="{{ asset('assets/external-dependencies/bootstrap-icons.css') }}">
<!-- Library / Plugin Css Build -->
@ -51,7 +48,7 @@
<link rel="stylesheet" href="{{asset('assets/css/rtl.min.css')}}" />
</head>
<body>
<body class="{{ $colorMode ?? null }}">
<!--Nav Start-->
<nav class="nav navbar navbar-expand-lg navbar-light iq-navbar">
<div class="container-fluid navbar-inner">

8
resources/views/report.blade.php
View File

@ -1,6 +1,4 @@
<?php include app_path("View/Includes/DarkMode.php"); ?>
<!doctype html>
@include('layouts.lang')
<head>
@ -20,8 +18,6 @@
<link rel="icon" type="image/svg+xml" href="{{ asset('assets/linkstack/images/logo.svg') }}">
@endif
<script src="{{asset('assets/js/detect-dark-mode.js')}}"></script>
<!-- Library / Plugin Css Build -->
<link rel="stylesheet" href="{{asset('assets/css/core/libs.min.css')}}" />
@ -69,7 +65,7 @@ if ($_SERVER['QUERY_STRING'] != '') {
@endphp
<body>
<body class="{{ $colorMode ?? null }}">
<div class="container-fluid">
<div class="align-items-center justify-content-center d-flex min-vh-100">
<div class="col-10 col-sm-8 col-md-6 col-lg-5">