Use prefers-color-scheme to let the client make the light/dark choice
@ -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
|
||||||
|
20
index.php
@ -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?redondancy=<?= $_GET['redondancy'] ?>&margin=<?= $_GET['margin'] ?>&size=<?= $_GET['size'] ?>&bgColor=<?= urlencode($_GET['bgColor']) ?>&mainColor=<?= urlencode($_GET['mainColor']) ?>">
|
<link rel="search" type="application/opensearchdescription+xml" title="<?= $loc['opensearch_actionName'] ?>" href="opensearch.php?redondancy=<?= $_GET['redondancy'] ?>&margin=<?= $_GET['margin'] ?>&size=<?= $_GET['size'] ?>&bgColor=<?= urlencode($_GET['bgColor']) ?>&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
|
||||||
|
@ -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":
|
||||||
[
|
[
|
||||||
|
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/>.
|
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 */
|
||||||
|
@ -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
|
|
Before Width: | Height: | Size: 207 B After Width: | Height: | Size: 207 B |
Before Width: | Height: | Size: 163 B After Width: | Height: | Size: 163 B |
Before Width: | Height: | Size: 249 B After Width: | Height: | Size: 249 B |
Before Width: | Height: | Size: 246 B After Width: | Height: | Size: 246 B |
Before Width: | Height: | Size: 187 B After Width: | Height: | Size: 187 B |
Before Width: | Height: | Size: 293 B After Width: | Height: | Size: 293 B |
Before Width: | Height: | Size: 217 B After Width: | Height: | Size: 217 B |
Before Width: | Height: | Size: 354 B After Width: | Height: | Size: 354 B |
Before Width: | Height: | Size: 198 B After Width: | Height: | Size: 198 B |
Before Width: | Height: | Size: 231 B After Width: | Height: | Size: 231 B |
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
27
themes/libreqr/theme.php
Executable 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"
|
||||||
|
);
|
Before Width: | Height: | Size: 209 B |
Before Width: | Height: | Size: 159 B |
Before Width: | Height: | Size: 242 B |
Before Width: | Height: | Size: 242 B |
Before Width: | Height: | Size: 183 B |
Before Width: | Height: | Size: 287 B |
Before Width: | Height: | Size: 214 B |
Before Width: | Height: | Size: 335 B |
Before Width: | Height: | Size: 192 B |
Before Width: | Height: | Size: 226 B |
Before Width: | Height: | Size: 6.2 KiB |
@ -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
|
|
@ -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"
|
||||||
|
);
|
||||||
|
@ -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();
|
||||||
|