Skip to content

fix: dark mode persistence on Learn page#183

Merged
DianaLease merged 6 commits intoaccordproject:mainfrom
yashsaraswat2004:yashsaraswat/i182/dark-mode-fix
Mar 13, 2025
Merged

fix: dark mode persistence on Learn page#183
DianaLease merged 6 commits intoaccordproject:mainfrom
yashsaraswat2004:yashsaraswat/i182/dark-mode-fix

Conversation

@yashsaraswat2004
Copy link
Contributor

@yashsaraswat2004 yashsaraswat2004 commented Mar 6, 2025

Description

This PR fixes #182 the dark mode persistence issue on the Learn page. The theme now persists across page navigation and reloads.

Changes

  • Replaced hardcoded colors with CSS variables.
  • Saved theme preference in localStorage.
  • Applied the saved theme on page load by setting the data-theme attribute.

Related Issue

Screenshots

Before

![Before](
Screenshot (217)
)

After

![After](
Screenshot (219)
)

Checklist

  • Replaced hardcoded colors with CSS variables.
  • Saved theme preference in localStorage.
  • Applied the saved theme on page load.
  • Tested changes across multiple browsers.
  • Ensured all unit tests pass.

Notes for Reviewers

  • Please verify the dark mode behavior on the Learn page.
  • Ensure the theme persists across page reloads and navigation.

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>
- Add mobile-first responsive navbar
- Preserve help dropdown functionality
- Optimize logo/text hierarchy

Closes #172

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>
Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>
@yashsaraswat2004 yashsaraswat2004 requested a review from a team as a code owner March 6, 2025 13:42
@netlify
Copy link

netlify bot commented Mar 6, 2025

Deploy Preview for ap-template-playground ready!

Name Link
🔨 Latest commit 0132085
🔍 Latest deploy log https://app.netlify.com/sites/ap-template-playground/deploys/67d13d11d4fd630008786df8
😎 Deploy Preview https://deploy-preview-183--ap-template-playground.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@sancheet230
Copy link
Contributor

@yashsaraswat2004 I think you should add classic white boundary design also which is used on home page for consistancy
Screenshot from 2025-03-06 19-14-58

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>
Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>
@yashsaraswat2004
Copy link
Contributor Author

Hey @DianaLease . I've made the requested changes: removed console.log statements and reverted unrelated navbar modifications. Let me know if any further tweaks are needed. Thanks for the review!

@DianaLease
Copy link
Member

Hey @DianaLease . I've made the requested changes: removed console.log statements and reverted unrelated navbar modifications. Let me know if any further tweaks are needed. Thanks for the review!

Thanks! Can you merge the latest main into your branch?

@yashsaraswat2004
Copy link
Contributor Author

I have merged the latest main into my branch. Thanks @DianaLease!"

@DianaLease DianaLease merged commit 01ff8f5 into accordproject:main Mar 13, 2025
7 checks passed
@DianaLease
Copy link
Member

Thanks for the contribution!

teja-pola pushed a commit to teja-pola/template-playground that referenced this pull request Mar 13, 2025
* fix(navbar): implement responsive collapse at 955px

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

* fix(navbar): implement responsive collapse at 955px

- Add mobile-first responsive navbar
- Preserve help dropdown functionality
- Optimize logo/text hierarchy

Closes accordproject#172

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

* fix: dark mode persistence on Learn page

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

* feat: add additional style changes for Learn page consistency

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

* fix: remove console.log and revert unrelated navbar changes

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

---------

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>
surya4419 pushed a commit to surya4419/template-playground that referenced this pull request Mar 14, 2025
* fix(navbar): implement responsive collapse at 955px

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

* fix(navbar): implement responsive collapse at 955px

- Add mobile-first responsive navbar
- Preserve help dropdown functionality
- Optimize logo/text hierarchy

Closes accordproject#172

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

* fix: dark mode persistence on Learn page

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

* feat: add additional style changes for Learn page consistency

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

* fix: remove console.log and revert unrelated navbar changes

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

---------

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>
surya4419 pushed a commit to surya4419/template-playground that referenced this pull request Mar 14, 2025
* fix(navbar): implement responsive collapse at 955px

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

* fix(navbar): implement responsive collapse at 955px

- Add mobile-first responsive navbar
- Preserve help dropdown functionality
- Optimize logo/text hierarchy

Closes accordproject#172

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

* fix: dark mode persistence on Learn page

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

* feat: add additional style changes for Learn page consistency

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

* fix: remove console.log and revert unrelated navbar changes

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

---------

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>
Signed-off-by: surya4419 <suryaa4419@gmail.com>
@yashsaraswat2004 yashsaraswat2004 deleted the yashsaraswat/i182/dark-mode-fix branch March 14, 2025 05:28
surya4419 pushed a commit to surya4419/template-playground that referenced this pull request Mar 14, 2025
* fix(navbar): implement responsive collapse at 955px

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

* fix(navbar): implement responsive collapse at 955px

- Add mobile-first responsive navbar
- Preserve help dropdown functionality
- Optimize logo/text hierarchy

Closes accordproject#172

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

* fix: dark mode persistence on Learn page

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

* feat: add additional style changes for Learn page consistency

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

* fix: remove console.log and revert unrelated navbar changes

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

---------

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>
Signed-off-by: surya4419 <suryaa4419@gmail.com>
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.

Dark Mode Does Not Persist on Learn Page

3 participants