Add rx_color_scheme cookie for detecting and setting color scheme

classes/context/Context.class.php

@@ -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 */

common/css/rhymix.less

@@ -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;

common/js/common.js

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

common/tpl/common_layout.html

@@ -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">