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

Dark Mode 🌚 #56

Open
RobertConde opened this issue Sep 30, 2023 · 9 comments
Open

Dark Mode 🌚 #56

RobertConde opened this issue Sep 30, 2023 · 9 comments
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@RobertConde
Copy link
Collaborator

Come, join the dark side!

@RobertConde RobertConde added enhancement New feature or request good first issue Good for newcomers labels Sep 30, 2023
@ghost
Copy link

ghost commented Sep 30, 2023

Can I join the dark side?

@RobertConde
Copy link
Collaborator Author

Can I join the dark side?

yess!

@RobertConde
Copy link
Collaborator Author

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

@RobertConde
Copy link
Collaborator Author

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!

@ghost ghost mentioned this issue Nov 17, 2023
@ghost
Copy link

ghost commented Nov 17, 2023

@RobertConde can you review pull request #59

@forrester-aidan
Copy link

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.

image

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
Copy link

@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.
image

@RobertConde
Copy link
Collaborator Author

@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. image

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
Copy link
Collaborator Author

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.

image

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants