extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-08-16 19:41:45 +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

17
api/js/framework/fw_base.js
View File

@ -64,8 +64,17 @@ var fw_base = (function(){ "use strict"; return Class.extend(
// keep track of opened popups
this.popups = [];
// initiate dark mode
this._setDarkMode(egw.preference('darkmode', 'common'));
let darkmode = egw.getSessionItem('api', 'darkmode');
if (darkmode == '0' || darkmode == '1')
{
this._setDarkMode(darkmode);
}
else if (egw.preference('darkmode', 'common') !='2')
{
this._setDarkMode( egw.preference('darkmode', 'common'));
}
},
/**
@ -1304,8 +1313,14 @@ var fw_base = (function(){ "use strict"; return Class.extend(
return _app && _app.appName != _app.internalName;
},
/**
* set darkmode attribute into html tag
* @param string _state '0' means off and '1' means on
* @private
*/
_setDarkMode: function(_state)
{
jQuery('html').attr('data-darkmode', _state);
egw.setSessionItem('api', 'darkmode',_state == '0' ?'0':'1');
}
});}).call(this);

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)
{