Add dark mode toggle #43

jaguilar89 · 2024-03-30T01:13:14Z

Description

This code adds a toggle switch for dark mode and light mode.

This came about as I was working on a problem in my previous issue where the body of the app turned white while the header and nav stayed dark, after implementing CSS changes for the sign in alerts. I figured I'd give it a go!

Update

App now recognizes users system preference and will set the theme accordingly. It will also automatically change the theme if you change your system preference in your computer settings. AC and Testing Steps have been updated.

Related Issue

N/A

Acceptance Criteria

User can toggle between a dark mode and a light mode by clicking on the switch.
Users theme preference persists after refreshing the page.
App theme is initially set to the users system preference.
Changing theme preference in macOS/Windows settings automatically changes theme in the app.

Type of Changes

Enhancement, Accessibility

Updates

Before

After

Switch added for toggling dark mode and light mode

Testing Steps / QA Criteria

git pull
git checkout ja-feature-dark-mode-toggle
npm ci
npm start

Upon viewing the app for the first time, the theme should match your system preference by default.
Changing your system preference in macOS or Windows settings should automatically update the theme on the app.
Click on the toggle switch on the upper right corner to see if it correctly toggles between dark mode and light mode.
Choose light mode and refresh the page, then navigate between pages. The light mode preference should persist.
Choose dark mode and refresh the page, then navigate between pages. The dark mode preference should persist.

Notes

Right now this does not automatically set the theme based on the users system/browser preference as it did before. There are methods to detect the users preference using JS and the CSS media queries we currently have, if that's a functionality we want to implement.

jaguilar89 · 2024-03-30T18:49:27Z

After adding this functionality I noticed the sign in alert background was no longer transparent (can't see the page).

Not sure why, so for now I have each modal with its own description text e.g. "In order to perform this action..." is now "In order to create a list...", "In order to add a new item...", etc for clarity.

…adix theme accordingly

rachelspencer · 2024-04-01T15:47:25Z

Hey Jose!

Nice job! When I set my default setting to light or dark the app opens up in the correct mode.

I am having an issue where if I set my system preferences to dark mode, but then refresh the page it goes to light mode (see video). I am using Chrome.

I also tested all the alerts to see the new messages, I like how they are specific to the action. Are you working on making the background transparent? I think it would be a better user experience as you don't look so 'locked out' when the alert pops up.

Dark.Light.mode.toggle.mp4

sillytsundere

Hey Jose! This all looks great! Thanks for doing this! However I am having a similar problem to rachel. If I open the app it will be in dark mode, with the body and nav bar backgrounds being the dark color. However if i switch with the toggle to light mode the body changes to a white background color but the navbar background color remains the dark color unless i switch to light mode on my device. and the reverse happens as well. if my device is in light mode and i click the toggle to go to dark mode the body background color changes to the dark color but the navbar background color remains white.

It seems like the navbar is staying with the theme set by the device and not the toggle.

That was the only issue i noticed though!

trushmi · 2024-04-01T19:03:37Z

Hi @jaguilar89! Nice work on addressing this issue! I like that we now have a toggle button! Speaking about enhancing user experience, I've noticed that when I toggle the button, there's a slight delay, and the theme changes faster than the toggle button switches. Is it possible to make them synchronize simultaneously?

rachelspencer · 2024-04-01T19:26:46Z

@jaguilar89 I wanted to note, that my Chrome browser is set to light mode, I wonder if when I refresh if this overrides the system preferences?

I'm not sure if this is helpful or not but worth mentioning!

jaguilar89 · 2024-04-02T02:09:35Z

Hi @jaguilar89! Nice work on addressing this issue! I like that we now have a toggle button! Speaking about enhancing user experience, I've noticed that when I toggle the button, there's a slight delay, and the theme changes faster than the toggle button switches. Is it possible to make them synchronize simultaneously?

@trushmi That's the default animation speed of the button, I've sped it up a bit so it should be little better now.

jaguilar89 · 2024-04-02T02:12:11Z

@rachelspencer The issue with the theme changing on refresh should be fixed now!
@sillytsundere I've set the colors for the navbar for both dark and light modes. Let me know if it looks ok!

rachelspencer · 2024-04-02T13:26:33Z

Hey @jaguilar89!

The mode isn't changing now when I refresh! Nice!

I am not seeing the nav bar change colors for both modes, they stay white with the blue text.

I was also wondering if you have played around with making the modal backgrounds transparent yet?

rachelspencer

Hey Jose!

Approving this now, hopefully you can alter the modal background to be transparent.

Great job on this!

trushmi · 2024-04-03T20:41:12Z

Hi @jaguilar89! Nice work on addressing this issue! I like that we now have a toggle button! Speaking about enhancing user experience, I've noticed that when I toggle the button, there's a slight delay, and the theme changes faster than the toggle button switches. Is it possible to make them synchronize simultaneously?

@trushmi That's the default animation speed of the button, I've sped it up a bit so it should be little better now.

@jaguilar89 Thank you for speed of the button! Now the delay is less noticeable!

trushmi

Looks good to me! Nice work tackling this issue @jaguilar89 !!

polly89

Great job implementing this feature. It worked as described in the PR. I left non-blocking comments in the code.

polly89 · 2024-04-03T22:48:44Z

src/api/useAuth.jsx

 		Sign Out
-	</button>
+	</Button>


suggestion - right now your signIn and signOut buttons are hard to distinguish visually. You can solve this issue a few different ways:

make the SignOut button red and the SignIn button green

add an icon to each button

polly89 · 2024-04-03T22:54:18Z

src/providers/DarkModeProvider.jsx

+			{children}
+		</DarkModeContext.Provider>
+	);
+}


Great job accounting for all the different use cases.

polly89 · 2024-04-03T22:56:29Z

src/views/Home.jsx

@@ -49,7 +49,7 @@ export function Home({ data, setListPath }) {
 					required
 				/>
 				{user ? (
-					<Button className="custom-button" type="submit">
+					<Button className="custom-button" type="submit" variant="solid">
 						Create a list


suggestion - right now both of this and the button to add an item look the same. I think in this case they are both acting like primary buttons, which is fine, but perhaps consider changing the wording of this one to Share or make it a secondary button so the styling is slightly different.

polly89 · 2024-04-04T00:25:36Z

src/index.css

-	--color-border: hsla(220, 13%, 78%, 1);
-	--color-text: var(--color-black);
+	--color-bg-dark: var(--color-black);
+	--color-bg-light: var(--color-white);


I spoke to Tim because I was having a hard time figuring out the transparency issues with the modal. If you comment out line 8 and 9 it resolves it, BUT it creates a whole set of other styling issues with your dark mode.

You can talk to the team to see how they feel about keeping the solid background. If there are other issues that still remain unfinished you may want focus on those rather than worry about the transparency of the background in this issue.

…ground when viewing a modal alert

github-actions · 2024-04-04T19:39:32Z

Visit the preview URL for this PR (updated for commit c2f2a95):

https://tcl-73-smart-shopping-list--pr43-ja-feature-dark-mode-7lo4k34h.web.app

_{(expires Thu, 11 Apr 2024 20:09:15 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 99eed22fcca8bd9874e77f7b7f7d1eeb554a1666}

set user preference using localStorage

d443159

jaguilar89 added accessibility enhancement New feature or request labels Mar 30, 2024

jaguilar89 requested review from trushmi, rachelspencer and sillytsundere March 30, 2024 01:13

jaguilar89 self-assigned this Mar 30, 2024

jaguilar89 added 2 commits March 30, 2024 20:47

added logic to detect users system preference for dark mode and set r…

59994c4

…adix theme accordingly

added comments

a842237

sillytsundere approved these changes Apr 1, 2024

View reviewed changes

fixed navbar and button colors on theme toggle

c423efd

rachelspencer approved these changes Apr 3, 2024

View reviewed changes

trushmi approved these changes Apr 3, 2024

View reviewed changes

jaguilar89 requested a review from polly89 April 3, 2024 22:06

polly89 approved these changes Apr 4, 2024

View reviewed changes

jaguilar89 added 3 commits April 4, 2024 12:13

adjusted bg color opacity for dark mode to fix issue with opaque back…

f642d52

…ground when viewing a modal alert

added sign in/out icons to buttons

62786f8

installed react-dark-mode-toggle v2

60652c6

jaguilar89 force-pushed the ja-feature-dark-mode-toggle branch from feda33f to 60652c6 Compare April 4, 2024 19:12

merge with main

f99ab74

removed path class rule from Layout.css

c2f2a95

jaguilar89 merged commit 4e031c2 into main Apr 4, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add dark mode toggle #43

Add dark mode toggle #43

jaguilar89 commented Mar 30, 2024 •

edited

Loading

jaguilar89 commented Mar 30, 2024

rachelspencer commented Apr 1, 2024

sillytsundere left a comment •

edited

Loading

trushmi commented Apr 1, 2024

rachelspencer commented Apr 1, 2024

jaguilar89 commented Apr 2, 2024

jaguilar89 commented Apr 2, 2024

rachelspencer commented Apr 2, 2024

rachelspencer left a comment

trushmi commented Apr 3, 2024

trushmi left a comment

polly89 left a comment

polly89 Apr 3, 2024

polly89 Apr 3, 2024

polly89 Apr 3, 2024

polly89 Apr 4, 2024 •

edited

Loading

github-actions bot commented Apr 4, 2024 •

edited

Loading

Add dark mode toggle #43

Add dark mode toggle #43

Conversation

jaguilar89 commented Mar 30, 2024 • edited Loading

Description

Update

Related Issue

Acceptance Criteria

Type of Changes

Updates

Before

After

Testing Steps / QA Criteria

Notes

jaguilar89 commented Mar 30, 2024

rachelspencer commented Apr 1, 2024

sillytsundere left a comment • edited Loading

Choose a reason for hiding this comment

trushmi commented Apr 1, 2024

rachelspencer commented Apr 1, 2024

jaguilar89 commented Apr 2, 2024

jaguilar89 commented Apr 2, 2024

rachelspencer commented Apr 2, 2024

rachelspencer left a comment

Choose a reason for hiding this comment

trushmi commented Apr 3, 2024

trushmi left a comment

Choose a reason for hiding this comment

polly89 left a comment

Choose a reason for hiding this comment

polly89 Apr 3, 2024

Choose a reason for hiding this comment

polly89 Apr 3, 2024

Choose a reason for hiding this comment

polly89 Apr 3, 2024

Choose a reason for hiding this comment

polly89 Apr 4, 2024 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Apr 4, 2024 • edited Loading

jaguilar89 commented Mar 30, 2024 •

edited

Loading

sillytsundere left a comment •

edited

Loading

polly89 Apr 4, 2024 •

edited

Loading

github-actions bot commented Apr 4, 2024 •

edited

Loading