Mixing Colors
Explore practical challenges in theming colors and discover how to dynamically mix colors using SCSS to create adaptable background colors for both light and dark themes. Understand why simple alpha transparency can cause contrast issues and learn improved methods for color blending to enhance app appearance across theme variations.
We'll cover the following...
We'll cover the following...
Problems #
Here’s our conundrum when it comes to colors:
- Manually picking up the different variations of colors we need in our app is hard and prone to error.
- When different themes have different brightness levels, the color from one of them usually doesn’t translate very well to the other.
Here’s an example of what we’re talking about. Let’s create some label and use blue as a background and color, we’ll use a lighter blue for the background:
Now, what if we’re in a dark theme:
It becomes obvious that the light blue background is out of place in this dark theme. It’s a dark theme, so why are we using a color that’s very close to white as a background?