Use "ambient" backdrop for images in lightbox

[thekid]

...using the dominant color from https://lokeshdhakar.com/projects/color-thief/ - how does this look?

[thekid]

Looks interesting, proof of concept:

diff --git a/src/main/handlebars/layout.handlebars b/src/main/handlebars/layout.handlebars
index 6c03a52..b29f961 100755
--- a/src/main/handlebars/layout.handlebars
+++ b/src/main/handlebars/layout.handlebars
@@ -584,7 +584,7 @@
     }

     #lightbox img {
-      border: 2px solid #444;
+      border: .5rem solid #444;
       border-radius: .25rem;
       max-height: calc(100vh - 6rem);
       width: auto;
@@ -592,7 +592,7 @@

     #lightbox .meta {
       position: absolute;
-      bottom: 2px;
+      bottom: .5rem;
       right: 0;
       left: 0;
       font-size: .9rem;
@@ -757,6 +757,7 @@
     With ❤️ by Timm Friebe 2005-{{date null format="Y"}}
   </footer>

+  <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
   <script src="/assets/{{asset 'vendor.js'}}" defer></script>
   {{> scripts}}
 </body>
diff --git a/src/main/js/lightbox.js b/src/main/js/lightbox.js
index c98dbd5..84c66a6 100755
--- a/src/main/js/lightbox.js
+++ b/src/main/js/lightbox.js
@@ -1,5 +1,10 @@
 const lightbox = {
   $element : document.querySelector('#lightbox'),
+  ambience : function($target) {
+    const color = new ColorThief().getColor($target);
+    console.log($target, `rgb(${color.join(' ')} / .4)`);
+    $target.style.borderColor = `rgb(${color.join(' ')} / .4)`;
+  },
   show     : function($link) {
     const $full = lightbox.$element.querySelector('img');
     $full.src = '';
@@ -16,6 +21,11 @@ const lightbox = {
       $meta.style.visibility = 'hidden';
     }

+    if ($full.complete) {
+      lightbox.ambience($full);
+    } else {
+      $full.addEventListener('load', lightbox.ambience);
+    }
     return false;
   },
   close    : function() {

However, if we could move color discovery to image import time, we could do even more cool things like searching for similar images.

[thekid]

However, if we could move color discovery to image import time, we could do even more cool things like searching for similar images.

Ported the JS library to XP in https://github.com/thekid/dialog/pull/36

[thekid]

YouTube uses this in its player (not sure if new, noticed this for the first time today):