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#945 - Dark Mode Reverts to Light Mode After Refresh #948

Open
wants to merge 3 commits into
base: andrew_testing
Choose a base branch
from

Conversation

awais-codes
Copy link
Collaborator

@awais-codes awais-codes commented May 17, 2024

Fix for Issue#945

Copy link

cloudflare-workers-and-pages bot commented May 17, 2024

Deploying packrat with  Cloudflare Pages  Cloudflare Pages

Latest commit: 38b2b33
Status: ✅  Deploy successful!
Preview URL: https://97efdd85.packrat.pages.dev
Branch Preview URL: https://fix-945-fix-theme-persistanc.packrat.pages.dev

View logs

@awais-codes awais-codes changed the title ISSUE#945 - Dark Mode Reverts to Light Mode After Refresh FIX#945 - Dark Mode Reverts to Light Mode After Refresh May 17, 2024
Copy link

github-actions bot commented May 17, 2024

❌ Tests failed for this pull request. 😞

View Test Workflow

@awais-codes awais-codes linked an issue May 17, 2024 that may be closed by this pull request
Copy link

github-actions bot commented May 17, 2024

Android APK build completed!
You can download the APK file from the following link:
https://github.com/andrew-bierman/PackRat/actions/runs/9283183849#artifacts

@JewelTee
Copy link
Collaborator

@awais-codes hi! upon refreshing the page, it flashes the light mode before switching back to dark mode. Please take a look at the screen recording below. Thanks!

Screen.Recording.2024-05-18.at.10.16.01.mov

@awais-codes
Copy link
Collaborator Author

it should be fix with the recent commit. @JewelTee can you check please?

@JewelTee
Copy link
Collaborator

@awais-codes The Issue persists

Screen.Recording.2024-05-18.at.10.16.01.mov

@awais-codes awais-codes force-pushed the fix/945-fix-theme-persistance-on-refresh branch from a06f620 to af07442 Compare May 18, 2024 11:21
@awais-codes
Copy link
Collaborator Author

@JewelTee I was trying to re-use an existing hook "useStorage" in respect of the DRY principle. But that hook does event driven asynchronous updates to localStorage. Now I am utilizing plain localStorage object. it should be fixed now.

Recording is attached.

screen-capture.2.webm

@JewelTee
Copy link
Collaborator

@awais-codes thanks for the update, the issue is now fixed!
@andrew-bierman - this is ready for merging

* Initializes the app theme based on the stored theme preference.
*/
useLayoutEffect(() => {
const themeModePreference = localStorage.getItem('theme') as ThemeMode;
Copy link
Owner

Choose a reason for hiding this comment

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

this needs to run through Async storage to avoid error on native side

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

doing so results in a flashed theme update on the first render.

@awais-codes awais-codes force-pushed the fix/945-fix-theme-persistance-on-refresh branch from af07442 to 38b2b33 Compare May 29, 2024 08:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Dark Mode Reverts to Light Mode After Refresh
3 participants