3 * Jirafeau, your web file repository
4 * Copyright (C) 2015 Jerome Jutteau <jerome@jutteau.fr>
5 * Copyright (C) 2015 Nicola Spanti (RyDroid) <dev@nicola-spanti.info>
7 * This program is free software: you can redistribute it and/or modify
8 * it under the terms of the GNU Affero General Public License as
9 * published by the Free Software Foundation, either version 3 of the
10 * License, or (at your option) any later version.
12 * This program is distributed in the hope that it will be useful,
13 * but WITHOUT ANY WARRANTY; without even the implied warranty of
14 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
15 * GNU Affero General Public License for more details.
17 * You should have received a copy of the GNU Affero General Public License
18 * along with this program. If not, see <https://www.gnu.org/licenses/>.
21 header('Content-Type: text/javascript');
22 define('JIRAFEAU_ROOT', dirname(__FILE__
) . '/../');
24 require(JIRAFEAU_ROOT
. 'lib/settings.php');
25 require(JIRAFEAU_ROOT
. 'lib/functions.php');
26 require(JIRAFEAU_ROOT
. 'lib/lang.php');
29 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
30 var web_root
= "<?php echo $cfg['web_root']; ?>";
32 var lang_array
= <?php
echo json_lang_generator(null); ?
>;
33 var lang_array_fallback
= <?php
echo json_lang_generator("en"); ?
>;
35 function translate (expr
) {
36 if (lang_array
.hasOwnProperty(expr
)) {
37 var e
= lang_array
[expr
];
41 if (lang_array_fallback
.hasOwnProperty(expr
)) {
42 var e
= lang_array_fallback
[expr
];
46 return "FIXME: " + expr
;
49 function isEmpty(str
) {
50 return (!str ||
0 === str
.length
);
53 // Extend date object with format method
54 Date
.prototype
.format
= function(format
) {
55 format
= format ||
'YYYY-MM-DD hh:mm';
57 var zeropad
= function(number
, length
) {
58 number
= number
.toString();
60 while(number
.length
< length
)
61 number
= '0' + number
;
65 YYYY
: this
.getFullYear(),
66 MM
: zeropad(this
.getMonth() +
1),
67 DD
: zeropad(this
.getDate()),
68 hh
: zeropad(this
.getHours()),
69 mm
: zeropad(this
.getMinutes()),
72 sign
= (localDate
.getTimezoneOffset() > 0) ?
'-' : '+';
73 offset
= Math
.abs(localDate
.getTimezoneOffset());
74 hours
= zeropad(Math
.floor(offset
/ 60));
75 minutes
= zeropad(offset %
60);
76 return sign + hours +
":" + minutes
;
79 pattern
= '(' +
Object.keys(formats
).join(')|(') +
')';
81 return format
.replace(new RegExp(pattern
, 'g'), function(match
) {
82 return formats
[match
];
86 function dateFromUtcString(datestring
) {
87 // matches »YYYY-MM-DD hh:mm«
88 var m
= datestring
.match(/(\d+
)-(\d+
)-(\d+
)\s+
(\d+
):(\d+
)/);
89 return new Date(Date
.UTC(+m
[1], +m
[2] - 1, +m
[3], +m
[4], +m
[5], 0));
92 function dateFromUtcTimestamp(datetimestamp
) {
93 return new Date(parseInt(datetimestamp
) * 1000)
96 function dateToUtcString(datelocal
) {
98 datelocal
.getUTCFullYear(),
99 datelocal
.getUTCMonth(),
100 datelocal
.getUTCDate(),
101 datelocal
.getUTCHours(),
102 datelocal
.getUTCMinutes(),
103 datelocal
.getUTCSeconds()
107 function dateToUtcTimestamp(datelocal
) {
109 datelocal
.getUTCFullYear(),
110 datelocal
.getUTCMonth(),
111 datelocal
.getUTCDate(),
112 datelocal
.getUTCHours(),
113 datelocal
.getUTCMinutes(),
114 datelocal
.getUTCSeconds()
118 function convertAllDatetimeFields() {
119 datefields
= document
.getElementsByClassName('datetime')
120 for(var i
=0; i
<datefields
.length
; i++
) {
121 dateUTC
= datefields
[i
].getAttribute('data-datetime');
122 datefields
[i
].setAttribute('title', dateUTC +
' (GMT)');
123 datefields
[i
].innerHTML
= dateFromUtcString(dateUTC
).format('YYYY-MM-DD hh:mm (GMT O)');
127 function show_link (reference
, delete_code
, crypt_key
, date
)
130 document
.getElementById('uploading').style
.display
= 'none';
131 document
.getElementById('upload').style
.display
= 'none';
132 document
.getElementById('upload_finished').style
.display
= '';
133 document
.title
= "100% - <?php echo empty($cfg['title']) ? 'Jirafeau' : $cfg['title']; ?>";
136 var download_link_href
= 'f.php?h=' + reference
;
137 if (crypt_key
.length
> 0)
139 download_link_href +
= '&k=' + crypt_key
;
141 if (!!document
.getElementById('upload_finished_download_page'))
143 document
.getElementById('upload_link').href
= download_link_href
;
144 document
.getElementById('upload_link_text').innerHTML
= web_root + download_link_href
;
148 var filename
= document
.getElementById('file_select').files
[0].name
;
149 var b
= encodeURIComponent("<?php echo t("DL
"); ?> \"" + filename +
"\":") +
"%0D" +
"%0A";
150 b +
= encodeURIComponent(web_root + download_link_href
) +
"%0D" +
"%0A";
151 if (false == isEmpty(date
))
153 b +
= "%0D" +
"%0A" +
encodeURIComponent("<?php echo t("VALID_UNTIL
"); ?>: " + date
.format('YYYY-MM-DD hh:mm (GMT O)')) +
"%0D" +
"%0A";
154 document
.getElementById('upload_link_email').href
= "mailto:?body=" + b +
"&subject=" +
encodeURIComponent(filename
);
158 var delete_link_href
= 'f.php?h=' + reference +
'&d=' + delete_code
;
159 document
.getElementById('delete_link').href
= delete_link_href
;
160 document
.getElementById('delete_link_text').innerHTML
= web_root + delete_link_href
;
165 document
.getElementById('date').style
.display
= 'none';
168 document
.getElementById('date').innerHTML
= '<span class="datetime" title="'
169 +
dateToUtcString(date
) +
' (GMT)">'
170 + date
.format('YYYY-MM-DD hh:mm (GMT O)')
172 document
.getElementById('date').style
.display
= '';
175 // Preview link (if allowed)
176 if (!!document
.getElementById('preview_link'))
178 document
.getElementById('upload_finished_preview').style
.display
= 'none';
179 var preview_link_href
= 'f.php?h=' + reference +
'&p=1';
180 if (crypt_key
.length
> 0)
182 preview_link_href +
= '&k=' + crypt_key
;
185 // Test if content can be previewed
186 type
= document
.getElementById('file_select').files
[0].type
;
187 if ((type
.startsWith('image/')
188 || type
.startsWith('audio')
189 || type
.startsWith('text/plain')
190 || type
.startsWith('video/'))
191 && !type
.includes('image/svg+xml'))
193 document
.getElementById('preview_link').href
= preview_link_href
;
194 document
.getElementById('preview_link_text').innerHTML
= web_root + preview_link_href
;
195 document
.getElementById('upload_finished_preview').style
.display
= '';
199 // Direct download link
200 var direct_download_link_href
= 'f.php?h=' + reference +
'&d=1';
201 if (crypt_key
.length
> 0)
203 direct_download_link_href +
= '&k=' + crypt_key
;
205 document
.getElementById('direct_link').href
= direct_download_link_href
;
206 document
.getElementById('direct_link_text').innerHTML
= web_root + direct_download_link_href
;
208 // Hide preview and direct download link if password is set
209 if (document
.getElementById('input_key').value
.length
> 0)
211 if (!!document
.getElementById('preview_link'))
212 document
.getElementById('upload_finished_preview').style
.display
= 'none';
213 document
.getElementById('upload_direct_download').style
.display
= 'none';
217 function show_upload_progression (percentage
, speed
, time_left
)
219 document
.getElementById('uploaded_percentage').innerHTML
= percentage
;
220 document
.getElementById('uploaded_speed').innerHTML
= speed
;
221 document
.getElementById('uploaded_time').innerHTML
= time_left
;
222 document
.title
= percentage +
" - <?php echo empty($cfg['title']) ? 'Jirafeau' : $cfg['title']; ?>";
225 function hide_upload_progression ()
227 document
.getElementById('uploaded_percentage').style
.display
= 'none';
228 document
.getElementById('uploaded_speed').style
.display
= 'none';
229 document
.getElementById('uploaded_time').style
.display
= 'none';
230 document
.title
= "<?php echo empty($cfg['title']) ? 'Jirafeau' : $cfg['title']; ?>";
233 function upload_progress (e
)
235 if (e
== undefined || e
== null ||
!e
.lengthComputable
)
238 // Init time estimation if needed
239 if (upload_time_estimation_total_size
== 0)
240 upload_time_estimation_total_size
= e
.total
;
242 // Compute percentage
243 var p
= Math
.round (e
.loaded
* 100 / e
.total
);
246 p_str
= p
.toString() +
'%';
247 // Update estimation speed
248 upload_time_estimation_add(e
.loaded
);
250 var speed_str
= upload_time_estimation_speed_string();
251 speed_str
= upload_speed_refresh_limiter(speed_str
);
253 var time_str
= chrono_update(upload_time_estimation_time());
255 show_upload_progression (p_str
, speed_str
, time_str
);
258 function control_selected_file_size(max_size
, error_str
)
260 f_size
= document
.getElementById('file_select').files
[0].size
;
261 if (max_size
> 0 && f_size
> max_size
* 1024 * 1024)
263 pop_failure(error_str
);
264 document
.getElementById('send').style
.display
= 'none';
268 // add class to restyle upload form in next step
269 document
.getElementById('upload').setAttribute('class', 'file-selected');
271 document
.getElementById('options').style
.display
= 'block';
272 document
.getElementById('send').style
.display
= 'block';
273 document
.getElementById('error_pop').style
.display
= 'none';
274 document
.getElementById('send').focus();
278 function XHRErrorHandler(e
)
280 var text
= "${e.type}: ${e.loaded} bytes transferred"
284 function pop_failure (e
)
286 var text
= "<p>An error occured";
287 if (typeof e
!== 'undefined')
290 document
.getElementById('error_pop').innerHTML
= e
;
292 document
.getElementById('uploading').style
.display
= 'none';
293 document
.getElementById('error_pop').style
.display
= '';
294 document
.getElementById('upload').style
.display
= '';
295 document
.getElementById('send').style
.display
= '';
298 function add_time_string_to_date(d
, time
)
300 if(typeof(d
) != 'object' ||
!(d
instanceof Date
))
305 if (time
== 'minute')
307 d
.setSeconds (d
.getSeconds() +
60);
312 d
.setSeconds (d
.getSeconds() +
3600);
317 d
.setSeconds (d
.getSeconds() +
86400);
322 d
.setSeconds (d
.getSeconds() +
604800);
325 if (time
== 'fortnight')
327 d
.setSeconds (d
.getSeconds() +
1209600);
332 d
.setSeconds (d
.getSeconds() +
2592000);
335 if (time
== 'quarter')
337 d
.setSeconds (d
.getSeconds() +
7776000);
342 d
.setSeconds (d
.getSeconds() +
31536000);
348 function classic_upload (file
, time
, password
, one_time
)
350 // Delay time estimation init as we can't have file size
351 upload_time_estimation_init(0);
353 var req
= new XMLHttpRequest ();
354 req
.upload
.addEventListener ("progress", upload_progress
, false);
355 req
.addEventListener ("error", XHRErrorHandler
, false);
356 req
.addEventListener ("abort", XHRErrorHandler
, false);
357 req
.onreadystatechange
= function ()
359 if (req
.readyState
== 4 && req
.status
== 200)
361 var res
= req
.responseText
;
363 // if response starts with "Error" then show a failure
364 if (/^Error
/.test(res
))
370 res
= res
.split ("\n");
374 // convert time (local time + selected expiry date)
375 var localDatetime
= new Date();
376 if(!add_time_string_to_date(localDatetime
, time
))
378 pop_failure ('Error: Date can not be parsed');
381 expiryDate
= localDatetime
;
384 show_link (res
[0], res
[1], res
[2], expiryDate
);
388 pop_failure ("<?php echo t("ERR_OCC
"); ?>");
391 req
.open ("POST", 'script.php' , true);
393 var form
= new FormData();
394 form
.append ("file", file
);
396 form
.append ("time", time
);
398 form
.append ("key", password
);
400 form
.append ("one_time_download", '1');
404 function check_html5_file_api ()
406 return window
.File
&& window
.FileReader
&& window
.FileList
&& window
.Blob
;
409 var async_global_transfered
= 0;
410 var async_global_file
;
411 var async_global_ref
= '';
412 var async_global_max_size
= 0;
413 var async_global_time
;
414 var async_global_transfering
= 0;
415 var async_global_last_code
;
417 function async_upload_start (max_size
, file
, time
, password
, one_time
)
419 async_global_transfered
= 0;
420 async_global_file
= file
;
421 async_global_max_size
= max_size
;
422 async_global_time
= time
;
424 var req
= new XMLHttpRequest ();
425 req
.addEventListener ("error", XHRErrorHandler
, false);
426 req
.addEventListener ("abort", XHRErrorHandler
, false);
427 req
.onreadystatechange
= function ()
429 if (req
.readyState
== 4 && req
.status
== 200)
431 var res
= req
.responseText
;
433 if (/^Error
/.test(res
))
439 res
= res
.split ("\n");
440 async_global_ref
= res
[0];
442 async_upload_push (code
);
445 req
.open ("POST", 'script.php?init_async' , true);
447 var form
= new FormData();
448 form
.append ("filename", async_global_file
.name
);
449 form
.append ("type", async_global_file
.type
);
451 form
.append ("time", time
);
453 form
.append ("key", password
);
455 form
.append ("one_time_download", '1');
457 // Start time estimation
458 upload_time_estimation_init(async_global_file
.size
);
463 function async_upload_progress (e
)
465 if (e
== undefined || e
== null ||
!e
.lengthComputable
&& async_global_file
.size
!= 0)
468 // Compute percentage
469 var p
= Math
.round ((e
.loaded + async_global_transfered
) * 100 / (async_global_file
.size
));
472 p_str
= p
.toString() +
'%';
473 // Update estimation speed
474 upload_time_estimation_add(e
.loaded + async_global_transfered
);
476 var speed_str
= upload_time_estimation_speed_string();
477 speed_str
= upload_speed_refresh_limiter(speed_str
);
479 var time_str
= chrono_update(upload_time_estimation_time());
481 show_upload_progression (p_str
, speed_str
, time_str
);
484 function async_upload_push (code
)
486 async_global_last_code
= code
;
487 if (async_global_transfered
== async_global_file
.size
)
489 hide_upload_progression ();
490 async_upload_end (code
);
493 var req
= new XMLHttpRequest ();
494 req
.upload
.addEventListener ("progress", async_upload_progress
, false);
495 req
.addEventListener ("error", XHRErrorHandler
, false);
496 req
.addEventListener ("abort", XHRErrorHandler
, false);
497 req
.onreadystatechange
= function ()
499 if (req
.readyState
== 4)
501 if (req
.status
== 200)
503 var res
= req
.responseText
;
505 // This error may be triggered when Jirafeau does not receive any file in POST.
506 // This may be due to bad php configuration where post_max_size is too low
507 // comparing to upload_max_filesize. Let's retry with lower file size.
508 if (res
=== "Error 23")
510 async_global_max_size
= Math
.max(1, async_global_max_size
- 500);
511 async_upload_push (async_global_last_code
);
514 else if (/^Error
/.test(res
))
520 res
= res
.split ("\n");
522 async_global_transfered
= async_global_transfering
;
523 async_upload_push (code
);
528 // lower async_global_max_size and retry
529 // This can occurs in several cases:
530 // - Request Entity Too Large (413) due to server bad configuration relative to PHP configuration
531 // - Server Error (500) which can happen when PHP's `max_execution_time` is too low comparared to sent size
532 async_global_max_size
= Math
.max(1, parseInt (async_global_max_size
* 0.5));
533 async_upload_push (async_global_last_code
);
538 req
.open ("POST", 'script.php?push_async' , true);
540 var start
= async_global_transfered
;
541 var end
= start + async_global_max_size
;
542 if (end
>= async_global_file
.size
)
543 end
= async_global_file
.size
;
544 var blob
= async_global_file
.slice (start
, end
);
545 async_global_transfering
= end
;
547 var form
= new FormData();
548 form
.append ("ref", async_global_ref
);
549 form
.append ("data", blob
);
550 form
.append ("code", code
);
554 function async_upload_end (code
)
556 var req
= new XMLHttpRequest ();
557 req
.addEventListener ("error", XHRErrorHandler
, false);
558 req
.addEventListener ("abort", XHRErrorHandler
, false);
559 req
.onreadystatechange
= function ()
561 if (req
.readyState
== 4 && req
.status
== 200)
563 var res
= req
.responseText
;
565 if (/^Error
/.test(res
))
571 res
= res
.split ("\n");
573 if (async_global_time
!= 'none')
575 // convert time (local time + selected expiry date)
576 var localDatetime
= new Date();
577 if(!add_time_string_to_date(localDatetime
, async_global_time
)) {
578 pop_failure ('Error: Date can not be parsed');
581 expiryDate
= localDatetime
;
584 show_link (res
[0], res
[1], res
[2], expiryDate
);
587 req
.open ("POST", 'script.php?end_async' , true);
589 var form
= new FormData();
590 form
.append ("ref", async_global_ref
);
591 form
.append ("code", code
);
595 function upload (max_chunk_size
)
597 var one_time_checkbox
= document
.getElementById('one_time_download');
598 var one_time
= one_time_checkbox
!== null ? one_time_checkbox
.checked
: false;
599 if (check_html5_file_api ())
603 document
.getElementById('file_select').files
[0],
604 document
.getElementById('select_time').value
,
605 document
.getElementById('input_key').value
,
612 document
.getElementById('file_select').files
[0],
613 document
.getElementById('select_time').value
,
614 document
.getElementById('input_key').value
,
620 var upload_time_estimation_total_size
= 42;
621 var upload_time_estimation_transfered_size
= 42;
622 var upload_time_estimation_transfered_date
= 42;
623 var upload_time_estimation_moving_average_speed
= 42;
625 function upload_time_estimation_init(total_size
)
627 upload_time_estimation_total_size
= total_size
;
628 upload_time_estimation_transfered_size
= 0;
629 upload_time_estimation_moving_average_speed
= 0;
631 upload_time_estimation_transfered_date
= d
.getTime();
634 function upload_time_estimation_add(total_transfered_size
)
636 // Let's compute the current speed
638 var speed
= upload_time_estimation_moving_average_speed
;
639 if (d
.getTime() - upload_time_estimation_transfered_date
!= 0) {
640 speed
= (total_transfered_size
- upload_time_estimation_transfered_size
)
641 / (d
.getTime() - upload_time_estimation_transfered_date
);
642 speed
= Math
.max(0, speed
);
644 // Let's compute moving average speed on 30 values
645 var m
= (upload_time_estimation_moving_average_speed
* 29 + speed
) / 30;
646 // Update global values
647 upload_time_estimation_transfered_size
= total_transfered_size
;
648 upload_time_estimation_transfered_date
= d
.getTime();
649 upload_time_estimation_moving_average_speed
= m
;
652 function upload_time_estimation_speed_string()
655 var s
= upload_time_estimation_moving_average_speed
* 1000;
663 else if (s
< 1000000)
665 res
= Math
.floor(s
/100) / 10;
670 res
= Math
.floor(s
/100000) / 10;
675 return res
.toString() +
' ' + scale
;
678 function milliseconds_to_time_string (milliseconds
)
680 function numberEnding (number
) {
681 return (number
> 1) ?
translate ('PLURAL_ENDING') : '';
684 var temp
= Math
.floor(milliseconds
/ 1000);
685 var years
= Math
.floor(temp
/ 31536000);
687 return years +
' ' +
translate ('YEAR') +
numberEnding(years
);
689 var days
= Math
.floor((temp %
= 31536000) / 86400);
691 return days +
' ' +
translate ('DAY') +
numberEnding(days
);
693 var hours
= Math
.floor((temp %
= 86400) / 3600);
695 return hours +
' ' +
translate ('HOUR') +
numberEnding(hours
);
697 var minutes
= Math
.floor((temp %
= 3600) / 60);
699 return minutes +
' ' +
translate ('MINUTE') +
numberEnding(minutes
);
701 var seconds
= temp %
60;
703 return seconds +
' ' +
translate ('SECOND') +
numberEnding(seconds
);
705 return translate ('LESS_1_SEC');
708 function upload_time_estimation_time()
710 // Estimate remaining time
711 if (upload_time_estimation_moving_average_speed
<= 0)
713 return (upload_time_estimation_total_size
- upload_time_estimation_transfered_size
)
714 / upload_time_estimation_moving_average_speed
;
717 var chrono_last_update
= 0;
718 var chrono_time_ms
= 0;
719 var chrono_time_ms_last_update
= 0;
720 function chrono_update(time_ms
)
724 // Don't update too often
725 if (d
.getTime() - chrono_last_update
< 3000 &&
726 chrono_time_ms_last_update
> 0)
727 chrono
= chrono_time_ms
;
730 chrono_last_update
= d
.getTime();
731 chrono_time_ms
= time_ms
;
733 chrono_time_ms_last_update
= d
.getTime();
736 // Adjust chrono for smooth estimation
737 chrono
= chrono
- (d
.getTime() - chrono_time_ms_last_update
);
739 // Let's update chronometer
742 time_str
= milliseconds_to_time_string (chrono
);
746 var upload_speed_refresh_limiter_last_update
= 0;
747 var upload_speed_refresh_limiter_last_value
= '';
748 function upload_speed_refresh_limiter(speed_str
)
751 if (d
.getTime() - upload_speed_refresh_limiter_last_update
> 1500)
753 upload_speed_refresh_limiter_last_value
= speed_str
;
754 upload_speed_refresh_limiter_last_update
= d
.getTime();
756 return upload_speed_refresh_limiter_last_value
;
760 document
.addEventListener('DOMContentLoaded', function(event
) {
761 // Search for all datetime fields and convert the time to local timezone
762 convertAllDatetimeFields();
765 // Add copy event listeners
766 function copyLinkToClipboard(link_id
) {
767 var focus
= document
.activeElement
;
768 var e
= document
.getElementById(link_id
);
770 var tmp
= document
.createElement("textarea");
771 document
.body
.appendChild(tmp
);
772 tmp
.textContent
= e
.href
;
774 tmp
.setSelectionRange(0, tmp
.value
.length
);
775 document
.execCommand("copy");
776 document
.body
.removeChild(tmp
);
781 function addCopyListener(button_id
, link_id
) {
782 if(document
.getElementById(button_id
)){
783 document
.getElementById(button_id
)
784 .addEventListener("click", function() {
785 copyLinkToClipboard(link_id
);});
789 function copyTextToClipboard(text_id
){
790 var copyText
= document
.getElementById(text_id
);
792 copyText
.setSelectionRange(0, 99999);
793 navigator
.clipboard
.writeText(copyText
.value
);
796 function addTextCopyListener(button_id
, text_id
) {
797 if(document
.getElementById(button_id
)){
798 document
.getElementById(button_id
)
799 .addEventListener("click", function() {
800 copyTextToClipboard(text_id
);});
804 function set_dark_mode() {
805 let steel_sheet
= "<?php echo 'media/' . $cfg['dark_style'] . '/style.css.php'; ?>";
806 let shortcut_icon
= "<?php echo 'media/' . $cfg['dark_style'] . '/favicon.ico'; ?>";
807 document
.getElementById('stylesheet').href
= steel_sheet
;
808 document
.getElementById('shortcut_icon').href
= steel_sheet
;
811 function set_light_mode() {
812 let steel_sheet
= "<?php echo 'media/' . $cfg['style'] . '/style.css.php'; ?>";
813 let shortcut_icon
= "<?php echo 'media/' . $cfg['style'] . '/favicon.ico'; ?>";
814 document
.getElementById('stylesheet').href
= steel_sheet
;
815 document
.getElementById('shortcut_icon').href
= steel_sheet
;
818 function color_scheme_preferences() {
820 let dark_mode_steel_sheet
= "<?php echo 'media/' . $cfg['dark_style'] . '/style.css.php'; ?>"
821 if (window
.matchMedia
&& window
.matchMedia('(prefers-color-scheme: dark)').matches
) {
827 // When user change its preference
828 window
.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', lightMode
=> {
829 lightMode
.matches ?
set_dark_mode() : set_light_mode();