ufosc
Dark Mode 🌚
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!
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!
@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 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.
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.