Use prefers-color-scheme to let the client make the light/dark choice

config.inc.php

@@ -11,7 +11,7 @@ $timeBeforeDeletion = 60 * 60 * 24 * 7;
 
 // EN: Theme's name (must be in the themes directory)
 // FR : Nom du thème (doit être dans le dossier themes)
-$theme = "dark";
+$theme = "libreqr";
 
 // EN: Language used if those requested by the user are not available
 // FR : Langue utilisée si celles demandées par l'utilisateurice ne sont pas disponibles

index.php

@@ -89,7 +89,6 @@ if (badQuery()) {
     <meta charset="UTF-8">
     <title>LibreQR · <?= $loc['subtitle'] ?></title>
     <meta name="description" content="<?= $loc['description'] ?>">
-    <meta name="theme-color" content="<?php echo $variablesTheme['bg']; ?>">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="manifest" href="manifest.php">
     <link rel="search" type="application/opensearchdescription+xml" title="<?= $loc['opensearch_actionName'] ?>" href="opensearch.php&#63;redondancy=<?= $_GET['redondancy'] ?>&amp;margin=<?= $_GET['margin'] ?>&amp;size=<?= $_GET['size'] ?>&amp;bgColor=<?= urlencode($_GET['bgColor']) ?>&amp;mainColor=<?= urlencode($_GET['mainColor']) ?>">
@@ -101,13 +100,20 @@ if (badQuery()) {
         // Then delete it
         unlink("temp/style.min.css");
 
-    require "less.php/lessc.inc.php";
+    require_once "less.php/lib/Less/Autoloader.php";
-    $less = new lessc;
+    Less_Autoloader::register();
-    $less->setVariables($variablesTheme); // Make these colors available in style.less
+
-    $less->setFormatter("compressed");
+    $options = array('cache_dir' => '/srv/http/libreqr/temp/', 'compress' => true);
-    $less->checkedCompile("style.less", "temp/style.min.css"); // Compile, minimise and cache style.less into style.min.css
+    $cssFileName = Less_Cache::Get(array("/srv/http/libreqr/style.less" => ""), $options, $colorScheme);
+
+    //require "less.php/lessc.inc.php";
+    //$less = new lessc;
+    //$less->setVariables($lightTheme); // Make these colors available in style.less
+    //$less->setVariables($darkTheme);
+    //$less->setFormatter("compressed");
+    //$less->checkedCompile("style.less", "temp/style.min.css"); // Compile, minimise and cache style.less into style.min.css
     ?>
-    <link type="text/css" rel="stylesheet" href="temp/style.min.css">
+    <link type="text/css" rel="stylesheet" href="temp/<?= $cssFileName ?>">
 
     <?php
     foreach($themeDimensionsIcons as $dimFav) { // Set all icons dimensions

manifest.php

@@ -8,8 +8,6 @@
 	"start_url": "<?= $rootPath; ?>",
 	"scope": "<?= $rootPath; ?>",
 	"display": "standalone",
-	"theme_color": "<?= $variablesTheme["bg"]; ?>",
-	"background_color": "<?= $variablesTheme["bg"]; ?>",
 	"orientation": "portrait",
 	"icons":
 	[

style.less

@@ -10,17 +10,34 @@ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General
 You should have received a copy of the GNU Affero General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 */
+@light: ~"(prefers-color-scheme: light)";
+@dark: ~"(prefers-color-scheme: dark)";
 
 * {
   font-family: system-ui, sans-serif;
-  scrollbar-color: @text @bg;
+
   scrollbar-width: auto;
+
+  @media @light {
+    scrollbar-color: @text-light @bg-light;
+  }
+
+  @media @dark {
+    scrollbar-color: @text-dark @bg-dark;
+  }
 }
 
 a {
-  color: @text;
   text-decoration: underline;
 
+  @media @light {
+    color: @text-light;
+  }
+
+  @media @dark {
+    color: @text-dark;
+  }
+
   &:hover {
     text-decoration: none;
   }
@@ -31,10 +48,17 @@ p {
 }
 
 details .helpText {
-  background-color: @bgHelp;
   padding: 5px;
   border-radius: 10px;
   text-align: left;
+
+  @media @light {
+    background-color: @bgHelp-light;
+  }
+
+  @media @dark {
+    background-color: @bgHelp-dark;
+  }
 }
 
 #menusDeroulants summary {
@@ -76,11 +100,19 @@ main {
 
 body {
   margin: 18px;
-  background-color: @bg;
-  color: @text;
   font-weight: normal;
   font-size: 20px;
   height: 99%;
+
+  @media @light {
+    color: @text-light;
+    background-color: @bg-light;
+  }
+
+  @media @dark {
+    color: @text-dark;
+    background-color: @bg-dark;
+  }
 }
 
 html {
@@ -143,8 +175,16 @@ h2 {
 }
 
 ::selection {
-  color: @bg;
+
-  background-color: @text;
+  @media @light {
+    color: @bg-light;
+    background-color: @text-light;
+  }
+
+  @media @dark {
+    color: @bg-dark;
+    background-color: @text-dark;
+  }
 }
 
 label[for=txt] {
@@ -167,13 +207,26 @@ label[for=txt] {
 }
 
 .metaText {
-  color: @text;
   padding: 6px;
+  @media @light {
+    color: @text-light;
+  }
+
+  @media @dark {
+    color: @text-dark;
+  }
 
   & a, a:visited {
-    color: @text;
     text-decoration: underline;
+    @media @light {
+      color: @text-light;
     }
+
+    @media @dark {
+      color: @text-dark;
+    }
+  }
+
 }
 
 footer {
@@ -202,40 +255,83 @@ header, footer {
 /* Inputs */
 
 #redondancy, #margin, #txt, #size, input[type=color], input[type=submit], .button {
-  border: 2px @border solid;
+  border-width: 2px;
+  border-style: solid;
   border-radius: 10px;
   font-size: 20px;
   padding-left: 10px;
   font-weight: normal;
-  color: @text;
   transition: border 0.1s linear;
-  background-color: @bgField;
   margin-top: 8px;
 
+  @media @light {
+    color: @text-light;
+    background-color: @bgField-light;
+    border-color: @border-light;
+  }
+
+  @media @dark {
+    color: @text-dark;
+    background-color: @bgField-dark;
+    border-color: @border-dark;
+  }
+
   &:hover {
-    border: 2px @borderHover solid;
+    border-width: 2px;
+    border-style: solid;
+    @media @light {
+      color: @text-light;
+    }
+
+    @media @dark {
+      color: @text-dark;
+    }
   }
 
   &:focus {
-    border: 2px @borderFocus solid;
+    border-width: 2px;
+    border-style: solid;
     outline: none;
+
+    @media @light {
+      border-color: @borderHover-light;
+    }
+
+    @media @dark {
+      border-color: @borderHover-dark;
+    }
   }
 }
 
 #redondancy, #size, #margin {
-  background-color: @bgField;
   width: 250px;
   height: 40px;
+  @media @light {
+    background-color: @bgField-light;
+  }
+
+  @media @dark {
+    background-color: @bgField-dark;
+  }
 }
 
 #txt {
-  background-color: @bgTextField;
-  color: @text;
   padding: 10px;
   margin: 10px;
   width: 500px;
-  scrollbar-color: @text @bgTextField;
   scrollbar-width: auto;
+
+  @media @light {
+    background-color: @bgTextField-light;
+    color: @text-light;
+    scrollbar-color: @text-light @bgTextField-light;
+  }
+
+  @media @dark {
+    background-color: @bgTextField-dark;
+    color: @text-dark;
+    scrollbar-color: @text-dark @bgTextField-dark;
+  }
 }
 
 input[type=submit] {
@@ -246,18 +342,33 @@ input[type=submit] {
 }
 
 #txt::placeholder {
-  color: @secondaryText;
   opacity: 1;
   font-family: system-ui, sans-serif;
   font-weight: normal;
   font-size: 1em;
+  @media @light {
+    color: @secondaryText-light;
+  }
+
+  @media @dark {
+    color: @secondaryText-dark;
+  }
 }
 
 input[type=color] {
   height: 60px;
   width: 84px;
   padding: 5px;
-  border: 2px @border solid;
+  border-width: 2px;
+  border-style: solid;
+
+  @media @light {
+    border-color: @border-light;
+  }
+
+  @media @dark {
+    border-color: @border-dark;
+  }
 }
 
 /* Media queries */

themes/dark/theme.php

@@ -1,15 +0,0 @@
-<?php
-
-$themeDimensionsIcons = array(16, 32, 48, 64, 96, 128, 192, 256, 384, 512); // Liste les dimensions des icones
-
-$variablesTheme = array(
-  "bg" => "#2a2a2a",
-  "bgField" => "#31363B",
-  "bgTextField" => "#232629",
-  "bgHelp" => "#151616",
-  "border" => "#5f5f5f",
-  "borderHover" => "#808080",
-  "borderFocus" => "white",
-  "text" => "white",
-  "secondaryText" => "#bababa"
-); // Définit les couleurs du thème

themes/libreqr/theme.php

@@ -0,0 +1,27 @@
+<?php
+
+// List icons dimensions
+$themeDimensionsIcons = array(16, 32, 48, 64, 96, 128, 192, 256, 384, 512);
+
+$colorScheme = array(
+  // Light theme
+  "bg-light" => "white",
+  "bgField-light" => "#eeeeee",
+  "bgTextField-light" => "#e5e5e5",
+  "bgHelp-light" => "#ececec",
+  "border-light" => "#65666b",
+  "borderHover-light" => "#46484e",
+  "borderFocus-light" => "#2a2a2a",
+  "text-light" => "#2a2a2a",
+  "secondaryText-light" => "#868686",
+  // Dark theme
+  "bg-dark" => "#2a2a2a",
+  "bgField-dark" => "#31363B",
+  "bgTextField-dark" => "#232629",
+  "bgHelp-dark" => "#151616",
+  "border-dark" => "#5f5f5f",
+  "borderHover-dark" => "#808080",
+  "borderFocus-dark" => "white",
+  "text-dark" => "white",
+  "secondaryText-dark" => "#bababa"
+);

themes/light/theme.php

@@ -1,15 +0,0 @@
-<?php
-
-$themeDimensionsIcons = array(16, 32, 48, 64, 96, 128, 192, 256, 384, 512); // Liste les dimensions des icones
-
-$variablesTheme = array(
-  "bg" => "white",
-  "bgField" => "#eeeeee",
-  "bgTextField" => "#e5e5e5",
-  "bgHelp" => "#ececec",
-  "border" => "#65666b",
-  "borderHover" => "#46484e",
-  "borderFocus" => "#2a2a2a",
-  "text" => "#2a2a2a",
-  "secondaryText" => "#868686"
-); // Définit les couleurs du thème

themes/parinux/theme.php

@@ -1,15 +1,27 @@
 <?php
 
-$themeDimensionsIcons = array(16, 32, 48, 64, 96, 128, 192, 256, 384, 512); // Liste les dimensions des icones
+// List icons dimensions
+$themeDimensionsIcons = array(16, 32, 48, 64, 96, 128, 192, 256, 384, 512);
 
-$variablesTheme = array(
+$colorScheme = array(
-  "bg" => "#14678b",
+  // Light theme
-  "bgField" => "#2186b1",
+  "bg-light" => "#14678b",
-  "bgTextField" => "#2186b1",
+  "bgField-light" => "#2186b1",
-  "bgHelp" => "#118abe",
+  "bgTextField-light" => "#2186b1",
-  "border" => "#42a0c8",
+  "bgHelp-light" => "#118abe",
-  "borderHover" => "#87d1f1",
+  "border-light" => "#42a0c8",
-  "borderFocus" => "#e2f6ff",
+  "borderHover-light" => "#87d1f1",
-  "text" => "#ffffff",
+  "borderFocus-light" => "#e2f6ff",
-  "secondaryText" => "#bbe1f1"
+  "text-light" => "#ffffff",
-); // Définit les couleurs du thème
+  "secondaryText-light" => "#bbe1f1",
+  // Dark theme
+  "bg-dark" => "#14678b",
+  "bgField-dark" => "#2186b1",
+  "bgTextField-dark" => "#2186b1",
+  "bgHelp-dark" => "#118abe",
+  "border-dark" => "#42a0c8",
+  "borderHover-dark" => "#87d1f1",
+  "borderFocus-dark" => "#e2f6ff",
+  "text-dark" => "#ffffff",
+  "secondaryText-dark" => "#bbe1f1"
+);

themes/resize.php

@@ -1,4 +1,9 @@
 <?php
+
+/*
+  A small script that can be used to generate LibreQR's icons
+*/
+
 if (php_sapi_name() == "cli") {
   if (isset($argv[1])) {
     $done = array();