Added dark/light mode detection to background image
Only active on default theme
This commit is contained in:
parent
96c155c518
commit
c279661e0b
|
@ -21,3 +21,50 @@ function findBackground($name){
|
||||||
}}
|
}}
|
||||||
return $pathinfo;
|
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';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -44,10 +44,22 @@ return $path;}
|
||||||
<meta name="author" content="{{ $userinfo->name }}">
|
<meta name="author" content="{{ $userinfo->name }}">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
@endif
|
@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>
|
<style>
|
||||||
body {
|
body {
|
||||||
background-image: url('{{url('/img/background-img/'.findBackground($userinfo->id))}}') !important;
|
background-image: url('{{$customBackgroundURL}}') !important;
|
||||||
background-repeat: no-repeat !important;
|
background-repeat: no-repeat !important;
|
||||||
background-size: cover !important;
|
background-size: cover !important;
|
||||||
background-position: center !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/share.button.css') }}">
|
||||||
<link rel="stylesheet" href="{{ asset('littlelink/css/animations.css') }}">
|
<link rel="stylesheet" href="{{ asset('littlelink/css/animations.css') }}">
|
||||||
<link rel="stylesheet" href="{{ asset('littlelink/css/brands.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') }}">
|
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-dark.css') }}">
|
||||||
<style>.social-icon{color:#fff;}</style>
|
<style>.social-icon{color:#fff;}</style>
|
||||||
@elseif ($color_scheme_override == 'light')
|
@elseif ($color_scheme_override == 'light')
|
||||||
|
|
Loading…
Reference in New Issue