Theme
App Themes are informed by the Everyday design system that allows dynamic theming with little effort. When you create a app theme it automatically becomes available as a content theme which can be applied to applicable content on the platform.
Colours
You can select up to 4 app colours: Primary, Light Primary, Accent, Dark. These four colours then create light and dark variants automatically. So when applying 4 colours 16 colors are created automatically.
The colour design system is influenced by Google's Material Design. If you need or are looking for inspiration on colour theming have a look at Materials colour UI usage: https://material.io/design/color/applying-color-to-ui.html#usage
Color Reference and Usage
Type
Primary
Used predominantly throughout the UI.
Primary Light
Should be a lighter shade of primary and is used for lighter shades on UI.
Accent / Complimentary
Used for giving depth to the UI in gradients and limited UI.
Tertiary (Link Color) Only used as an alternative link color.
Used in dark mode. This color is used to transform shadows, white and grey elements into dark mode variants.
Tertiary (Link Colour)
The tertiary link can be used to choose a unique link colour. By default, the primary app theme colour is applied to all links.
How to choose a Tertiary Link Colour
Open Raven. From Apps, select the app you would like to edit.
Set a Tertiary (Link Colour). In App Designer, scroll down to Theme/Colours. In Tertiary (Link Colour), enter the hex value of your chosen colour. Enter. The preview screen should update with a preview of your link colour.
Check the update. It is recommended to redeplloy the app after making any changes, and to then check the app to ensure the update has been successful.
The Story Theme will overwrite the Raven app theme and therefore the link colours.
In the Text Editor of any Page, both the App Theme and Story Theme link colour can be overwritten.
Dark Mode
Colour usage in themes
To meet industry app standards, the platform implements a design system that is tried and tested, optimized in choices, and guided by app guidelines. Both Apple and Google expect app designers to follow guidelines set forth respectively. In Apple's case, poor design choices may result in app rejection.
"Make sure your app’s colors work well in both light and dark contexts. Most platforms offer a dark alternative to the default light appearance called Dark Mode. Dark Mode uses a darker color palette for all screens, views, menus, and controls, and can increase vibrancy"
https://developer.apple.com/design/human-interface-guidelines/color
When using Raven to set the app theme, it's about finding a balance between a Brand's Guidelines and what makes UI/UX sense in both Light and Dark modes. On apps, as users can prefer light or dark mode, the chosen brand colours should work on both light and dark mode.
If any of the brand colours are very dark or very light, rather use these dark colours in content elements and the app icon. Use alternative, dark & light-mode-safe colours for the primary, secondary, and accent colours.
You can use dark colours for secondary and/or accents but make sure you test the UI/UX in both light/dark modes.
The primary app colour does not need to be the brand's primary colour. If a user can't read or see the button, text or icon then the app will look broken :/
Understanding the Dark colour in themes
The dark color in themes is used only to shade background elements of white and grey. The default midnight blue (#2f3542) should be used 99% of the time and was specifically selected as predictable aesthetic in dark mode. Dark color is not a brand colour value and shouldn't be used as such; it is merely the dark mode colour for white and grey backgrounds.
Examples To Try
To give you some examples of how to choose colors with varying effects, try out the examples below.
Type
Primary
Light Primary
Accent
Dark
Flat / Mono
#1abc9c
#1abc9c
#1abc9c
#34495e
Two Tone
#e67e22
#f1c40f
#f1c40f
#2f3542
Gradient
#6e97e9
#78d4ff
#8545e3
#2f3542
Gradient Reverse
#9b59b6
#9b59b6
#1abc9c
#34495e
User Interface Icon Styles
In app designer you can select the style the of app's icons: Light (Default), Solid, Regular and Duotone. UI icons are a preset set of glyphs that are used throughout the app. These glyphs are sourced from FontAwesome.
Typography
You can select up to 3 Google Fonts: Heading, Sub-Heading and Body. If you need help deciding on fonts, browse through Google Fonts and look at recommend font pairings.
Last updated