With the initial attempt at a dark mode theme being a visual design disaster and not user-friendly, I collaborated with engineers to design a new scalable, aesthetic, and accessible dark mode theme.
I audited the initial dark mode theme attempt which had many issues in terms of visual design and accessibility.
a snapshot of my design audit
Updating the Design System
I revamped the design system to establish a new, visually appealing, and accessible color scheme for dark mode. I collaborated closely with engineers to ensure the new color scheme worked on the technical side.
In order to ensure accessibility of the new colors, I applied the colors to Tegus's current components and tested them on different dark mode backgrounds.
testing new colors on different backgrounds
I then updated the design system with a completely new dark mode color scheme to work across the entire platform.
before/after of the design system's color scheme
Prototyping a Toggle Button
Designed a toggle button to turn on and off dark mode. I created a button for an expanded state and collapsed state to account for the different placements of the toggle button across the platform.