Browse Source

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

pull/12/head
Miraty 5 months ago
parent
commit
82e77cdb99
  1. 2
      config.inc.php
  2. 20
      index.php
  3. 2
      manifest.php
  4. 151
      style.less
  5. 15
      themes/dark/theme.php
  6. 0
      themes/libreqr/icons/128.png
  7. 0
      themes/libreqr/icons/16.png
  8. 0
      themes/libreqr/icons/192.png
  9. 0
      themes/libreqr/icons/256.png
  10. 0
      themes/libreqr/icons/32.png
  11. 0
      themes/libreqr/icons/384.png
  12. 0
      themes/libreqr/icons/48.png
  13. 0
      themes/libreqr/icons/512.png
  14. 0
      themes/libreqr/icons/64.png
  15. 0
      themes/libreqr/icons/96.png
  16. 0
      themes/libreqr/icons/source.png
  17. 27
      themes/libreqr/theme.php
  18. BIN
      themes/light/icons/128.png
  19. BIN
      themes/light/icons/16.png
  20. BIN
      themes/light/icons/192.png
  21. BIN
      themes/light/icons/256.png
  22. BIN
      themes/light/icons/32.png
  23. BIN
      themes/light/icons/384.png
  24. BIN
      themes/light/icons/48.png
  25. BIN
      themes/light/icons/512.png
  26. BIN
      themes/light/icons/64.png
  27. BIN
      themes/light/icons/96.png
  28. BIN
      themes/light/icons/source.png
  29. 15
      themes/light/theme.php
  30. 36
      themes/parinux/theme.php
  31. 5
      themes/resize.php

2
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

20
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";
$less = new lessc;
$less->setVariables($variablesTheme); // Make these colors available in style.less
$less->setFormatter("compressed");
$less->checkedCompile("style.less", "temp/style.min.css"); // Compile, minimise and cache style.less into style.min.css
require_once "less.php/lib/Less/Autoloader.php";
Less_Autoloader::register();
$options = array('cache_dir' => '/srv/http/libreqr/temp/', 'compress' => true);
$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

2
manifest.php

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

151
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 */

15
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

0
themes/dark/icons/128.png → themes/libreqr/icons/128.png

Before

Width: 128  |  Height: 128  |  Size: 207 B

After

Width: 128  |  Height: 128  |  Size: 207 B

0
themes/dark/icons/16.png → themes/libreqr/icons/16.png

Before

Width: 16  |  Height: 16  |  Size: 163 B

After

Width: 16  |  Height: 16  |  Size: 163 B

0
themes/dark/icons/192.png → themes/libreqr/icons/192.png

Before

Width: 192  |  Height: 192  |  Size: 249 B

After

Width: 192  |  Height: 192  |  Size: 249 B

0
themes/dark/icons/256.png → themes/libreqr/icons/256.png

Before

Width: 256  |  Height: 256  |  Size: 246 B

After

Width: 256  |  Height: 256  |  Size: 246 B

0
themes/dark/icons/32.png → themes/libreqr/icons/32.png

Before

Width: 32  |  Height: 32  |  Size: 187 B

After

Width: 32  |  Height: 32  |  Size: 187 B

0
themes/dark/icons/384.png → themes/libreqr/icons/384.png

Before

Width: 384  |  Height: 384  |  Size: 293 B

After

Width: 384  |  Height: 384  |  Size: 293 B

0
themes/dark/icons/48.png → themes/libreqr/icons/48.png

Before

Width: 48  |  Height: 48  |  Size: 217 B

After

Width: 48  |  Height: 48  |  Size: 217 B

0
themes/dark/icons/512.png → themes/libreqr/icons/512.png

Before

Width: 512  |  Height: 512  |  Size: 354 B

After

Width: 512  |  Height: 512  |  Size: 354 B

0
themes/dark/icons/64.png → themes/libreqr/icons/64.png

Before

Width: 64  |  Height: 64  |  Size: 198 B

After

Width: 64  |  Height: 64  |  Size: 198 B

0
themes/dark/icons/96.png → themes/libreqr/icons/96.png

Before

Width: 96  |  Height: 96  |  Size: 231 B

After

Width: 96  |  Height: 96  |  Size: 231 B

0
themes/dark/icons/source.png → themes/libreqr/icons/source.png

Before

Width: 1024  |  Height: 1024  |  Size: 6.2 KiB

After

Width: 1024  |  Height: 1024  |  Size: 6.2 KiB

27
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"
);

BIN
themes/light/icons/128.png

Before

Width: 128  |  Height: 128  |  Size: 209 B

BIN
themes/light/icons/16.png

Before

Width: 16  |  Height: 16  |  Size: 159 B

BIN
themes/light/icons/192.png

Before

Width: 192  |  Height: 192  |  Size: 242 B

BIN
themes/light/icons/256.png

Before

Width: 256  |  Height: 256  |  Size: 242 B

BIN
themes/light/icons/32.png

Before

Width: 32  |  Height: 32  |  Size: 183 B

BIN
themes/light/icons/384.png

Before

Width: 384  |  Height: 384  |  Size: 287 B

BIN
themes/light/icons/48.png

Before

Width: 48  |  Height: 48  |  Size: 214 B

BIN
themes/light/icons/512.png

Before

Width: 512  |  Height: 512  |  Size: 335 B

BIN
themes/light/icons/64.png

Before

Width: 64  |  Height: 64  |  Size: 192 B

BIN
themes/light/icons/96.png

Before

Width: 96  |  Height: 96  |  Size: 226 B

BIN
themes/light/icons/source.png

Before

Width: 1024  |  Height: 1024  |  Size: 6.2 KiB

15
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

36
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(
"bg" => "#14678b",
"bgField" => "#2186b1",
"bgTextField" => "#2186b1",
"bgHelp" => "#118abe",
"border" => "#42a0c8",
"borderHover" => "#87d1f1",
"borderFocus" => "#e2f6ff",
"text" => "#ffffff",
"secondaryText" => "#bbe1f1"
); // Définit les couleurs du thème
$colorScheme = array(
// Light theme
"bg-light" => "#14678b",
"bgField-light" => "#2186b1",
"bgTextField-light" => "#2186b1",
"bgHelp-light" => "#118abe",
"border-light" => "#42a0c8",
"borderHover-light" => "#87d1f1",
"borderFocus-light" => "#e2f6ff",
"text-light" => "#ffffff",
"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"
);

5
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();

Loading…
Cancel
Save