From feca3d0da6c7e6780a42c6e34b474c7a4268a704 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ng=C3=B4=20Qu=E1=BB=91c=20=C4=90=E1=BA=A1t?=
 <hi@ngoquocdat.dev>
Date: Sat, 28 Sep 2024 19:56:45 +0700
Subject: [PATCH] fix: respect user theme preference (#4033)

---
 framework/core/js/src/common/Application.tsx            | 2 +-
 framework/core/src/Api/Resource/ForumResource.php       | 2 ++
 framework/core/src/Frontend/FrontendServiceProvider.php | 6 +++++-
 3 files changed, 8 insertions(+), 2 deletions(-)

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