Add rx_color_scheme cookie for detecting and setting color scheme

This commit is contained in:
Kijin Sung 2020-12-11 20:35:22 +09:00
parent 6d4fe58c2f
commit 9fffc050b4
4 changed files with 57 additions and 0 deletions

View file

@ -2683,6 +2683,41 @@ class Context
{
return self::$_instance->canonical_url;
}
/**
* Get the current color scheme (none, light, dark)
*
* @return string
*/
public static function getColorScheme(): string
{
if (isset($_COOKIE['rx_color_scheme']) && in_array($_COOKIE['rx_color_scheme'], ['light', 'dark']))
{
return strval($_COOKIE['rx_color_scheme']);
}
else
{
return 'none';
}
}
/**
* Set the color scheme (none, light, dark)
*
* @param string $color_scheme
* @return void
*/
public static function setColorScheme(string $color_scheme)
{
if (in_array($color_scheme, ['light', 'dark']))
{
setcookie('rx_color_scheme', $color_scheme, time() + 86400 * 365, \RX_BASEURL, null, !!config('session.use_ssl_cookies'));
}
else
{
setcookie('rx_color_scheme', 'deleted', time() - 86400, \RX_BASEURL, null);
}
}
}
/* End of file Context.class.php */
/* Location: ./classes/context/Context.class.php */

View file

@ -368,6 +368,17 @@ 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

@ -349,6 +349,16 @@ 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';
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 });
} else if (color_scheme_check === 'dark') {
XE.cookie.set('rx_color_scheme', color_scheme_check, { path: window.XE.URI(default_url).pathname(), expires: 365 });
$('#rhymix_color_scheme').hide();
}
/* Editor preview replacement */
$(".editable_preview").addClass("rhymix_content xe_content").attr("tabindex", 0);
$(".editable_preview").on("click", function() {

View file

@ -74,6 +74,7 @@
<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">