Add a CSS corner if the contrast between QR margin and page background is too low

index.php

@@ -76,6 +76,8 @@ if (
     require_once "less.php/lib/Less/Autoloader.php";
     Less_Autoloader::register();
 
+    $colorScheme['theme'] = $theme;
+
     $options = array('cache_dir' => 'css/', 'compress' => true);
     $cssFileName = Less_Cache::Get(array("style.less" => ""), $options, $colorScheme);
     ?>
@@ -194,6 +196,12 @@ if (
 
       if (!empty($params['txt'])) {
 
+        $rgbBgColor = array(
+          'r' => hexdec(substr($params['bgColor'],0,2)),
+          'g' => hexdec(substr($params['bgColor'],2,2)),
+          'b' => hexdec(substr($params['bgColor'],4,2)),
+        );
+
         require "barcode-generator/Utils/QrCode.php";
         $qrCode = new QrCode();
         if (!is_null($params['margin']))
@@ -207,11 +215,7 @@ if (
             'g' => hexdec(substr($params['mainColor'],2,2)),
             'b' => hexdec(substr($params['mainColor'],4,2)),
           ))
-          ->setBackgroundColor(array(
+          ->setBackgroundColor($rgbBgColor)
-            'r' => hexdec(substr($params['bgColor'],0,2)),
-            'g' => hexdec(substr($params['bgColor'],2,2)),
-            'b' => hexdec(substr($params['bgColor'],4,2)),
-          ))
           ->setImageType(QrCode::IMAGE_TYPE_PNG);
         $dataUri = $qrCode->getDataUri();
         $qrSize = $qrCode->getSize() + 2 * $qrCode->getPadding();
@@ -224,7 +228,19 @@ if (
           </div>
 
           <div class="centered" id="showOnlyQR">
-            <a title="<?= $loc['title_showOnlyQR'] ?>" href="<?= $dataUri ?>"><img width="<?= $qrSize ?>" height="<?= $qrSize ?>" alt='<?= $loc['alt_QR_before'] ?><?= htmlspecialchars($params['txt']); ?><?= $loc['alt_QR_after'] ?>' id="qrCode" src="<?= $dataUri ?>"></a>
+            <a title="<?= $loc['title_showOnlyQR'] ?>" href="<?= $dataUri ?>"><img width="<?= $qrSize ?>" height="<?= $qrSize ?>" alt='<?= $loc['alt_QR_before'] ?><?= htmlspecialchars($params['txt']); ?><?= $loc['alt_QR_after'] ?>' id="qrCode"<?php
+
+              // Compute the difference between the QR code and theme background colors
+              $diffLight = abs($rgbBgColor['r']-hexdec(substr($colorScheme['bg-light'],-6,2))) + abs($rgbBgColor['g']-hexdec(substr($colorScheme['bg-light'],-4,2))) + abs($rgbBgColor['b']-hexdec(substr($colorScheme['bg-light'],-2,2)));
+              $diffDark = abs($rgbBgColor['r']-hexdec(substr($colorScheme['bg-dark'],-6,2))) + abs($rgbBgColor['g']-hexdec(substr($colorScheme['bg-dark'],-4,2))) + abs($rgbBgColor['b']-hexdec(substr($colorScheme['bg-dark'],-2,2)));
+
+              // Determine whether a CSS corner is needed to let the user see the margin of the QR code
+              $contrastThreshold = 64;
+              if ($diffLight < $contrastThreshold)
+                echo " class='needLightContrast'";
+              if ($diffDark < $contrastThreshold)
+                echo " class='needDarkContrast'";
+              ?> src="<?= $dataUri ?>"></a>
           </div>
         </section>
 

style.less

@@ -104,6 +104,41 @@ a {
 
 #qrCode {
   max-width: 480px;
+  @width: 2px;
+  @lenght: 16px;
+  padding: @width;
+
+  &.needLightContrast {
+    @media @light {
+      background:
+        linear-gradient(to right, @borderQr-light @width, transparent 0px) 0 0,
+        linear-gradient(to right, @borderQr-light @width, transparent 0px) 0 100%,
+        linear-gradient(to left, @borderQr-light @width, transparent 0px) 100% 0,
+        linear-gradient(to left, @borderQr-light @width, transparent 0px) 100% 100%,
+        linear-gradient(to bottom, @borderQr-light @width, transparent 0px) 0 0,
+        linear-gradient(to bottom, @borderQr-light @width, transparent 0px) 100% 0,
+        linear-gradient(to top, @borderQr-light @width, transparent 0px) 0 100%,
+        linear-gradient(to top, @borderQr-light @width, transparent 0px) 100% 100%;
+      background-repeat: no-repeat;
+      background-size: @lenght @lenght;
+    }
+  }
+
+  &.needDarkContrast {
+    @media @dark {
+      background:
+        linear-gradient(to right, @borderQr-dark @width, transparent 0px) 0 0,
+        linear-gradient(to right, @borderQr-dark @width, transparent 0px) 0 100%,
+        linear-gradient(to left, @borderQr-dark @width, transparent 0px) 100% 0,
+        linear-gradient(to left, @borderQr-dark @width, transparent 0px) 100% 100%,
+        linear-gradient(to bottom, @borderQr-dark @width, transparent 0px) 0 0,
+        linear-gradient(to bottom, @borderQr-dark @width, transparent 0px) 100% 0,
+        linear-gradient(to top, @borderQr-dark @width, transparent 0px) 0 100%,
+        linear-gradient(to top, @borderQr-dark @width, transparent 0px) 100% 100%;
+      background-repeat: no-repeat;
+      background-size: @lenght @lenght;
+    }
+  }
 }
 
 .centered {

themes/libreqr/theme.php

@@ -6,7 +6,7 @@ $themeDimensionsIcons = array(16, 32, 48, 64, 96, 128, 192, 256, 384, 512);
 $colorScheme = array(
   // Light theme
   "text-light" => "#2a2a2a",
-  "bg-light" => "white",
+  "bg-light" => "#ffffff", // Must be a long hexadecimal color
   "bgField-light" => "#eeeeee",
   "bgHelp-light" => "#ececec",
   "bgTextarea-light" => "#e5e5e5",
@@ -15,9 +15,10 @@ $colorScheme = array(
   "border-light" => "#65666b",
   "borderHover-light" => "#46484e",
   "borderFocus-light" => "#2a2a2a",
+  "borderQr-light" => "gray",
   // Dark theme
   "text-dark" => "white",
-  "bg-dark" => "#2a2a2a",
+  "bg-dark" => "#2a2a2a", // Must be a long hexadecimal color
   "bgField-dark" => "#31363B",
   "bgHelp-dark" => "#151616",
   "bgTextarea-dark" => "#232629",
@@ -25,5 +26,6 @@ $colorScheme = array(
   "textareaPlaceholder-dark" => "#bababa",
   "border-dark" => "#5f5f5f",
   "borderHover-dark" => "#808080",
-  "borderFocus-dark" => "white"
+  "borderFocus-dark" => "white",
+  "borderQr-dark" => "gray",
 );