Designing App UI Components for Light and Dark Themes

This collection brings together UI components I designed for one of my real app projects. The goal was to create a consistent interface that could support several different product functions while working effectively in both light and dark themes.

Unlike a standalone visual exploration, these components were created around practical product requirements and real user interactions.

The component system

The project required components for displaying and managing different types of information, including:

• Energy consumption and monthly billing
• Property access and door controls
• Community posts and social interactions
• User reviews and ratings
• Permission errors and system feedback

Each component needed its own hierarchy and interaction pattern while still feeling like part of the same product.

Designing different data experiences

Some components present visual data through charts, while others support direct actions such as unlocking an entrance, responding to a community post or reviewing a service.

I used clear headings, familiar icons, structured spacing and selective colour to make each component easy to understand. Important information is given stronger visual emphasis, while supporting details remain visible without competing for attention.

Status colours also help users quickly recognise ratings, warnings, active actions and different types of data.

Adapting the interface to both themes

I designed complete light and dark versions of the component system.

The dark theme was not created by simply replacing white with black. Background layers, cards, borders, chart lines, secondary text and interactive states were adjusted individually to maintain the same hierarchy and readability.

The yellow accent colour remains consistent across both themes, helping preserve the product’s visual identity while providing enough contrast in different viewing conditions.

Designing for consistency

The main challenge was bringing several unrelated functions into one cohesive design language.

Charts, access controls, social content and review components all have different purposes. A shared system of typography, corner radius, spacing, iconography and colour helped connect them without limiting the individual needs of each component.

This approach also made the interface easier to extend as new features and content types were introduced.