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)
// 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

View File

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

View File

@ -8,8 +8,6 @@
"start_url": "<?= $rootPath; ?>",
"scope": "<?= $rootPath; ?>",
"display": "standalone",
"theme_color": "<?= $variablesTheme["bg"]; ?>",
"background_color": "<?= $variablesTheme["bg"]; ?>",
"orientation": "portrait",
"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/>.
*/
@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 */

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

View File

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