Colors and Themes

Theme

The Theme is a more semantic layer above colors. Want to know what the URL bar's tint should be? Theme.urlBar.tint. What's the default background color? Theme.browser.background. You should always prefer using Theme over referencing colors directly.

For new features, extend Theme to add semantic colors for your feature as needed.

Colors

Since this project can be used to build multiple apps (e.g. Cliqz Browser and Ghostery Browser), colors are separated into target-specific asset files. They live in Branding/Cliqz/colors.xcassets and Branding/Ghostery/colors.xcassets respectively. Next to those files are other branding-specific files such as Info.plist and image asset files.

The colors asset file contains named colors. Some, like LightBlue or LightGreen are always the same color in both light and dark mode, sometimes with minimal changes to make them look better in Light/Dark mode. Other more semantically named colors, like Background, Grey20, Grey30, Blue40, ... etc change drastically between light and dark modes to ensure contrast.

Colors with numbers in their names (Grey20) are in relation to their partner color of 100 - number. This means that Grey20's dark mode color is the same as Grey80's light mode color and vice versa.

To reference colors from the asset bundle, use Colors.swift's UIColor extension, e.g. let color = UIColor.Grey40.