Skip to content

[UI/UX:System] Dark Mode Toggle #691

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

Merged
merged 8 commits into from
Jul 22, 2025
Merged

[UI/UX:System] Dark Mode Toggle #691

merged 8 commits into from
Jul 22, 2025

Conversation

JManion32
Copy link
Contributor

@JManion32 JManion32 commented Jul 18, 2025

What's new?

  1. Added a dark mode toggle to the sidebar.
  2. Added _colors.scss so that colors can change dynamically.
  3. Added '_dark-mode.scss` which overrides existing background and text color styling, and styles the toggle button.
image
video.for.sub.docs.site.mp4

Still very rough around the edges but dark mode is officially toggleable
Dark mode now toggles with a 200ms transition time. TODO: Tidy up using CSS variables and not hard coding. Swap any images/icons or things that don't contrast well with dark mode. Style the button to be a nice clean slider. Make sure button placement is clean on mobile, unsure of how to implement that but will figure it out.
Now includes a toggle in the sidebar.
@github-project-automation github-project-automation bot moved this to Seeking Reviewer in Submitty Development Jul 18, 2025
@JManion32 JManion32 changed the title Added Dark Mode Toggle [UI/UX:System] Added Dark Mode Toggle Jul 18, 2025
When you reloaded the page in dark mode, it would flash white. This shouldn't happen anymore. Additionally, the no src error should be eliminated.
@JManion32 JManion32 changed the title [UI/UX:System] Added Dark Mode Toggle [UI/UX:System] Dark Mode Toggle Jul 18, 2025
Copy link
Contributor

@martig7 martig7 left a comment

Choose a reason for hiding this comment

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

I like how this was implemented, I think the toggle should go under the submitty logo personally but we agreed on the current location in the meeting. Oherwise this PR is good.

@github-project-automation github-project-automation bot moved this from Seeking Reviewer to Awaiting Maintainer Review in Submitty Development Jul 21, 2025
Copy link
Member

@bmcutler bmcutler left a comment

Choose a reason for hiding this comment

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

please don't delete the 4 color seal. the blue chevrons in the RPI seal inspired the blue chevrons in the submitty logo.

@github-project-automation github-project-automation bot moved this from Awaiting Maintainer Review to Work in Progress in Submitty Development Jul 22, 2025
Now uses the original image, but instead of the image being transparent, it has a white background.
@github-project-automation github-project-automation bot moved this from Work in Progress to Awaiting Maintainer Review in Submitty Development Jul 22, 2025
@bmcutler bmcutler merged commit b69cc87 into main Jul 22, 2025
4 checks passed
@bmcutler bmcutler deleted the dark-mode-toggle branch July 22, 2025 19:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

3 participants