From 82e77cdb9954360f57853eb24bbd9cc4241c5838 Mon Sep 17 00:00:00 2001 From: Miraty Date: Sun, 7 Mar 2021 23:03:33 +0100 Subject: [PATCH] Use prefers-color-scheme to let the client make the light/dark choice --- config.inc.php | 2 +- index.php | 20 ++- manifest.php | 2 - style.less | 151 +++++++++++++++++++--- themes/dark/theme.php | 15 --- themes/{dark => libreqr}/icons/128.png | Bin themes/{dark => libreqr}/icons/16.png | Bin themes/{dark => libreqr}/icons/192.png | Bin themes/{dark => libreqr}/icons/256.png | Bin themes/{dark => libreqr}/icons/32.png | Bin themes/{dark => libreqr}/icons/384.png | Bin themes/{dark => libreqr}/icons/48.png | Bin themes/{dark => libreqr}/icons/512.png | Bin themes/{dark => libreqr}/icons/64.png | Bin themes/{dark => libreqr}/icons/96.png | Bin themes/{dark => libreqr}/icons/source.png | Bin themes/libreqr/theme.php | 27 ++++ themes/light/icons/128.png | Bin 209 -> 0 bytes themes/light/icons/16.png | Bin 159 -> 0 bytes themes/light/icons/192.png | Bin 242 -> 0 bytes themes/light/icons/256.png | Bin 242 -> 0 bytes themes/light/icons/32.png | Bin 183 -> 0 bytes themes/light/icons/384.png | Bin 287 -> 0 bytes themes/light/icons/48.png | Bin 214 -> 0 bytes themes/light/icons/512.png | Bin 335 -> 0 bytes themes/light/icons/64.png | Bin 192 -> 0 bytes themes/light/icons/96.png | Bin 226 -> 0 bytes themes/light/icons/source.png | Bin 6386 -> 0 bytes themes/light/theme.php | 15 --- themes/parinux/theme.php | 36 ++++-- themes/resize.php | 5 + 31 files changed, 201 insertions(+), 72 deletions(-) delete mode 100755 themes/dark/theme.php rename themes/{dark => libreqr}/icons/128.png (100%) rename themes/{dark => libreqr}/icons/16.png (100%) rename themes/{dark => libreqr}/icons/192.png (100%) rename themes/{dark => libreqr}/icons/256.png (100%) rename themes/{dark => libreqr}/icons/32.png (100%) rename themes/{dark => libreqr}/icons/384.png (100%) rename themes/{dark => libreqr}/icons/48.png (100%) rename themes/{dark => libreqr}/icons/512.png (100%) rename themes/{dark => libreqr}/icons/64.png (100%) rename themes/{dark => libreqr}/icons/96.png (100%) rename themes/{dark => libreqr}/icons/source.png (100%) create mode 100755 themes/libreqr/theme.php delete mode 100755 themes/light/icons/128.png delete mode 100755 themes/light/icons/16.png delete mode 100755 themes/light/icons/192.png delete mode 100755 themes/light/icons/256.png delete mode 100755 themes/light/icons/32.png delete mode 100755 themes/light/icons/384.png delete mode 100755 themes/light/icons/48.png delete mode 100755 themes/light/icons/512.png delete mode 100755 themes/light/icons/64.png delete mode 100755 themes/light/icons/96.png delete mode 100755 themes/light/icons/source.png delete mode 100755 themes/light/theme.php diff --git a/config.inc.php b/config.inc.php index b4b42f8..860e44e 100755 --- a/config.inc.php +++ b/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 diff --git a/index.php b/index.php index a20df53..547854c 100755 --- a/index.php +++ b/index.php @@ -89,7 +89,6 @@ if (badQuery()) { LibreQR · <?= $loc['subtitle'] ?> - @@ -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 ?> - + ", "scope": "", "display": "standalone", - "theme_color": "", - "background_color": "", "orientation": "portrait", "icons": [ diff --git a/style.less b/style.less index 9e2be91..1e3b80e 100755 --- a/style.less +++ b/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 . */ +@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 */ diff --git a/themes/dark/theme.php b/themes/dark/theme.php deleted file mode 100755 index a10332f..0000000 --- a/themes/dark/theme.php +++ /dev/null @@ -1,15 +0,0 @@ - "#2a2a2a", - "bgField" => "#31363B", - "bgTextField" => "#232629", - "bgHelp" => "#151616", - "border" => "#5f5f5f", - "borderHover" => "#808080", - "borderFocus" => "white", - "text" => "white", - "secondaryText" => "#bababa" -); // Définit les couleurs du thème diff --git a/themes/dark/icons/128.png b/themes/libreqr/icons/128.png similarity index 100% rename from themes/dark/icons/128.png rename to themes/libreqr/icons/128.png diff --git a/themes/dark/icons/16.png b/themes/libreqr/icons/16.png similarity index 100% rename from themes/dark/icons/16.png rename to themes/libreqr/icons/16.png diff --git a/themes/dark/icons/192.png b/themes/libreqr/icons/192.png similarity index 100% rename from themes/dark/icons/192.png rename to themes/libreqr/icons/192.png diff --git a/themes/dark/icons/256.png b/themes/libreqr/icons/256.png similarity index 100% rename from themes/dark/icons/256.png rename to themes/libreqr/icons/256.png diff --git a/themes/dark/icons/32.png b/themes/libreqr/icons/32.png similarity index 100% rename from themes/dark/icons/32.png rename to themes/libreqr/icons/32.png diff --git a/themes/dark/icons/384.png b/themes/libreqr/icons/384.png similarity index 100% rename from themes/dark/icons/384.png rename to themes/libreqr/icons/384.png diff --git a/themes/dark/icons/48.png b/themes/libreqr/icons/48.png similarity index 100% rename from themes/dark/icons/48.png rename to themes/libreqr/icons/48.png diff --git a/themes/dark/icons/512.png b/themes/libreqr/icons/512.png similarity index 100% rename from themes/dark/icons/512.png rename to themes/libreqr/icons/512.png diff --git a/themes/dark/icons/64.png b/themes/libreqr/icons/64.png similarity index 100% rename from themes/dark/icons/64.png rename to themes/libreqr/icons/64.png diff --git a/themes/dark/icons/96.png b/themes/libreqr/icons/96.png similarity index 100% rename from themes/dark/icons/96.png rename to themes/libreqr/icons/96.png diff --git a/themes/dark/icons/source.png b/themes/libreqr/icons/source.png similarity index 100% rename from themes/dark/icons/source.png rename to themes/libreqr/icons/source.png diff --git a/themes/libreqr/theme.php b/themes/libreqr/theme.php new file mode 100755 index 0000000..47f015f --- /dev/null +++ b/themes/libreqr/theme.php @@ -0,0 +1,27 @@ + "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" +); diff --git a/themes/light/icons/128.png b/themes/light/icons/128.png deleted file mode 100755 index fa275394fd419c184eb3b0923f7a2be63e1776e7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 209 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?O3?zSk_}l@cSkfJR9T^xl_H+M9WCijWi-X*q z7}lMWc?smO1^9%x{{R19OH1p@3DIppkxWk)#}JR>XQu@69Z=wK-uZv2_3|k%`3_8O zahPY%YudYG>6dE~aRvs_aSjU18xy|O$*}1(*PZ*?{A;}#H&fK4edQc3^G@C}5cm|p z!v4hNW2?r5w5d)!F9eP^`usFb{pI+yV_U*&_VO#te{xN}RmXpR1GJRE)78&qol`;+ E0PkB)egFUf diff --git a/themes/light/icons/16.png b/themes/light/icons/16.png deleted file mode 100755 index 25d6f371be32be638efab1818742faff4636a211..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 159 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!D3?x-;bCrM;OS+@4BLl<6e(pbstUx|vage(c z!@6@aFM%Ak0G|-o|NsAMX=z!lvI6;x#X;^) z4C~IxyaaOC0(?ST|NsB5rKNS{gy=S)NSCLJV@Sl|x7RQ79#G(52{0@8uY0q>Y?1o5 z^hXTtKFPIpf(x(u6w2!w-OJq3D=uDeqUY%n{h1FqBxbsc&q=g<9w;os$a->h7{iU< zHM)TZ#iJC;f0rHPukuY|ubSDwG%ZVCSU{sU=go=p4Gjmi0`;H!J1p$a*J2e>>(>t8 l=xgYH^eb94AmGk1W}XY`QErnzu>oDh;OXk;vd$@?2>{L6Re}Hj diff --git a/themes/light/icons/256.png b/themes/light/icons/256.png deleted file mode 100755 index a2a3166465dbda4acf57b61ee0ba54e7e1a6d721..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 242 zcmeAS@N?(olHy`uVBq!ia0y~yU<5K585o&?RN5XZRUpNZ?&#~tz_78O`%fY(NVYi0 z-HBn{IhmJ04qJdvi0l9V|FyKVuAC6v1{CS?ba4#HxcBzPLEZ)f9_Nd1_M6BA%)T)( z;=p~OrfJ7@m2y{eOtdk-eJK4?PGIkbpDg6;2<(Xzh)w%2lK8289HBCIGAolgmE%HYRI$RQovB@(7$Qz oN`^xR?D`_4gB*Aio;+in_UZD~IF|WOfv#fkboFyt=akR{0Ca*@s{jB1 diff --git a/themes/light/icons/32.png b/themes/light/icons/32.png deleted file mode 100755 index f30300f8bd78ad1a990bebad3ade19a38023aa57..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 183 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnL3?x0byx0z;SkfJR9T^xl_H+M9WCijWi-X*q z7}lMWc?smO1^9%x{{R19OH1p@3DIpp5r0n?#}JO|wx=A~7#w+AE>6gOv0CJ2TZ}Dx z#xpHThZ!@&zQo&f3GGa^cYcs|Z(btiIVPik{pF~z5pRqW| z-HBn{IhmJ04qJdvi0l9V|FyKVuAC6v1{B%u>EaktaqI0ZZ@y*&9#)5U^)Ji9m;O@- zU8O7bS&U6Ct1Y9LU<4MxW2SAkNqA3R&X?Avjmh6Y0grB6%tFlq(f VS!>7;5)G7O@O1TaS?83{1OPXiU`qf1 diff --git a/themes/light/icons/48.png b/themes/light/icons/48.png deleted file mode 100755 index 66c39e61c132385b0959567afe3bc87f0f3b0e38..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 214 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDH3?y^UWFG-iEa{HEjtmSN`?>!lvI6;x#X;^) z4C~IxyaaOC0(?ST|NsB5rKNS{gy=S)NS>#QV~E7%+zT6d8x#auA1aHKZD8QcHkhW9 zkiZz**=Onzb70b;ilm$`2k+P1J^i%9Ez-|A{6L3JvvbX~>~;?sfzw}Qe_t}%%>3q< zo1jAfN)7f4PM?$(_}-qupqzD4cAjOJ%adT`x2#`cz9nDb?P4sPp*CGY6KFGor>mdK II;Vst0J&yMc>n+a diff --git a/themes/light/icons/512.png b/themes/light/icons/512.png deleted file mode 100755 index 7379b01ae1bc5ea18c08ece3194e1e9f8341ebc5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 335 zcmeAS@N?(olHy`uVBq!ia0y~yU;;9k7#Nv>)VXbLJAo8Sx}&cn1H;CC?mvmFKt5w} zkh>GZx^prwfgH8~pAgso|Nm=gX7$ zvXx%(EYbBhuPHsWQ1P79b#Bq`tuN((>VaV90W1AA&v#ctcqzAoaq@cqI`;DqeL)I5UHx3vIVCg!07?j3r2qf` diff --git a/themes/light/icons/64.png b/themes/light/icons/64.png deleted file mode 100755 index e9f77bcf7f2ab7a2bb826c1f422b6bcd5f7b8323..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 192 zcmeAS@N?(olHy`uVBq!ia0vp^4j|0P3?wHke>@jRv7|ftIx;Y9?C1WI$O_~$76-XI zF|0c$^AgBm3-AeX{r~^JmX_9)6QbLIA`zZ0jv*T7d(T}IJYc}V6kwL{U-xFiqFnpK zNB``3(!muYl6xYI)q_J;W`*+c`|FjBKFqH>^v*V!d&UzxkpqQhs~^Ou)g04t+o+tm mG@JE)g=@x+!?(9SS|k@KfBbE+=28iu9SokXelF{r5}E)!RYckV diff --git a/themes/light/icons/96.png b/themes/light/icons/96.png deleted file mode 100755 index 4c03902294d1fb103eed772edd16eaeb7e87439b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 226 zcmeAS@N?(olHy`uVBq!ia0vp^2_VeK3?y%aJ*@^(Ea{HEjtmSN`?>!lvI6;x#X;^) z4C~IxyaaOC0(?ST|NsB5rKNS{gy=S)NR_9HV~EA+wUaOMGAMF5d&(S`7;$%^%z-80 z56<1OH&yxcM`7uLnO}GqZl8Oym1TouUa>330q#CFC8wn<0=)liG7egIzuLpg+#R~| z>yw7r3BqaTbbQ`8r`4Rg6ssYuIX#MX!{Xv=t!#h7!W|5<{{NaVe_B}G>N`v?D;eHZ WKCAh+h$kB83I diff --git a/themes/light/icons/source.png b/themes/light/icons/source.png deleted file mode 100755 index 41c0467b3c9eb4b7445d17718bd639d791292dd4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6386 zcmeAS@N?(olHy`uVBq!ia0y~yU;#2&7&zE~RK2WrGXn!-OQy4PfTy#wLP1e}T4qiv z1B1rI+KILvhaF^&#z${mB-&mkAb2uhu1-gnMV4q+fZ`RdwN^7?ezE#WO%f4zKe+Y5 zgX2k84<3ySXAgH2_`^_GR1#D&QRx44k*FgT1$X+(zsr@sXQq;sqVV54||L;fPPIpUC77GV$L(eEh0+Z1bM;e=UDanRAk1zJtx_lEX^(6z1LA zQgZJ15y7x2B9Dq688+*A{5es2^Qrkc*7myKQfeaSBwht=lqf ze-L|`o#*$F7@eNwc!MZ0cF1&yDP9CWF!}7oB zOh8%yh=FknA_y`;NrJ%vM1WHVUM6uSf~_RdL?qj3WH`Y9Kv#g>4^KE8BYHlyXyZ@e^GE5)-FdzE?HW`$K85}?a13@Ou;>8DKJqaFd0I4T3 z!z+N*5@$G4coE0MZuo~A=}ozwJ)p48m1Vkq|L^V#5z4@84~0{KhM(B{8?R;ko?0`UgLs|119+`+u~;WM}|~F;Zlc5ZsU$ zM$(JKwE4Dsw=whTNfL<>(aH?>>L2{&H?9GfRU}w|;W#7<(3uKgj}T`#2ZI_&HN{1z z1K3Wak{-;YRUXD;c*UFY^6fUjQiUNQAX>TN|Koqh|GxiYd{i9dKn1WXi47T`;s&q= z^Z>>XCC)?zkYNoB2_V(93K<$jqyxz5*i%WvaXaCh>}-}aRYRt8`@hTY_}?fw+WKw) z2N+VqAt8wnDomo~6i$9&%=mr&E3o9QXV~-q12B#M|32DI!Ki1E!k;*%0yx^x;|kae zXPUOvlvz4WNJ_vWX5+i_i-$j1K&Ndt)QWi~|bwuOr`R d^+4*-Gfev>=jBH-Ih+T{dAj "white", - "bgField" => "#eeeeee", - "bgTextField" => "#e5e5e5", - "bgHelp" => "#ececec", - "border" => "#65666b", - "borderHover" => "#46484e", - "borderFocus" => "#2a2a2a", - "text" => "#2a2a2a", - "secondaryText" => "#868686" -); // Définit les couleurs du thème diff --git a/themes/parinux/theme.php b/themes/parinux/theme.php index a7c97a5..49c9af9 100755 --- a/themes/parinux/theme.php +++ b/themes/parinux/theme.php @@ -1,15 +1,27 @@ "#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" +); diff --git a/themes/resize.php b/themes/resize.php index c93ade1..67fbd98 100755 --- a/themes/resize.php +++ b/themes/resize.php @@ -1,4 +1,9 @@