Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: respect user theme preference #4033

Merged
merged 3 commits into from
Sep 28, 2024

Conversation

datlechin
Copy link
Contributor

This PR fixes the issue where data-theme defaulted to auto, causing a flash of light mode before switching to dark. It ensures the theme respects the user's preference for a smoother experience.

Fixes #0000

Changes proposed in this pull request:

Reviewers should focus on:

Screenshot

QA

Necessity

  • Has the problem that is being solved here been clearly explained?
  • If applicable, have various options for solving this problem been considered?
  • For core PRs, does this need to be in core, or could it be in an extension?
  • Are we willing to maintain this for years / potentially forever?

Confirmed

  • Frontend changes: tested on a local Flarum installation.
  • Backend changes: tests are green (run composer test).
  • Core developer confirmed locally this works as intended.
  • Tests have been added, or are not appropriate here.

Required changes:

  • Related documentation PR: (Remove if irrelevant)
  • Related core extension PRs: (Remove if irrelevant)

@datlechin datlechin requested a review from a team as a code owner September 28, 2024 09:16
Copy link
Member

@SychO9 SychO9 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR!

The reason auto is used is so that the JavaScript code can determine whether to use the user-preference or user browser color scheme.

If data-theme can no longer be auto it would undo that logic (see the setColorScheme method).

@datlechin
Copy link
Contributor Author

@SychO9 The logic behind auto is still preserved. If color_scheme is set to auto, it falls back to the user's browser preference via RequestUtil::getActor()->getPreference('colorScheme'). This ensures the same functionality while preventing the flash of light mode.

@datlechin
Copy link
Contributor Author

Before:

output2.mp4

After:

output.mp4

Copy link
Member

@SychO9 SychO9 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh sorry, you're absolutely right!

framework/core/src/Api/Resource/ForumResource.php Outdated Show resolved Hide resolved
framework/core/js/src/common/Application.tsx Outdated Show resolved Hide resolved
@datlechin datlechin requested a review from SychO9 September 28, 2024 10:46
@SychO9 SychO9 merged commit feca3d0 into flarum:2.x Sep 28, 2024
17 of 18 checks passed
@datlechin datlechin deleted the fix/dark-mode-user-preference branch September 28, 2024 12:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants