From: Jerome Jutteau <jerome@jutteau.fr>
Date: Mon, 4 Jul 2022 07:15:53 +0000 (+0200)
Subject: [FEATURE] Support light/dark mode
X-Git-Tag: 4.5.0~19
X-Git-Url: https://git.p6c8.net/jirafeau_project.git/commitdiff_plain/ac13b92b26d4fa871749fa22be8d8f41f5b9641d?ds=inline;hp=48fd211cd255ea9ff05d0556eed4b6033683794a
[FEATURE] Support light/dark mode
A new option `dark_style` is introduced to set which dark theme administrators want to user.
If administrator don"t want to use a dark mode, they can just set `dark_syle` and `style` option to the same value.
closes #305
Signed-off-by: Jerome Jutteau <jerome@jutteau.fr>
---
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d2598a0..1f8488c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,12 +10,14 @@
5. Follow the installation wizard, it should propose you the same data folder or even update automatically
6. Check your `/lib/config.local.php` and compare it with the `/lib/config.original.php` to see if new configuration items are available. If a new item is missing in your `config.local.php`, this may trigger some errors as Jirafeau may expect to have them.
-# version 4.5
+# version 4.5.0
+- Support for dark theme
- Fix side effects of setting too high values in php configuration.
New configuration items:
-- `max_upload_chunk_size_bytes` option
+- `max_upload_chunk_size_bytes` option
+- `dark_tyle` option
# version 4.4.0
diff --git a/lib/config.original.php b/lib/config.original.php
index ffff3ce..96dd6f3 100644
--- a/lib/config.original.php
+++ b/lib/config.original.php
@@ -43,6 +43,7 @@ $cfg['lang'] = 'auto';
/* Select a theme - see media folder for available themes
*/
$cfg['style'] = 'courgette';
+$cfg['dark_style'] = 'dark-courgette';
/* Name the organisation running this installation, eg. 'ACME'
*/
diff --git a/lib/functions.js.php b/lib/functions.js.php
index c1a81d8..1114dfd 100644
--- a/lib/functions.js.php
+++ b/lib/functions.js.php
@@ -789,4 +789,34 @@ function addCopyListener(button_id, link_id) {
copyLinkToClipboard(link_id);});
}
}
+
+function set_dark_mode() {
+ let steel_sheet = "<?php echo 'media/' . $cfg['dark_style'] . '/style.css.php'; ?>";
+ let shortcut_icon = "<?php echo 'media/' . $cfg['dark_style'] . '/favicon.ico'; ?>";
+ document.getElementById('stylesheet').href = steel_sheet;
+ document.getElementById('shortcut_icon').href = steel_sheet;
+}
+
+function set_light_mode() {
+ let steel_sheet = "<?php echo 'media/' . $cfg['style'] . '/style.css.php'; ?>";
+ let shortcut_icon = "<?php echo 'media/' . $cfg['style'] . '/favicon.ico'; ?>";
+ document.getElementById('stylesheet').href = steel_sheet;
+ document.getElementById('shortcut_icon').href = steel_sheet;
+}
+
+function color_scheme_preferences() {
+
+ let dark_mode_steel_sheet = "<?php echo 'media/' . $cfg['dark_style'] . '/style.css.php'; ?>"
+ if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ set_dark_mode();
+ } else {
+ set_light_mode();
+ }
+
+ // When user change its preference
+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', lightMode => {
+ lightMode.matches ? set_dark_mode() : set_light_mode();
+ });
+}
+
// @license-end
diff --git a/lib/template/header.php b/lib/template/header.php
index 55b3379..71b8857 100644
--- a/lib/template/header.php
+++ b/lib/template/header.php
@@ -7,11 +7,12 @@ header('x-ua-compatible: ie=edge');
<head>
<meta charset="utf-8">
<title><?php echo (true === empty($cfg['title']))? t('JI_WEB_RE') : $cfg['title']; ?></title>
- <link rel="shortcut icon" href="<?php echo 'media/' . $cfg['style'] . '/favicon.ico'; ?>">
- <link href="<?php echo 'media/' . $cfg['style'] . '/style.css.php'; ?>" rel="stylesheet" type="text/css" />
+ <link id="shortcut_icon" rel="shortcut icon" href="<?php echo 'media/' . $cfg['style'] . '/favicon.ico'; ?>">
+ <link id="stylesheet" rel="stylesheet" href="<?php echo 'media/' . $cfg['style'] . '/style.css.php'; ?>" type="text/css" />
</head>
<body>
<script type="text/javascript" src="<?php echo 'lib/functions.js.php'; ?>"></script>
+<script type="text/javascript" lang="Javascript">color_scheme_preferences();</script>
<div id="content">
<h1>
<a href="./">