Dark Mode 🌚

[RobertConde]

Come, join the dark side!

[saltedtea]

Can I join the dark side?

[RobertConde]

Can I join the dark side?

yess!

[saltedtea]

Is there a way for me to obtain a CORS API key?

[saltedtea]

Nevermind, I got it.

[RobertConde]

Okok, make sure to rename it to .env :)

[saltedtea]

Got this atm

[saltedtea]

Any suggestions?

[RobertConde]

That looks really great! I would look at Tailwind CSS's dark mode functionality to implement this correctly (e.g. dark:{classname}).

Here are some of my thoughts on the theming (this is completely subjective):

• Buttons shouldn't blend into the background (that's my fault in the light mode)
• Things that are related and logically the same should be themed similarly
  • A course
  • Sections
  • A section belonging to a selection
• Things that are related but logically not the same should be themed differently (at least slightly)
  • A course & a section (logically different)
• The way that shadows don't work the same way in light/dark mode (mess around with it)
• Colors in light mode may need more saturation in dark mode (look at the colors of the Sections for each Schedule)
• Gray areas may not reflect well in dark mode (look at the period numbers for each Schedule)
• Text can't blend in

This is great work! Experiment a bit, and see if it works. Look around for great examples!

[saltedtea]

Thanks, I will look into that and get back to you.

[saltedtea]

I am back with the changes and this is what it looks like now. You can check the changes I made here: https://github.com/saltedtea/SwampScheduler

[saltedtea]

Had to take care of some personal stuff so I was only able to make changes recently.

[saltedtea]

Let me know if I can improve anything and if I can help make this mobile responsive.

[saltedtea]

@RobertConde can you review pull request #59

[forrester-aidan]

Hey @RobertConde, I just completed some work on the dark mode functionality as well and took your advice. I went back and got used to the proper Tailwind implementation, and here's what I have.

Here's a little justification for my work:

• I used the template dark mode that you sent me as a reference to complete this portion, so those were the decisions behind the purple buttons. On hover, they change to a slightly darker shade of purple, indicating that they're being hovered over. I also emboldened the font to make it easier to see.
• In order to make it so none of the elements blended into the background, I changed the background of the whole page in dark mode only to the darkest color. That way, all other elements will sit above it.
• Like you mentioned, the course and section elements are logically different, so I made the section elements a slightly lighter shade of grey to distinguish the difference between the two.
• I liked keeping the original colors in the schedule generator from the light mode, as they're still calming colors that are easy on the eyes. In dark mode, I just created a white border for all the schedule boxes, but kept the text color the same.
• I couldn't decide between changing the background color of the search text box or not, and I ultimately left it the same as it is in light mode. I believe it provides greater emphasis to the user that they need to be interacting with THIS text box to select the classes they need.
• Finally, I made sure the section colors and the course Droppable element were different colors, that way it was easier to see which courses were placed in which box.

I know it's a lot to read, but let me know what you think!

[Anthony42540]

@RobertConde Just wanted to show my implementation of dark mode for SwampScheduler, but I see @forrester-aidan already showed his finished work. The light/dark mode depends on the user's OS settings.

[RobertConde]

@RobertConde Just wanted to show my implementation of dark mode for SwampScheduler, but I see @forrester-aidan already showed his finished work. The light/dark mode depends on the user's OS settings.

I really like the blue!!!

I don't enjoy the colors in the schedule. Could you try to change them? I think I have an array of colors somewhere in the code. You could change them depending on which mode the user has selected.

[RobertConde]

Hey @RobertConde, I just completed some work on the dark mode functionality as well and took your advice. I went back and got used to the proper Tailwind implementation, and here's what I have.

Here's a little justification for my work:

• I used the template dark mode that you sent me as a reference to complete this portion, so those were the decisions behind the purple buttons. On hover, they change to a slightly darker shade of purple, indicating that they're being hovered over. I also emboldened the font to make it easier to see.
• In order to make it so none of the elements blended into the background, I changed the background of the whole page in dark mode only to the darkest color. That way, all other elements will sit above it.
• Like you mentioned, the course and section elements are logically different, so I made the section elements a slightly lighter shade of grey to distinguish the difference between the two.
• I liked keeping the original colors in the schedule generator from the light mode, as they're still calming colors that are easy on the eyes. In dark mode, I just created a white border for all the schedule boxes, but kept the text color the same.
• I couldn't decide between changing the background color of the search text box or not, and I ultimately left it the same as it is in light mode. I believe it provides greater emphasis to the user that they need to be interacting with THIS text box to select the classes they need.
• Finally, I made sure the section colors and the course Droppable element were different colors, that way it was easier to see which courses were placed in which box.

I know it's a lot to read, but let me know what you think!

That's really great!

I do think we should stay away from using pure black though and I'm not sure if purple fits in with the light mode.