extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-08-09 08:25:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

Implement auto color-scheme in order to respect browser's selected prefers-color-scheme

Browse Source
This commit is contained in:
Hadi Nategh
2021-01-26 17:04:37 +01:00
parent 511325570a
commit dad82bf1f1
7 changed files with 67 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
api/js/framework/fw_desktop.js
View File

@ -220,6 +220,31 @@
egw.message(egw.lang('Browser %1 %2 is not recommended. You may experience issues and not working features. Please use the latest version of Chrome, Firefox or Edge. Thank You!', 'IE',''), 'info', 'browser:ie:warning');
}
});
// initiate darkmode
let darkmode = egw.preference('darkmode', 'common');
if (darkmode == '2')
{
let prefes_color_scheme = this._get_prefers_color_scheme();
if (prefes_color_scheme)
{
window.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', event => {
this.toggle_darkmode(document.getElementById('topmenu_info_darkmode'), event.matches?false:true);
});
this.toggle_darkmode(document.getElementById('topmenu_info_darkmode'), prefes_color_scheme == 'light');
}
}
else if (egw.getSessionItem('api', 'darkmode') == '1')
{
this.toggle_darkmode(document.getElementById('topmenu_info_darkmode'), false);
}
else if(egw.getSessionItem('api', 'darkmode') == '0')
{
this.toggle_darkmode(document.getElementById('topmenu_info_darkmode'), true);
}
},
/**
@ -537,14 +562,31 @@
if (app.status) app.status.mergeContent(_data, true);
},
/**
* Get color scheme
* @return {string|null} returns active color scheme mode or null in case browser not supporting it
* @private
*/
_get_prefers_color_scheme: function ()
{
if (window.matchMedia('(prefers-color-scheme: light)').matches)
{
return 'light';
}
if (window.matchMedia('(prefers-color-scheme: dark)').matches)
{
return 'dark'
}
return null;
},
/**
*
* @param node
*/
toggle_darkmode: function(node)
toggle_darkmode: function(node, _state)
{
let state = node.firstElementChild.classList.contains('darkmode_on');
egw.set_preference('common', 'darkmode',state?'0':'1');
let state = (typeof _state != 'undefined') ? _state : node.firstElementChild.classList.contains('darkmode_on');
this._setDarkMode(state?'0':'1');
if (state == 1)
{