From: Jerome Jutteau 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_mojo42.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 --- 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 = ""; + let shortcut_icon = ""; + document.getElementById('stylesheet').href = steel_sheet; + document.getElementById('shortcut_icon').href = steel_sheet; +} + +function set_light_mode() { + let steel_sheet = ""; + let shortcut_icon = ""; + document.getElementById('stylesheet').href = steel_sheet; + document.getElementById('shortcut_icon').href = steel_sheet; +} + +function color_scheme_preferences() { + + let dark_mode_steel_sheet = "" + 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'); <?php echo (true === empty($cfg['title']))? t('JI_WEB_RE') : $cfg['title']; ?> - - + + +