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

This commit is contained in:
Miraty 2021-03-07 23:03:33 +01:00
parent 9944bfbb82
commit 82e77cdb99
31 changed files with 201 additions and 72 deletions

View File

@ -11,7 +11,7 @@ $timeBeforeDeletion = 60 * 60 * 24 * 7;
// EN: Theme's name (must be in the themes directory) // EN: Theme's name (must be in the themes directory)
// FR : Nom du thème (doit être dans le dossier themes) // 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 // 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 // FR : Langue utilisée si celles demandées par l'utilisateurice ne sont pas disponibles

View File

@ -89,7 +89,6 @@ if (badQuery()) {
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>LibreQR · <?= $loc['subtitle'] ?></title> <title>LibreQR · <?= $loc['subtitle'] ?></title>
<meta name="description" content="<?= $loc['description'] ?>"> <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"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="manifest.php"> <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']) ?>"> <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 // Then delete it
unlink("temp/style.min.css"); 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 <?php
foreach($themeDimensionsIcons as $dimFav) { // Set all icons dimensions foreach($themeDimensionsIcons as $dimFav) { // Set all icons dimensions

View File

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

View File

@ -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/>. 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; font-family: system-ui, sans-serif;
scrollbar-color: @text @bg;
scrollbar-width: auto; scrollbar-width: auto;
@media @light {
scrollbar-color: @text-light @bg-light;
}
@media @dark {
scrollbar-color: @text-dark @bg-dark;
}
} }
a { a {
color: @text;
text-decoration: underline; text-decoration: underline;
@media @light {
color: @text-light;
}
@media @dark {
color: @text-dark;
}
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
@ -31,10 +48,17 @@ p {
} }
details .helpText { details .helpText {
background-color: @bgHelp;
padding: 5px; padding: 5px;
border-radius: 10px; border-radius: 10px;
text-align: left; text-align: left;
@media @light {
background-color: @bgHelp-light;
}
@media @dark {
background-color: @bgHelp-dark;
}
} }
#menusDeroulants summary { #menusDeroulants summary {
@ -76,11 +100,19 @@ main {
body { body {
margin: 18px; margin: 18px;
background-color: @bg;
color: @text;
font-weight: normal; font-weight: normal;
font-size: 20px; font-size: 20px;
height: 99%; height: 99%;
@media @light {
color: @text-light;
background-color: @bg-light;
}
@media @dark {
color: @text-dark;
background-color: @bg-dark;
}
} }
html { html {
@ -143,8 +175,16 @@ h2 {
} }
::selection { ::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] { label[for=txt] {
@ -167,13 +207,26 @@ label[for=txt] {
} }
.metaText { .metaText {
color: @text;
padding: 6px; padding: 6px;
@media @light {
color: @text-light;
}
@media @dark {
color: @text-dark;
}
& a, a:visited { & a, a:visited {
color: @text;
text-decoration: underline; text-decoration: underline;
@media @light {
color: @text-light;
} }
@media @dark {
color: @text-dark;
}
}
} }
footer { footer {
@ -202,40 +255,83 @@ header, footer {
/* Inputs */ /* Inputs */
#redondancy, #margin, #txt, #size, input[type=color], input[type=submit], .button { #redondancy, #margin, #txt, #size, input[type=color], input[type=submit], .button {
border: 2px @border solid; border-width: 2px;
border-style: solid;
border-radius: 10px; border-radius: 10px;
font-size: 20px; font-size: 20px;
padding-left: 10px; padding-left: 10px;
font-weight: normal; font-weight: normal;
color: @text;
transition: border 0.1s linear; transition: border 0.1s linear;
background-color: @bgField;
margin-top: 8px; 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 { &:hover {
border: 2px @borderHover solid; border-width: 2px;
border-style: solid;
@media @light {
color: @text-light;
}
@media @dark {
color: @text-dark;
}
} }
&:focus { &:focus {
border: 2px @borderFocus solid; border-width: 2px;
border-style: solid;
outline: none; outline: none;
@media @light {
border-color: @borderHover-light;
}
@media @dark {
border-color: @borderHover-dark;
}
} }
} }
#redondancy, #size, #margin { #redondancy, #size, #margin {
background-color: @bgField;
width: 250px; width: 250px;
height: 40px; height: 40px;
@media @light {
background-color: @bgField-light;
}
@media @dark {
background-color: @bgField-dark;
}
} }
#txt { #txt {
background-color: @bgTextField;
color: @text;
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
width: 500px; width: 500px;
scrollbar-color: @text @bgTextField;
scrollbar-width: auto; 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] { input[type=submit] {
@ -246,18 +342,33 @@ input[type=submit] {
} }
#txt::placeholder { #txt::placeholder {
color: @secondaryText;
opacity: 1; opacity: 1;
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
font-weight: normal; font-weight: normal;
font-size: 1em; font-size: 1em;
@media @light {
color: @secondaryText-light;
}
@media @dark {
color: @secondaryText-dark;
}
} }
input[type=color] { input[type=color] {
height: 60px; height: 60px;
width: 84px; width: 84px;
padding: 5px; 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 */ /* Media queries */

View File

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

View File

Before

Width:  |  Height:  |  Size: 207 B

After

Width:  |  Height:  |  Size: 207 B

View File

Before

Width:  |  Height:  |  Size: 163 B

After

Width:  |  Height:  |  Size: 163 B

View File

Before

Width:  |  Height:  |  Size: 249 B

After

Width:  |  Height:  |  Size: 249 B

View File

Before

Width:  |  Height:  |  Size: 246 B

After

Width:  |  Height:  |  Size: 246 B

View File

Before

Width:  |  Height:  |  Size: 187 B

After

Width:  |  Height:  |  Size: 187 B

View File

Before

Width:  |  Height:  |  Size: 293 B

After

Width:  |  Height:  |  Size: 293 B

View File

Before

Width:  |  Height:  |  Size: 217 B

After

Width:  |  Height:  |  Size: 217 B

View File

Before

Width:  |  Height:  |  Size: 354 B

After

Width:  |  Height:  |  Size: 354 B

View File

Before

Width:  |  Height:  |  Size: 198 B

After

Width:  |  Height:  |  Size: 198 B

View File

Before

Width:  |  Height:  |  Size: 231 B

After

Width:  |  Height:  |  Size: 231 B

View File

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

27
themes/libreqr/theme.php Executable file
View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 209 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 159 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 242 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 242 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 183 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 287 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 214 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 335 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 192 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 226 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.2 KiB

View File

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

View File

@ -1,15 +1,27 @@
<?php <?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"
);

View File

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