Added automated dark / follow system settings mode

api/classes/organizr.class.php

@@ -862,6 +862,32 @@ public function setTheme($theme = null, $rootPath = '')
 		$theme = $theme ?? $this->config['theme'];
 		return '<link id="theme" href="' . $rootPath . 'css/themes/' . $theme . '.css?v=' . $this->fileHash . '" rel="stylesheet">';
 	}
+
+	public function setScheme()
+	{
+		return '
+			<script src="https://cdn.jsdelivr.net/npm/js-cookie/dist/js.cookie.min.js"></script>
+			<script>
+			// code to set the `color_scheme` cookie
+			let $color_scheme = Cookies.get("color_scheme"), $auto_dark_mode = ' . (($this->config['autoDarkMode']) ? 'true' : 'false') . ';
+			function get_color_scheme() {
+			  return (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+			}
+			function update_color_scheme(override) {
+			  if (typeof override == "undefined") override = "";
+			  Cookies.set("color_scheme", get_color_scheme());
+			  if ($auto_dark_mode) changeStyle(get_color_scheme());
+			  if (override != "") changeStyle(override);
+			}
+			// read & compare cookie `color-scheme`
+			if ((typeof $color_scheme === "undefined") || (get_color_scheme() != $color_scheme))
+			  update_color_scheme();
+			// detect changes and change the cookie
+			if (window.matchMedia)
+			  window.matchMedia("(prefers-color-scheme: dark)").addListener( update_color_scheme );
+			</script>
+		';
+	}
 
 	public function pluginFiles($type, $settings = false, $rootPath = '')
 	{
@@ -1807,7 +1833,9 @@ public function getCustomizeAppearance()
 				$this->settingsOption('color', 'buttonColor', ['label' => 'Button Color']),
 				$this->settingsOption('color', 'buttonTextColor', ['label' => 'Button Text Color']),
 				$this->settingsOption('select', 'theme', ['label' => 'Theme', 'class' => 'themeChanger', 'options' => $this->getThemes()]),
-				$this->settingsOption('select', 'style', ['label' => 'Style', 'class' => 'styleChanger', 'options' => [['name' => 'Light', 'value' => 'light'], ['name' => 'Dark', 'value' => 'dark'], ['name' => 'Horizontal', 'value' => 'horizontal']]]),
+				$this->settingsOption('select', 'style', ['label' => 'Style', 'class' => 'styleChanger', 'attr' => $this->config['autoDarkMode'] ? 'disabled' : '','options' => [['name' => 'Light', 'value' => 'light'], ['name' => 'Dark', 'value' => 'dark'], ['name' => 'Horizontal', 'value' => 'horizontal']]]),
+				$this->settingsOption('blank'),
+				$this->settingsOption('switch', 'autoDarkMode', ['label' => 'Automatic Dark Mode','class' => $this->config['autoDarkMode'] ? 'on' : '','help' => 'Follows system settings. Style setting will be ignored.', 'attr' => 'onchange="$(this).toggleClass(\'on\'); if ($(this).hasClass(\'on\')){ $auto_dark_mode = true; update_color_scheme(); $(\'.styleChanger[name=style]\').prop(\'disabled\',true); } else { $auto_dark_mode = false; update_color_scheme(\''.$this->config['style'].'\'); $(\'.styleChanger[name=style]\').prop(\'disabled\',false);}"']),
 			],
 			'Notifications' => [
 				$this->settingsOption('select', 'notificationBackbone', ['label' => 'Type', 'class' => 'notifyChanger', 'options' => $this->notificationTypesOptions()]),
@@ -6739,4 +6767,4 @@ protected function processQueries(array $request, $migration = false)
 		return count($request) > 1 ? $results : $results[$firstKey];
 	}
 
-}
+}

api/config/default.php

@@ -33,6 +33,7 @@
 	'lockScreen' => false,
 	'theme' => 'Organizr',
 	'style' => 'dark',
+	'autoDarkMode' => false,
 	'plexURL' => '',
 	'plexTabURL' => '',
 	'plexToken' => '',

api/v2/routes/root.php

@@ -127,6 +127,7 @@
 	$GLOBALS['api']['response']['data']['branch'] = $Organizr->config['branch'];
 	$GLOBALS['api']['response']['data']['theme'] = $Organizr->config['theme'];
 	$GLOBALS['api']['response']['data']['style'] = $Organizr->config['style'];
+	$GLOBALS['api']['response']['data']['darkmode'] = $Organizr->config['autoDarkMode'];
 	$GLOBALS['api']['response']['data']['version'] = $Organizr->version;
 	$GLOBALS['api']['response']['data']['settings'] = $Organizr->organizrSpecialSettings();
 	$GLOBALS['api']['response']['data']['plugins'] = $Organizr->pluginGlobalList();
@@ -138,4 +139,4 @@
 	return $response
 		->withHeader('Content-Type', 'application/json;charset=UTF-8')
 		->withStatus($GLOBALS['responseCode']);
-});
+});

index.php

@@ -254,7 +254,8 @@ class="fa fa-check text-success"></i>&nbsp;
 echo $Organizr->formKey();
 echo $Organizr->loadCalendarJS();
 echo $Organizr->CBPFWTabs();
+echo $Organizr->setScheme();	
 ?>
 </body>
 
-</html>
+</html>

js/functions.js

@@ -11558,6 +11558,7 @@ function launch(){
 		        appearance:json.data.appearance,
 		        theme:json.data.theme,
 		        style:json.data.style,
+			darkMode:json.data.darkmode,
 		        version:json.data.version
 	        };
 	        // Add element to signal activeInfo Ready
@@ -11570,7 +11571,7 @@ function launch(){
 	        checkMessage();
 	        errorPage();
 	        uriRedirect();
-	        changeStyle(activeInfo.style);
+	        changeStyle((activeInfo.darkMode) ? $color_scheme : activeInfo.style);
 	        changeTheme(activeInfo.theme);
 	        setSSO();
 	        checkToken();