Making mobile apps look better - theme and colours

This is the third part of my journey to build and publish a Flutter based app for the App Store and Google Play.

2014 Baseline Material color theme

Material Design made its debut with a built-in, baseline theme with 12 colours named and defined. Much has changed but these building blocks are important to understand as you think about the colours in your app.

TL:DR – The colours in mobile apps can look good if you pay attention to themes and colour choices. I like to use tools to help me visualise the app colours and this article shows how.

Making apps look good with colour

Lets face it, the image, the app name and title in the appBar created last time don't look good at all. Lets add some depth through a color pallette. That is easy to do because Material design is all about colours, right? There's only one way to find out!

The Material Design color system helps create a coherent set of colours for your app, ensuring accessible text and controls, while supporting dark and light variation on modern devices. You can use the Material Design Colour Tool to create, and apply colour pallettes to the app. Lets try to do that in a consistent way with a recap of some information about this color theme.

Lots of apps just use the baseline or fall back to it. But you can customise it, and you really should, because apps which are just running on the defaults look outmoded and dated pretty fast.

Choosing colours

There is only one defining colour in this app so far, the logo #e5440d. The logo itself needs to be visible in the app and not clash in the app. Logos are often a contributor to branding and colour issues for mobile apps and it is wise to steer clear of the discussion of these issues with your clients as they can derail your project.

One approach which avoids such friction is to take complementary colours and apply them to the mobile app. So lets take a shade and tints of the logo colour as the basis for our color pallette. Of course you may have a designer and a set of colours to use. This is just a quick hack to choose some colours that don't clash with the logo for this app.

One place you can find shades and tints for colours is at color-hex.com.

The colour chosen for the primary colour #892807 is a shade of the logo colour #e5440d and the colour chosen for the secondary colour #ec7c55 is a tint of the logo colour #e5440d

Shades and tints from our logo applied to the baseline Material color theme

Applying these colours to the Primary and Secondary names identified in the baseline Material color theme gives you this group of colours.

Presented like this it looks pretty nice for the purposes of this app.

Material Design Color Pallettes

But there's more to Material Design than the 12 named colours. Material relies upon a palette of colours represented as 'swatches' of multiple colurs of complementary shades. The 2014 Material Design guidelines provided many of these and its fine to use them of course. But if you are going to the trouble of creating a set of primary and secondary theme colours it makes sense to create a complementary Material Design Colour Pallette. Google provide the Material Design Colour Tool for this purpose.

Enter #892807 as 'Primary color' and #ec7c55 as 'Secondary color'

Material Design Color Tool

Select the 'View in color tool' link to see a mockup of a material design with these colours applied. You can also see accessibility information about text legibility.

Of course it is an approximation and does not represent code. It is very helpful to get the colours quickly into your app to see real device screens and brightness and it can be helpful to show your client or sponsor early on in the process.

Add the colour pallette to your project

Googles tool doesnt seem to do what was wanted which was a way to generate custom material pallettes with the chosen hex color at '500' (this will become important later when we consider the colour implications for light and dark themes). Fortunately there is a tool which does do this. Give the pallettes a name and you can save the link for when you need to refer to it in the future. 

The tool generates the flutter code (and other types of code) for you and is forked by me on GitHub Thank you to those open-source project contributors!

Now that we have the colors we want to use as the main (500) colours for our app, paste them into the app. the Palletes are called lightwhichisdarker for the light theme, and darkwhichislighter for the dark theme, just to remind us that the colours are kind of opposite to te appearance setting on the device.

const MaterialColor lightwhichisdarker = MaterialColor(_lightwhichisdarkerPrimaryValue, <int, Color>{
  50: Color(0xFFF1E5E1),
  100: Color(0xFFDCBFB5),
  200: Color(0xFFC49483),
  300: Color(0xFFAC6951),
  400: Color(0xFF9B482C),
  500: Color(_lightwhichisdarkerPrimaryValue),
  600: Color(0xFF812406),
  700: Color(0xFF761E05),
  800: Color(0xFF6C1804),
  900: Color(0xFF590F02),
});
const int _lightwhichisdarkerPrimaryValue = 0xFF892807;

const MaterialColor lightwhichisdarkerAccent = MaterialColor(_lightwhichisdarkerAccentValue, <int, Color>{
  100: Color(0xFFFF948B),
  200: Color(_lightwhichisdarkerAccentValue),
  400: Color(0xFFFF3625),
  700: Color(0xFFFF1F0B),
});
const int _lightwhichisdarkerAccentValue = 0xFFFF6558;

const MaterialColor darkwhichislighter = MaterialColor(_darkwhichislighterPrimaryValue, <int, Color>{
  50: Color(0xFFFDEFEB),
  100: Color(0xFFF9D8CC),
  200: Color(0xFFF6BEAA),
  300: Color(0xFFF2A388),
  400: Color(0xFFEF906F),
  500: Color(_darkwhichislighterPrimaryValue),
  600: Color(0xFFEA744E),
  700: Color(0xFFE76944),
  800: Color(0xFFE45F3B),
  900: Color(0xFFDF4C2A),
});
const int _darkwhichislighterPrimaryValue = 0xFFEC7C55;

const MaterialColor darkwhichislighterAccent = MaterialColor(_darkwhichislighterAccentValue, <int, Color>{
  100: Color(0xFFFFFFFF), 
  200: Color(_darkwhichislighterAccentValue),
  400: Color(0xFFFFC4B8),
  700: Color(0xFFFFAE9E),
});
const int _darkwhichislighterAccentValue = 0xFFFFEEEB;

Light and dark appearance

theme: ThemeData(
primarySwatch: lightwhichisdarker,
primaryColor: lightwhichisdarker[500],
),

... 

darkTheme: ThemeData(
primarySwatch: darkwhichislighter,
primaryColor: darkwhichislighter[500],
),

Move the Logo to the App Bar

      appBar: AppBar(
      title: Text('Your Project'),
      leading: Image.asset('assets/ezone-24-white.png'),
    

The app now has a theme, which works on both light and dark appearance and the image is better presented than before. The text Launch screen is not right though for light and dark appearance. It can be presumed invisible from the dark appearance screenshot. So there looks to be yet more work to be done to support dark and light appearance too!

Light and Dark appearance on iOS, showing a missing text item. The words 'Launch screen' are missing on Dark appearance.

"On" colors

The baseline material design "On" colors are stated as being primarily applied to text, iconography, and strokes that are sometimes placed "on" top of key surfaces that use a primary, secondary, surface, background, or error color.

So we can extend the app to add them to the theme. Material themes were introduced in 2014, way before dark and light appearance arrived in Android 10 and iOS 13 devices and the baseline themes have been adjusted to take this into account so the next article will revise our colour model to take that into account and improve the app text.