diff --git a/framework/core/js/src/common/Application.tsx b/framework/core/js/src/common/Application.tsx
index 60816ad192..f607f06f58 100644
--- a/framework/core/js/src/common/Application.tsx
+++ b/framework/core/js/src/common/Application.tsx
@@ -377,7 +377,7 @@ export default class Application {
   }
 
   private initColorScheme(forumDefault: string | null = null): void {
-    forumDefault ??= document.documentElement.getAttribute('data-theme') ?? 'auto';
+    forumDefault ??= app.forum.attribute('colorScheme') ?? 'auto';
     this.allowUserColorScheme = forumDefault === 'auto';
     const userConfiguredPreference = this.session.user?.preferences()?.colorScheme;
 
diff --git a/framework/core/src/Api/Resource/ForumResource.php b/framework/core/src/Api/Resource/ForumResource.php
index fbc426fd42..a8014ac3bf 100644
--- a/framework/core/src/Api/Resource/ForumResource.php
+++ b/framework/core/src/Api/Resource/ForumResource.php
@@ -101,6 +101,8 @@ public function fields(): array
                 ->get(fn () => $this->settings->get('theme_primary_color')),
             Schema\Str::make('themeSecondaryColor')
                 ->get(fn () => $this->settings->get('theme_secondary_color')),
+            Schema\Str::make('colorScheme')
+                ->get(fn () => $this->settings->get('color_scheme')),
             Schema\Str::make('logoUrl')
                 ->get(fn () => $this->getLogoUrl()),
             Schema\Str::make('faviconUrl')
diff --git a/framework/core/src/Frontend/FrontendServiceProvider.php b/framework/core/src/Frontend/FrontendServiceProvider.php
index e38a7a8cc6..8a447363be 100644
--- a/framework/core/src/Frontend/FrontendServiceProvider.php
+++ b/framework/core/src/Frontend/FrontendServiceProvider.php
@@ -102,7 +102,11 @@ public function register(): void
                     $settings = $container->make(SettingsRepositoryInterface::class);
 
                     // Add document classes/attributes for design use cases.
-                    $document->extraAttributes['data-theme'] = $settings->get('color_scheme');
+                    $document->extraAttributes['data-theme'] = function (ServerRequestInterface $request) use ($settings) {
+                        return $settings->get('color_scheme') === 'auto'
+                            ? RequestUtil::getActor($request)->getPreference('colorScheme')
+                            : $settings->get('color_scheme');
+                    };
                     $document->extraAttributes['data-colored-header'] = $settings->get('theme_colored_header') ? 'true' : 'false';
                     $document->extraAttributes['class'][] = function (ServerRequestInterface $request) {
                         return RequestUtil::getActor($request)->isGuest() ? 'guest-user' : 'logged-in';