Skip to content

Persist dark/light mode across page reloads #337

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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

shivasankaran18
Copy link

@shivasankaran18 shivasankaran18 commented Mar 27, 2025

Closes #336

Persist Dark/Light Mode Across Page Reloads

Changes

  • Added functionality to store the user's theme preference (dark or light) in localStorage.
  • Modified app initialization to apply the saved theme preference on page load.
  • Updated the data-theme attribute dynamically to ensure consistent styling.

Flags

  • Ensure the solution works across all pages and edge cases (e.g., first-time visitors).
  • Verify that the localStorage implementation does not conflict with other features.

Screenshots or Video

Screenshot 2025-03-28 050710
Screenshot 2025-03-28 050721

Author Checklist

  • Ensure you provide a DCO sign-off for your commits using the --signoff option of git commit.
  • Vital features and changes captured in unit and/or integration tests
  • Commits messages follow AP format
  • Extend the documentation, if necessary
  • Merging to main from fork:branchname

@shivasankaran18 shivasankaran18 requested a review from a team as a code owner March 27, 2025 23:39
@shivasankaran18
Copy link
Author

@DianaLease could you review this PR ?

Copy link

netlify bot commented Mar 27, 2025

Deploy Preview for ap-template-playground ready!

Name Link
🔨 Latest commit e237eda
🔍 Latest deploy log https://app.netlify.com/sites/ap-template-playground/deploys/680b2c67c348920008ad5f95
😎 Deploy Preview https://deploy-preview-337--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.

@@ -8,8 +8,9 @@ const ToggleDarkMode: React.FC = () => {
const [isDarkMode, setIsDarkMode] = useState(backgroundColor === "#121212");

useEffect(() => {
setIsDarkMode(backgroundColor === "#121212");
}, [backgroundColor]);
const savedTheme = localStorage.getItem('theme');
Copy link
Member

Choose a reason for hiding this comment

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

Can't we just get this before initialising the state variable above? We can get rid of this useState?

Copy link
Author

Choose a reason for hiding this comment

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

resolved @sanketshevkar

const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
set(() => ({
backgroundColor: '#121212',
Copy link
Member

Choose a reason for hiding this comment

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

Can we please move all these string values to a constants file? We can reuse as variables across the app.

Copy link
Author

Choose a reason for hiding this comment

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

resolved @sanketshevkar

@shivasankaran18
Copy link
Author

Sry @sanketshevkar for the late response..caught up with semester exams

Signed-off-by: shiva <[email protected]>
@shivasankaran18
Copy link
Author

@sanketshevkar @DianaLease @dselman ..could you review the PR when you find time ?

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.

Persist Dark/Light Mode Across Page Reloads
2 participants