diff --git a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl
index 1c3a5b74f28..d85341947e5 100644
--- a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl
+++ b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl
@@ -22,16 +22,9 @@
 		var COMPILER_TARGET_DEFAULT = {if !VISITOR_USE_TINY_BUILD || $__wcf->user->userID}true{else}false{/if};
 	{/if}
 
-	{if $__wcf->getStyleHandler()->getStyle()->hasDarkMode}
+	{if $__wcf->getStyleHandler()->getColorScheme() === 'system'}
 	{
-		let colorScheme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-		try {
-			const value = localStorage.getItem("wsc_colorScheme");
-			if (value === "light" || value === "dark") {
-				colorScheme = value;
-			}
-		} catch {}
-
+		const colorScheme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 		document.documentElement.dataset.colorScheme = colorScheme;
 	}
 	{/if}
@@ -82,7 +75,7 @@ window.addEventListener('pageshow', function(event) {
 				url: '{link controller="BackgroundQueuePerform"}{/link}',
 				force: {if $forceBackgroundQueuePerform|isset}true{else}false{/if}
 			},
-			colorScheme: '{@$__wcf->getStyleHandler()->getColorScheme()|encodeJS}',
+			dynamicColorScheme: {if $__wcf->getStyleHandler()->getColorScheme() === 'system'}true{else}false{/if},
 			enableUserPopover: {if $__wcf->getSession()->getPermission('user.profile.canViewUserProfile')}true{else}false{/if},
 			executeCronjobs: {if $executeCronjobs}'{link controller="CronjobPerform"}{/link}'{else}undefined{/if},
 			{if ENABLE_SHARE_BUTTONS}
diff --git a/com.woltlab.wcf/templates/pageFooter.tpl b/com.woltlab.wcf/templates/pageFooter.tpl
index 00301f3642b..bdf5b1abed6 100644
--- a/com.woltlab.wcf/templates/pageFooter.tpl
+++ b/com.woltlab.wcf/templates/pageFooter.tpl
@@ -24,28 +24,14 @@
 		{assign var=__showStyleChanger value=false}
 	{/if}
 
-	{if $__boxesFooter|count || !$boxesFooter|empty || $__showStyleChanger || $__wcf->getStyleHandler()->showColorSchemeSelector()}
+	{if $__boxesFooter|count || !$boxesFooter|empty || $__showStyleChanger}
 		<div class="boxesFooter">
-			<div class="layoutBoundary{if $__showStyleChanger || $__wcf->getStyleHandler()->showColorSchemeSelector()} clearfix{/if}">
-				{hascontent}
+			<div class="layoutBoundary{if $__showStyleChanger} clearfix{/if}">
+				{if $__showStyleChanger}
 					<div class="styleChanger jsOnly">
-						{content}
-							{if $__showStyleChanger}
-								<button type="button" class="jsButtonStyleChanger">{lang}wcf.style.changeStyle{/lang}</button>
-							{/if}
-							{if $__wcf->getStyleHandler()->showColorSchemeSelector()}
-								<button type="button" class="page__colorScheme jsButtonStyleColorScheme jsTooltip" title="{lang}wcf.style.setColorScheme{/lang}">
-									<span class="page__colorScheme--dark">
-										{icon name='moon' type='solid'}
-									</span>
-									<span class="page__colorScheme--light">
-										{icon name='sun' type='solid'}
-									</span>
-								</button>
-							{/if}
-						{/content}
+						<button type="button" class="jsButtonStyleChanger">{lang}wcf.style.changeStyle{/lang}</button>
 					</div>
-				{/hascontent}
+				{/if}
 				{hascontent}
 					<div class="boxContainer">
 						{content}
diff --git a/com.woltlab.wcf/templates/settings.tpl b/com.woltlab.wcf/templates/settings.tpl
index 481070105f0..f0d0f64b200 100644
--- a/com.woltlab.wcf/templates/settings.tpl
+++ b/com.woltlab.wcf/templates/settings.tpl
@@ -64,10 +64,10 @@
 			</section>
 		{/if}
 		
-		{if $availableStyles|count > 1}
-			<section class="section" id="section_style">
-				<h2 class="sectionTitle">{lang}wcf.user.styles{/lang}</h2>
+		<section class="section" id="section_style">
+			<h2 class="sectionTitle">{lang}wcf.user.styles{/lang}</h2>
 				
+			{if $availableStyles|count > 1}
 				<dl>
 					<dt><label for="styleID">{lang}wcf.user.style{/lang}</label></dt>
 					<dd>
@@ -80,10 +80,22 @@
 						<small>{lang}wcf.user.style.description{/lang}</small>
 					</dd>
 				</dl>
-				
-				{event name='styleFields'}
-			</section>
-		{/if}
+			{/if}
+			
+			<dl>
+				<dt><label for="colorScheme">{lang}wcf.user.style.colorScheme{/lang}</label></dt>
+				<dd>
+					<select id="colorScheme" name="colorScheme">
+						<option value="system"{if $colorScheme === 'system'} selected{/if}>{lang}wcf.style.setColorScheme.system{/lang}</option>
+						<option value="light"{if $colorScheme === 'light'} selected{/if}>{lang}wcf.style.setColorScheme.light{/lang}</option>
+						<option value="dark"{if $colorScheme === 'dark'} selected{/if}>{lang}wcf.style.setColorScheme.dark{/lang}</option>
+					</select>
+					<small>{lang}wcf.user.style.colorScheme.description{/lang}</small>
+				</dd>
+			</dl>
+			
+			{event name='styleFields'}
+		</section>
 		
 		{if MODULE_TROPHY && $__wcf->getSession()->getPermission('user.profile.trophy.maxUserSpecialTrophies') > 0 && $availableTrophies|count}
 			<section class="section" id="section_trophy">
diff --git a/com.woltlab.wcf/userOption.xml b/com.woltlab.wcf/userOption.xml
index 549330a9b67..8afa12b4aa2 100644
--- a/com.woltlab.wcf/userOption.xml
+++ b/com.woltlab.wcf/userOption.xml
@@ -156,6 +156,14 @@
 				<optiontype>boolean</optiontype>
 				<defaultvalue>1</defaultvalue>
 			</option>
+			<option name="colorScheme">
+				<categoryname>hidden</categoryname>
+				<optiontype>select</optiontype>
+				<selectoptions>system:wcf.style.setColorScheme.system
+light:wcf.style.setColorScheme.light
+dark:wcf.style.setColorScheme.dark</selectoptions>
+				<defaultvalue>system</defaultvalue>
+			</option>
 			<option name="timezone">
 				<categoryname>settings.general.date</categoryname>
 				<optiontype>timezone</optiontype>
diff --git a/ts/WoltLabSuite/Core/Acp/Bootstrap.ts b/ts/WoltLabSuite/Core/Acp/Bootstrap.ts
index 2437dfab244..9eaa9540a66 100644
--- a/ts/WoltLabSuite/Core/Acp/Bootstrap.ts
+++ b/ts/WoltLabSuite/Core/Acp/Bootstrap.ts
@@ -24,7 +24,6 @@ export function setup(options: AcpBootstrapOptions): void {
   options = Core.extend(
     {
       bootstrap: {
-        colorScheme: "system",
         enableMobileMenu: true,
         pageMenuMainProvider: new AcpUiPageMenuMainBackend(),
       },
diff --git a/ts/WoltLabSuite/Core/Bootstrap.ts b/ts/WoltLabSuite/Core/Bootstrap.ts
index fde7b576e67..c290f507d79 100644
--- a/ts/WoltLabSuite/Core/Bootstrap.ts
+++ b/ts/WoltLabSuite/Core/Bootstrap.ts
@@ -33,8 +33,6 @@ import { PageMenuMainProvider } from "./Ui/Page/Menu/Main/Provider";
 import { whenFirstSeen } from "./LazyLoader";
 import { adoptPageOverlayContainer } from "./Helper/PageOverlay";
 
-import type { ColorScheme } from "./Controller/Style/ColorScheme";
-
 // perfectScrollbar does not need to be bound anywhere, it just has to be loaded for WCF.js
 import "perfect-scrollbar";
 
@@ -52,7 +50,7 @@ window.WCF.Language.addObject = Language.addObject;
 window.__wcf_bc_eventHandler = EventHandler;
 
 export interface BoostrapOptions {
-  colorScheme: ColorScheme;
+  dynamicColorScheme: boolean;
   enableMobileMenu: boolean;
   pageMenuMainProvider: PageMenuMainProvider;
 }
@@ -150,8 +148,10 @@ export function setup(options: BoostrapOptions): void {
 
   DomChangeListener.add("WoltLabSuite/Core/Bootstrap", () => initA11y);
 
-  if (options.colorScheme === "system") {
-    void import("./Controller/Style/ColorScheme").then(({ setup }) => setup());
+  if (options.dynamicColorScheme) {
+    void import("./Controller/Style/ColorScheme").then(({ setup }) => {
+      setup();
+    });
   }
 
   whenFirstSeen("[data-report-content]", () => {
diff --git a/ts/WoltLabSuite/Core/BootstrapFrontend.ts b/ts/WoltLabSuite/Core/BootstrapFrontend.ts
index 1969599d9c2..2ed6d376dfd 100644
--- a/ts/WoltLabSuite/Core/BootstrapFrontend.ts
+++ b/ts/WoltLabSuite/Core/BootstrapFrontend.ts
@@ -20,14 +20,12 @@ import UiPageMenuMainFrontend from "./Ui/Page/Menu/Main/Frontend";
 import { whenFirstSeen } from "./LazyLoader";
 import { prepareRequest } from "./Ajax/Backend";
 
-import type { ColorScheme } from "./Controller/Style/ColorScheme";
-
 interface BootstrapOptions {
   backgroundQueue: {
     url: string;
     force: boolean;
   };
-  colorScheme: ColorScheme;
+  dynamicColorScheme: boolean;
   enableUserPopover: boolean;
   executeCronjobs: string | undefined;
   shareButtonProviders?: ShareProvider[];
@@ -63,7 +61,7 @@ export function setup(options: BootstrapOptions): void {
   options.backgroundQueue.url = window.WSC_API_URL + options.backgroundQueue.url.substr(window.WCF_PATH.length);
 
   Bootstrap.setup({
-    colorScheme: options.colorScheme,
+    dynamicColorScheme: options.dynamicColorScheme,
     enableMobileMenu: true,
     pageMenuMainProvider: new UiPageMenuMainFrontend(),
   });
diff --git a/ts/WoltLabSuite/Core/Controller/Style/ColorScheme.ts b/ts/WoltLabSuite/Core/Controller/Style/ColorScheme.ts
index 327a72ef8b6..dd3e37cefa0 100644
--- a/ts/WoltLabSuite/Core/Controller/Style/ColorScheme.ts
+++ b/ts/WoltLabSuite/Core/Controller/Style/ColorScheme.ts
@@ -1,5 +1,5 @@
 /**
- * Offer users the ability to enforce a specific color scheme.
+ * Dynamically updates the color scheme to match the system preference.
  *
  * @author Alexander Ebert
  * @copyright 2001-2023 WoltLab GmbH
@@ -7,99 +7,12 @@
  * @since 6.0
  */
 
-import { getPhrase } from "WoltLabSuite/Core/Language";
-import { attach, create } from "../../Ui/Dropdown/Builder";
-import { registerCallback } from "../../Ui/Dropdown/Simple";
-
-export type ColorScheme = "dark" | "light" | "system";
-
-let currentScheme: ColorScheme = "system";
-let mediaQuery: MediaQueryList;
-let themeColor: HTMLMetaElement;
-
-function setScheme(scheme: ColorScheme): void {
-  currentScheme = scheme;
-
-  if (currentScheme === "light" || currentScheme === "dark") {
-    document.documentElement.dataset.colorScheme = currentScheme;
-    updateThemeColor();
-  } else {
-    applySystemScheme();
-  }
-
-  try {
-    localStorage.setItem("wsc_colorScheme", currentScheme);
-  } catch {
-    /* Ignore any errors when accessing the `localStorage`. */
-  }
-}
-
-function applySystemScheme(): void {
-  if (currentScheme === "system") {
-    document.documentElement.dataset.colorScheme = mediaQuery.matches ? "dark" : "light";
-    updateThemeColor();
-  }
-}
-
-function updateThemeColor(): void {
-  themeColor.content = window.getComputedStyle(document.body).getPropertyValue("--wcfPageThemeColor");
-}
-
-function initializeButton(button: HTMLElement): void {
-  const dropdownMenu = create([
-    {
-      identifier: "light",
-      label: getPhrase("wcf.style.setColorScheme.light"),
-      callback() {
-        setScheme("light");
-      },
-    },
-    {
-      identifier: "dark",
-      label: getPhrase("wcf.style.setColorScheme.dark"),
-      callback() {
-        setScheme("dark");
-      },
-    },
-    "divider",
-    {
-      identifier: "system",
-      label: getPhrase("wcf.style.setColorScheme.system"),
-      callback() {
-        setScheme("system");
-      },
-    },
-  ]);
-
-  attach(dropdownMenu, button);
-
-  registerCallback(button.id, (_containerId, action) => {
-    if (action === "open") {
-      dropdownMenu.querySelectorAll(".active").forEach((element) => element.classList.remove("active"));
-      dropdownMenu.querySelector(`[data-identifier="${currentScheme}"]`)!.classList.add("active");
-    }
-  });
-}
-
 export function setup(): void {
-  const button = document.querySelector<HTMLElement>(".jsButtonStyleColorScheme");
-  if (button) {
-    initializeButton(button);
-  }
-
-  try {
-    const value = localStorage.getItem("wsc_colorScheme");
-    if (value === "light" || value === "dark") {
-      currentScheme = value;
-    }
-  } catch {
-    /* Ignore any errors when accessing the `localStorage`. */
-  }
-
-  themeColor = document.querySelector('meta[name="theme-color"]')!;
+  const themeColor = document.querySelector<HTMLMetaElement>('meta[name="theme-color"]')!;
+  themeColor.content = window.getComputedStyle(document.body).getPropertyValue("--wcfPageThemeColor");
 
-  mediaQuery = matchMedia("(prefers-color-scheme: dark)");
-  mediaQuery.addEventListener("change", () => {
-    applySystemScheme();
+  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
+    document.documentElement.dataset.colorScheme = event.matches ? "dark" : "light";
+    themeColor.content = window.getComputedStyle(document.body).getPropertyValue("--wcfPageThemeColor");
   });
 }
diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 5f2b21a1618..ece8e46a6f9 100644
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -2,7 +2,7 @@
 <html
 	dir="{@$__wcf->getLanguage()->getPageDirection()}"
 	lang="{$__wcf->getLanguage()->getBcp47()}"
-	data-color-scheme="system"
+	data-color-scheme="{$__wcf->getStyleHandler()->getColorScheme()}"
 >
 <head>
 	<meta charset="utf-8">
@@ -50,17 +50,12 @@
 		{* Unlike the frontend, this option must be defined in the ACP at all times. *}
 		var COMPILER_TARGET_DEFAULT = true;
 
+		{if $__wcf->getStyleHandler()->getColorScheme() === 'system'}
 		{
-			let colorScheme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-			try {
-				const value = localStorage.getItem("wsc_colorScheme");
-				if (value === "light" || value === "dark") {
-					colorScheme = value;
-				}
-			} catch {}
-
+			const colorScheme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 			document.documentElement.dataset.colorScheme = colorScheme;
 		}
+		{/if}
 	</script>
 
 	<script data-eager="true" src="{$__wcf->getPath()}js/WoltLabSuite/WebComponent.js?v={@LAST_UPDATE_TIME}"></script>
@@ -99,7 +94,8 @@
 			
 			AcpBootstrap.setup({
 				bootstrap: {
-					enableMobileMenu: {if PACKAGE_ID && $__isLogin|empty}true{else}false{/if}
+					dynamicColorScheme: {if $__wcf->getStyleHandler()->getColorScheme() === 'system'}true{else}false{/if},
+					enableMobileMenu: {if PACKAGE_ID && $__isLogin|empty}true{else}false{/if},
 				}
 			});
 		});
diff --git a/wcfsetup/install/files/acp/templates/pageHeaderUser.tpl b/wcfsetup/install/files/acp/templates/pageHeaderUser.tpl
index 4163fe39ac4..742cd6410b0 100644
--- a/wcfsetup/install/files/acp/templates/pageHeaderUser.tpl
+++ b/wcfsetup/install/files/acp/templates/pageHeaderUser.tpl
@@ -41,22 +41,6 @@
 					<li><a class="externalURL" href="https://www.woltlab.com/pluginstore/"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank" rel="noopener"{/if}>{lang}wcf.acp.index.woltlab.pluginStore{/lang}</a></li>
 				</ul>
 			</li>
-
-			<li>
-				<a
-					href="#"
-					role="button"
-					class="page__colorScheme jsButtonStyleColorScheme jsTooltip"
-					title="{lang}wcf.style.setColorScheme{/lang}"
-				>
-					<span class="iconWrapper page__colorScheme--dark">
-						{icon size=16 name='moon' type='solid'}
-					</span>
-					<span class="iconWrapper page__colorScheme--light">
-						{icon size=16 name='sun' type='solid'}
-					</span>
-				</a>
-			</li>
 		{/if}
 		
 		{event name='menuItems'}
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Bootstrap.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Bootstrap.js
index bafdc3a250c..828a9409ddd 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Bootstrap.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Bootstrap.js
@@ -20,7 +20,6 @@ define(["require", "exports", "tslib", "../Core", "../Bootstrap", "./Ui/Page/Men
     function setup(options) {
         options = Core.extend({
             bootstrap: {
-                colorScheme: "system",
                 enableMobileMenu: true,
                 pageMenuMainProvider: new Backend_1.default(),
             },
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js
index 80f608319c7..b7cd0cb6281 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js
@@ -116,8 +116,10 @@ define(["require", "exports", "tslib", "./Core", "./Date/Picker", "./Devtools",
         });
         initA11y();
         Listener_1.default.add("WoltLabSuite/Core/Bootstrap", () => initA11y);
-        if (options.colorScheme === "system") {
-            void new Promise((resolve_1, reject_1) => { require(["./Controller/Style/ColorScheme"], resolve_1, reject_1); }).then(tslib_1.__importStar).then(({ setup }) => setup());
+        if (options.dynamicColorScheme) {
+            void new Promise((resolve_1, reject_1) => { require(["./Controller/Style/ColorScheme"], resolve_1, reject_1); }).then(tslib_1.__importStar).then(({ setup }) => {
+                setup();
+            });
         }
         (0, LazyLoader_1.whenFirstSeen)("[data-report-content]", () => {
             void new Promise((resolve_2, reject_2) => { require(["./Ui/Moderation/Report"], resolve_2, reject_2); }).then(tslib_1.__importStar).then(({ setup }) => setup());
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js b/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js
index f61197b3097..8ae7bbcc04b 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js
@@ -43,7 +43,7 @@ define(["require", "exports", "tslib", "./BackgroundQueue", "./Bootstrap", "./Co
         // Modify the URL of the background queue URL to always target the current domain to avoid CORS.
         options.backgroundQueue.url = window.WSC_API_URL + options.backgroundQueue.url.substr(window.WCF_PATH.length);
         Bootstrap.setup({
-            colorScheme: options.colorScheme,
+            dynamicColorScheme: options.dynamicColorScheme,
             enableMobileMenu: true,
             pageMenuMainProvider: new Frontend_1.default(),
         });
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Style/ColorScheme.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Style/ColorScheme.js
index 69fc4906ee7..416486bb50d 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Style/ColorScheme.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Style/ColorScheme.js
@@ -1,94 +1,21 @@
 /**
- * Offer users the ability to enforce a specific color scheme.
+ * Dynamically updates the color scheme to match the system preference.
  *
  * @author Alexander Ebert
  * @copyright 2001-2023 WoltLab GmbH
  * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @since 6.0
  */
-define(["require", "exports", "WoltLabSuite/Core/Language", "../../Ui/Dropdown/Builder", "../../Ui/Dropdown/Simple"], function (require, exports, Language_1, Builder_1, Simple_1) {
+define(["require", "exports"], function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.setup = void 0;
-    let currentScheme = "system";
-    let mediaQuery;
-    let themeColor;
-    function setScheme(scheme) {
-        currentScheme = scheme;
-        if (currentScheme === "light" || currentScheme === "dark") {
-            document.documentElement.dataset.colorScheme = currentScheme;
-            updateThemeColor();
-        }
-        else {
-            applySystemScheme();
-        }
-        try {
-            localStorage.setItem("wsc_colorScheme", currentScheme);
-        }
-        catch {
-            /* Ignore any errors when accessing the `localStorage`. */
-        }
-    }
-    function applySystemScheme() {
-        if (currentScheme === "system") {
-            document.documentElement.dataset.colorScheme = mediaQuery.matches ? "dark" : "light";
-            updateThemeColor();
-        }
-    }
-    function updateThemeColor() {
-        themeColor.content = window.getComputedStyle(document.body).getPropertyValue("--wcfPageThemeColor");
-    }
-    function initializeButton(button) {
-        const dropdownMenu = (0, Builder_1.create)([
-            {
-                identifier: "light",
-                label: (0, Language_1.getPhrase)("wcf.style.setColorScheme.light"),
-                callback() {
-                    setScheme("light");
-                },
-            },
-            {
-                identifier: "dark",
-                label: (0, Language_1.getPhrase)("wcf.style.setColorScheme.dark"),
-                callback() {
-                    setScheme("dark");
-                },
-            },
-            "divider",
-            {
-                identifier: "system",
-                label: (0, Language_1.getPhrase)("wcf.style.setColorScheme.system"),
-                callback() {
-                    setScheme("system");
-                },
-            },
-        ]);
-        (0, Builder_1.attach)(dropdownMenu, button);
-        (0, Simple_1.registerCallback)(button.id, (_containerId, action) => {
-            if (action === "open") {
-                dropdownMenu.querySelectorAll(".active").forEach((element) => element.classList.remove("active"));
-                dropdownMenu.querySelector(`[data-identifier="${currentScheme}"]`).classList.add("active");
-            }
-        });
-    }
     function setup() {
-        const button = document.querySelector(".jsButtonStyleColorScheme");
-        if (button) {
-            initializeButton(button);
-        }
-        try {
-            const value = localStorage.getItem("wsc_colorScheme");
-            if (value === "light" || value === "dark") {
-                currentScheme = value;
-            }
-        }
-        catch {
-            /* Ignore any errors when accessing the `localStorage`. */
-        }
-        themeColor = document.querySelector('meta[name="theme-color"]');
-        mediaQuery = matchMedia("(prefers-color-scheme: dark)");
-        mediaQuery.addEventListener("change", () => {
-            applySystemScheme();
+        const themeColor = document.querySelector('meta[name="theme-color"]');
+        themeColor.content = window.getComputedStyle(document.body).getPropertyValue("--wcfPageThemeColor");
+        window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
+            document.documentElement.dataset.colorScheme = event.matches ? "dark" : "light";
+            themeColor.content = window.getComputedStyle(document.body).getPropertyValue("--wcfPageThemeColor");
         });
     }
     exports.setup = setup;
diff --git a/wcfsetup/install/files/lib/form/SettingsForm.class.php b/wcfsetup/install/files/lib/form/SettingsForm.class.php
index 9a47ebe70f0..7e08aa2c5ec 100644
--- a/wcfsetup/install/files/lib/form/SettingsForm.class.php
+++ b/wcfsetup/install/files/lib/form/SettingsForm.class.php
@@ -18,6 +18,7 @@
 use wcf\system\option\user\UserOptionHandler;
 use wcf\system\request\LinkHandler;
 use wcf\system\style\StyleHandler;
+use wcf\system\user\command\SetColorScheme;
 use wcf\system\user\storage\UserStorageHandler;
 use wcf\system\WCF;
 use wcf\util\ArrayUtil;
@@ -101,6 +102,8 @@ class SettingsForm extends AbstractForm
      */
     public $specialTrophies = [];
 
+    public string $colorScheme = 'system';
+
     /**
      * @inheritDoc
      */
@@ -161,6 +164,9 @@ public function readFormParameters()
             if (isset($_POST['specialTrophies'])) {
                 $this->specialTrophies = ArrayUtil::toIntegerArray($_POST['specialTrophies']);
             }
+            if (isset($_POST['colorScheme'])) {
+                $this->colorScheme = $_POST['colorScheme'];
+            }
         }
     }
 
@@ -215,6 +221,10 @@ public function validate()
                     throw new UserInputException('specialTrophies', 'invalid');
                 }
             }
+
+            if ($this->colorScheme !== 'light' && $this->colorScheme !== 'dark') {
+                $this->colorScheme = 'system';
+            }
         }
     }
 
@@ -238,6 +248,8 @@ public function readData()
                 $this->specialTrophies = \array_unique(\array_map(static function ($trophy) {
                     return $trophy->trophyID;
                 }, (new UserProfile(WCF::getUser()))->getSpecialTrophies()));
+
+                $this->colorScheme = WCF::getUser()->getUserOption('colorScheme');
             }
         }
     }
@@ -272,6 +284,11 @@ public function save()
                 'trophyIDs' => $this->specialTrophies,
             ]);
             $userProfileAction->executeAction();
+
+            if (WCF::getUser()->getUserOption('colorScheme') !== $this->colorScheme) {
+                $command = new SetColorScheme(WCF::getUser(), $this->colorScheme);
+                $command();
+            }
         }
         $this->saved();
 
@@ -310,6 +327,7 @@ public function assignVariables()
                 'languageID' => $this->languageID,
                 'styleID' => $this->styleID,
                 'specialTrophies' => $this->specialTrophies,
+                'colorScheme' => $this->colorScheme,
             ]);
         }
     }
diff --git a/wcfsetup/install/files/lib/system/event/listener/PreloadPhrasesCollectingListener.class.php b/wcfsetup/install/files/lib/system/event/listener/PreloadPhrasesCollectingListener.class.php
index 62df1ecf15f..6ddd4f95b41 100644
--- a/wcfsetup/install/files/lib/system/event/listener/PreloadPhrasesCollectingListener.class.php
+++ b/wcfsetup/install/files/lib/system/event/listener/PreloadPhrasesCollectingListener.class.php
@@ -144,9 +144,6 @@ public function __invoke(PreloadPhrasesCollecting $event): void
         $event->preload('wcf.reactions.summary.listReactions');
 
         $event->preload('wcf.style.changeStyle');
-        $event->preload('wcf.style.setColorScheme.dark');
-        $event->preload('wcf.style.setColorScheme.light');
-        $event->preload('wcf.style.setColorScheme.system');
 
         $event->preload('wcf.user.activityPoint');
         $event->preload('wcf.user.language');
diff --git a/wcfsetup/install/files/lib/system/style/StyleHandler.class.php b/wcfsetup/install/files/lib/system/style/StyleHandler.class.php
index b4bb8e65f12..c91c17ebdbe 100644
--- a/wcfsetup/install/files/lib/system/style/StyleHandler.class.php
+++ b/wcfsetup/install/files/lib/system/style/StyleHandler.class.php
@@ -292,18 +292,18 @@ public function getDefaultStyle()
     }
 
     /**
-     * The color scheme is 'light' for styles without a dark mode. For styles
-     * with a dark mode, the special value 'system' is used to indicate that
-     * the client is able to negotiate a color scheme.
+     * Returns the preferred color scheme of the user. For guests this value
+     * will always be 'system' to indicate that the device preferences should
+     * be used to negotiate the color scheme.
      *
      * @since 6.0
      */
     public function getColorScheme(): string
     {
-        if ($this->getStyle()->hasDarkMode) {
+        if (!WCF::getUser()->userID) {
             return 'system';
         }
 
-        return 'light';
+        return WCF::getUser()->getUserOption('colorScheme');
     }
 }
diff --git a/wcfsetup/install/files/lib/system/user/command/SetColorScheme.class.php b/wcfsetup/install/files/lib/system/user/command/SetColorScheme.class.php
new file mode 100644
index 00000000000..1e630a4d7c3
--- /dev/null
+++ b/wcfsetup/install/files/lib/system/user/command/SetColorScheme.class.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace wcf\system\user\command;
+
+use wcf\data\user\User;
+use wcf\data\user\UserAction;
+
+/**
+ * Sets the preferred color scheme of a user.
+ *
+ * @author Alexander Ebert
+ * @copyright 2001-2023 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.0
+ */
+final class SetColorScheme
+{
+    private readonly User $user;
+    private readonly string $colorScheme;
+
+    public function __construct(User $user, string $colorScheme)
+    {
+        $this->user = $user;
+        $this->colorScheme = $colorScheme;
+    }
+
+    public function __invoke(): void
+    {
+        $userAction = new UserAction([$this->user], 'update', [
+            'options' => [
+                User::getUserOptionID('colorScheme') => $this->colorScheme,
+            ],
+        ]);
+        $userAction->executeAction();
+    }
+}
diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index 5b51d6567ca..65cd124f961 100644
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -4659,6 +4659,8 @@ Dateianhänge:
 		<item name="wcf.user.style"><![CDATA[Stil]]></item>
 		<item name="wcf.user.styles"><![CDATA[Stile]]></item>
 		<item name="wcf.user.style.description"><![CDATA[Stil der Benutzeroberfläche]]></item>
+		<item name="wcf.user.style.colorScheme"><![CDATA[Bevorzugtes Farbschema]]></item>
+		<item name="wcf.user.style.colorScheme.description"><![CDATA[Die automatische Erkennung wendet das Farbschema basierend auf den Präferenzen Ihres Geräts an. Einige Stile verfügen möglicherweise nicht über angepasste Farbschemata.]]></item>
 		<item name="wcf.user.username.description"><![CDATA[Der Benutzername muss mindestens {REGISTER_USERNAME_MIN_LENGTH} und darf maximal {REGISTER_USERNAME_MAX_LENGTH} Zeichen lang sein.]]></item>
 		<item name="wcf.user.password.description"><![CDATA[Ein sicheres Kennwort sollte mindestens 10 Zeichen lang sein.]]></item>
 		<item name="wcf.user.password.strength"><![CDATA[Kennwortstärke]]></item>
diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index 6f957be019d..9ac15eb8990 100644
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -4664,6 +4664,8 @@ Attachments:
 		<item name="wcf.user.style"><![CDATA[Style]]></item>
 		<item name="wcf.user.styles"><![CDATA[Styles]]></item>
 		<item name="wcf.user.style.description"><![CDATA[Forces a specific style instead of the default one.]]></item>
+		<item name="wcf.user.style.colorScheme"><![CDATA[Preferred Color Scheme]]></item>
+		<item name="wcf.user.style.colorScheme.description"><![CDATA[The automatic detection applies the color scheme based on your device’s preferences. Some styles might not offer a custom color scheme.]]></item>
 		<item name="wcf.user.username.description"><![CDATA[Username must be {REGISTER_USERNAME_MIN_LENGTH} up to {REGISTER_USERNAME_MAX_LENGTH} characters long.]]></item>
 		<item name="wcf.user.password.description"><![CDATA[A secure password should be at least 10 characters long.]]></item>
 		<item name="wcf.user.password.strength"><![CDATA[Password Strength]]></item>