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

Added dark/light mode detection to background image 

Only active on default theme
This commit is contained in:
Julian Prieber 2023-02-13 18:10:13 +01:00
parent 96c155c518
commit c279661e0b
2 changed files with 69 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
app/Functions/findfile.php
View File

@ -21,3 +21,50 @@ function findBackground($name){
}}
return $pathinfo;
}
function analyzeImageBrightness($file) {
$file = base_path('/img/background-img/'.$file);
// Get the image type
$type = exif_imagetype($file);
// Load the image based on its type
switch ($type) {
case IMAGETYPE_JPEG:
case IMAGETYPE_JPEG2000:
$img = imagecreatefromjpeg($file);
break;
case IMAGETYPE_PNG:
$img = imagecreatefrompng($file);
break;
default:
echo "Error: Unsupported image type.\n";
exit();
}
// Get image dimensions
$width = imagesx($img);
$height = imagesy($img);
// Calculate the average brightness of the image
$total_brightness = 0;
for ($x=0; $x<$width; $x++) {
for ($y=0; $y<$height; $y++) {
$rgb = imagecolorat($img, $x, $y);
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
$brightness = (int)(($r + $g + $b) / 3);
$total_brightness += $brightness;
}
}
$avg_brightness = $total_brightness / ($width * $height);
// Determine if the image is more dark or light
if ($avg_brightness < 128) {
return 'dark';
} else {
return 'light';
}
}

24
resources/views/littlelink.blade.php
View File

@ -44,10 +44,22 @@ return $path;}
<meta name="author" content="{{ $userinfo->name }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
@endif
@if(file_exists(base_path('/img/background-img/'.findBackground($userinfo->id))))
@php
$customBackgroundFile = findBackground($userinfo->id);
$customBackgroundPath = base_path('/img/background-img/'.$customBackgroundFile);
$customBackgroundURL = url('/img/background-img/'.$customBackgroundFile);
$customBackgroundExists = file_exists($customBackgroundPath);
if($customBackgroundExists == true){
$customBackgroundBrightness = analyzeImageBrightness($customBackgroundFile);
} else {
$customBackgroundBrightness == false;}
@endphp
@if($customBackgroundExists == true)
<style>
body {
background-image: url('{{url('/img/background-img/'.findBackground($userinfo->id))}}') !important;
background-image: url('{{$customBackgroundURL}}') !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center !important;
@ -123,7 +135,13 @@ return $path;}
<link rel="stylesheet" href="{{ asset('littlelink/css/share.button.css') }}">
<link rel="stylesheet" href="{{ asset('littlelink/css/animations.css') }}">
<link rel="stylesheet" href="{{ asset('littlelink/css/brands.css') }}">
@if ($color_scheme_override == 'dark')
@if ($customBackgroundExists == true and $customBackgroundBrightness == 'dark')
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-dark.css') }}">
<style>.social-icon{color:#fff;}</style>
@elseif ($customBackgroundExists == true and $customBackgroundBrightness == 'light')
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
<style>.social-icon{color:#222;}</style>
@elseif ($color_scheme_override == 'dark')
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-dark.css') }}">
<style>.social-icon{color:#fff;}</style>
@elseif ($color_scheme_override == 'light')