Tegus: Dark Mode
Designing a scalable dark mode theme
Timeline
July 2023
Tools
Figma
Role
Product Design Intern
Context
Tegus quickly created a dark mode theme for the platform. The initial dark mode was hastily implemented by simply inverting colors on the design system's color palette. This approach led to numerous issues, as the color system had not been originally constructed with dark mode considerations.A simple color inversion on the existing color system is not accessible and a visual design disaster.
A scalable dark mode theme
Final Designs
LIVE SCREENSHOTS
↓ so.. how did i get here?? ↓
design process
01
Conducting an Audit
I began by conducting a design audit to identify areas where our initial attempt at implementing dark mode by inverting colors on the design system's scale did not work.
understand
The primary issues I came across with the initial dark mode color inversion were:
PROBLEM #1
Poor contrast
The initial dark mode color inversion caused mid-palette lighter colors to invert to other mid-palette light colors, while darker colors at the palette's end shifted to the opposite bright end, leading to contrast issues and inaccessible designs.
PROBLEM #2
Lack of depth
The absence of shadows in the dark mode theme hindered the visibility of component depth, making it challenging to discern the stacking order of components.
PROBLEM #3
Outdated components
Tegus's recent design system overhaul left some parts of the platform unaffected by the dark mode color inversion due to incomplete updates.
Understanding Technicalities
Same assignments, updated colors.
Talking to engineers, I learned that design system components are coded with a specific color style; for example, "button-background" is assigned to the button component. This simplifies the development of dark mode or any new color themes, as the color style assignments remain the same but link to the dark mode color palette.
Therefore, my task was to update the existing dark mode color palette to seamlessly work across all platform components and their existing distinct color style assignments.
Examples of color styles assigned to components
02
design
Updating the Color Palette
Making design choices grounded in my priorities.
PRIORITY #2
Visual Design
Ensure visually pleasing aesthetics through UI design.
PRIORITY #1
Accessibility
Ensure clear visibility, contrast, and maintain a distinct depth order of components.
Placing each component individually against various potential dark mode background colors allowed me to visualize their appearance in different use cases.
Through trial and error, I crafted a color pattern that aligns with both my design priorities and works across all potential surfaces.
Testing components on different backgrounds
The Table Component’s color style assignments cause inconsistencies with its background and the components on top in dark mode.
For future scalability, engineers opposed creating a single exception in the code.
the problematic table component
before
after
🟢 THE SOLUTION 🟢
Introducing a new color style.
To ensure scalability in the future and avoid complicating code with exceptions,
I've added a new color style to both light and dark mode palettes.
🛑 A ROADBLOCK 🛑
The almost perfect color palette.
While creating a new dark mode color palette for all 25 components,
one component wasn’t working correctly in dark mode.
Designing a Toggle Button
With the dark mode color theme created, I now needed to design a toggle button for users to switch between light mode and dark mode.
The button transforms as the side
navigation bar expands and collapses
Considerations:Should be concise to fit in the side nav barRequires a visual distinction when the theme is in light or dark modeNeeds two versions: one for the expanded state and one for the collapsed state
Button Design Iterations
I designed iterations for both expanded and collapsed states in both light and dark modes, aiming for a clear and concise button.
The chosen button design uses a new icon exclusively for dark mode, enabling users to easily associate it with the dark mode feature. Additionally, I prioritized clarity and accessibility by clearly displaying the text "Dark Mode."
03
prototype
WHAT I LEARNED
Effectively collaborating with engineers
Close collaboration with engineers taught me technical skills and communication terminology. The technical challenges pushed me to understand of the development-design relationship and potential constraints.
Navigating design systems
This project honed my technical skills in design systems, navigating their complexities. I tackled challenges in matching a chosen color palette across different components, teaching me the complexities of design systems.
Next Project
GoPro
Designing a seamless gifting experience
☆
final thoughts