Opera Browser — 2024
Developing Opera R2 Android browser themes
The goal of this project is to create new browser themes based on the new Opera R2 wallpapers and refine the old themes to ensure consistent color.
Key skills developed during this project:
Background & objective
In 2024, Opera introduced a new theme called the R2 theme. This theme introduced new browser wallpapers and theme colors to Opera. For Opera Android, our goal is to create unified themes linked to each wallpaper.
Objective: Adapt to Opera Desktop's new UI updates to help people recognize Opera Browser products as part of a unified family under the same brand, which will increase brand loyalty and potentially boost cross-product awareness and adoption.
Process
We currently have 8 themes. I didn’t jump straight into creating new themes, as having too many themes with similar colors would be ineffective. Instead, I reviewed the 8 existing themes to see if any could be reused, and identified which wallpapers would require new themes. The review conluded:
-
The Serenity wallpaper can be linked to our Opera One theme, the Bliss wallpaper to the Purple theme, and the Dawn wallpaper to the Orange theme.
-
The Midnight wallpaper could use a new theme, which would be a teal theme.
1 / Review current themes
2 / Define the themes update scope
Due to the tight release target, we aimed to update the colors effectively. Thus, the updates are as follows:
-
New theme: Teal.
-
Update the entire palettes for Orange and Green.
-
Change the primary color tone to “Primary 50” for all themes, except for Orange, which will use “Primary 60.”
-
Add missing surface reference colors for all themes.
*The updates also adjusted based the themes in Opera Desktop and iOS, which currently have their own themes.
3 / Output
-
New teal theme for Midnight wallpaper.
-
Updated orange and green palettes.
Result
-
Achieved theme colors consistency.
-
Set a new system for detailed surface colors (neutral palettes).
There was inconsistency in the color tones of the current themes. We use M3 color system (Material Guidelines 3 - Color system), so we checked each theme's primary color tone values using the M3 plugin: HCT Color Picker.
-
Updated neutral and surfaces colors.
