Added dark/light mode detection to background image

Only active on default theme

app/Functions/findfile.php

@@ -20,4 +20,51 @@ function findBackground($name){
     $pathinfo = $name. "." . pathinfo($file, PATHINFO_EXTENSION);
     }}
     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';
+  }
+}

resources/views/littlelink.blade.php

@@ -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')