EntertainHub App (Dark / Light Mode)

Design Approach

I began by designing the main screens in light mode to establish:

• layout hierarchy
• spacing
• content structure

After that, I translated the same screens into dark mode, ensuring visual consistency and smooth theme switching between modes.

Key focus areas:

• Clear content hierarchy
• Comfortable contrast for long-term viewing
• Strong emphasis on featured content and CTAs
• Familiar UI patterns common to streaming platforms

Theme Switching

The light/dark mode switch is placed in the top app bar, making it:

• Easy to discover
• Accessible from the main screen
• Consistent with common mobile UI patterns

This allows users to quickly adapt the interface to their environment and personal preferences.

Dark Mode Color Strategy

The dark mode palette was carefully crafted to meet WCAG accessibility requirements:

• Backgrounds: Deep neutral dark tones instead of pure black to reduce eye fatigue
• Primary text: High-contrast light gray / white for optimal readability
• Secondary text: Muted gray tones to preserve hierarchy
• Accent color: Red remains the brand’s primary action color (Play, Watch Now), ensuring visibility and emotional emphasis

This approach maintains strong contrast ratios while avoiding overly harsh visuals.

Accessibility Considerations

• Text and UI elements meet WCAG contrast guidelines
• Interactive elements (buttons, ratings, labels) remain clearly distinguishable in dark mode
• Color is never the only indicator of meaning — icons, labels, and hierarchy support comprehension