Replace CSS check with window.matchMedia

This commit is contained in:
Kijin Sung 2020-12-13 19:43:11 +09:00
parent bcfb96dda7
commit e3db1b7cd8
3 changed files with 2 additions and 13 deletions

View file

@ -368,17 +368,6 @@ a img {
}
}
/* Color scheme detection */
#rhymix_color_scheme {
display: none;
@media (prefers-color-scheme: dark) {
display: block;
position: absolute;
bottom: 0; right: 0;
width: 1px; height: 1px;
}
}
/* Button (for XE compatibility) */
.btnArea_mixin(@enabled) when (@enabled = true) {
clear: both;

View file

@ -351,7 +351,8 @@ jQuery(function($) {
/* Detect color scheme */
var color_scheme_cookie = XE.cookie.get('rx_color_scheme');
var color_scheme_check = $('#rhymix_color_scheme').is(':visible') ? 'dark' : 'light';
var color_scheme_check = (window.matchMedia && window.matchMedia('(prefers-color-scheme:dark)').matches) ? 'dark' : 'light';
console.log(color_scheme_check);
if (color_scheme_cookie && color_scheme_cookie !== color_scheme_check) {
XE.cookie.set('rx_color_scheme', color_scheme_check, { path: window.XE.URI(default_url).pathname(), expires: 365 });
$('body').addClass('color_scheme_' + color_scheme_check).removeClass('color_scheme_' + (color_scheme_check === 'dark' ? 'light' : 'dark'));

View file

@ -74,7 +74,6 @@
<div id="rhymix_alert"></div>
<div id="rhymix_debug_panel"></div>
<div id="rhymix_debug_button"></div>
<div id="rhymix_color_scheme"></div>
<!-- BODY JS -->
<block loop="Context::getJsFile('body', true) => $key, $js_file">