[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 d2598a01d108b141058941b6fc84d6d97f13af01..1f8488cd495215a4e3d3bb0fecd283ab05f3358e 100644 (file)
--- 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.
 
 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:
 - 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
 
 
 # version 4.4.0
 

diff --git a/lib/config.original.php b/lib/config.original.php
index ffff3ce843161f23534697296ce86320f2243f8f..96dd6f34e964f4a0f3dd0205c2e46f6eb95c7cff 100644 (file)
--- 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';
 /* 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'
  */
 
 /* Name the organisation running this installation, eg. 'ACME'
  */

diff --git a/lib/functions.js.php b/lib/functions.js.php
index c1a81d8045c16bc2ecbb5c2346d3f2188404f676..1114dfd6188d2444e295be047c33c4ac5559772d 100644 (file)
--- a/lib/functions.js.php
+++ b/lib/functions.js.php
@@ -789,4 +789,34 @@ function addCopyListener(button_id, link_id) {
                 copyLinkToClipboard(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
 // @license-end

diff --git a/lib/template/header.php b/lib/template/header.php
index 55b3379ac05fd7fed8aa8c237239575b54cbb26e..71b8857962beea748de406f723703877b2b89fe4 100644 (file)
--- 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>
 <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>
 </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="./">
 <div id="content">
   <h1>
     <a href="./">