mirror of
https://github.com/LinkStackOrg/LinkStack.git
synced 2025-03-20 13:30:11 +01:00
Refactor dark mode handling: remove old script and implement new logic in DarkMode.php
This commit is contained in:
Julian Prieber
parent
5685d2f677
commit
484ef2f49e
77
app/View/Includes/DarkMode.php
Normal file
77
app/View/Includes/DarkMode.php
Normal 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
43
assets/js/detect-dark-mode.js
vendored
@ -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');
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,4 @@
|
||||
|
||||
|
||||
|
||||
<?php include app_path("View/Includes/DarkMode.php"); ?>
|
||||
<!doctype html>
|
||||
@include('layouts.lang')
|
||||
<head>
|
||||
@ -47,8 +45,6 @@
|
||||
@else
|
||||
<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">
|
||||
|
||||
@ -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 }}
|
||||
|
||||
|
||||
@ -2,16 +2,11 @@
|
||||
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/');
|
||||
@ -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() {
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
|
||||
|
||||
|
||||
<?php include app_path("View/Includes/DarkMode.php"); ?>
|
||||
<!doctype html>
|
||||
@include('layouts.lang')
|
||||
<head>
|
||||
@ -19,8 +17,6 @@
|
||||
@else
|
||||
<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">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user