Chrome material design settings page

A full Google Chrome material design makeover on desktop builds is edging closer.

A new flag introduced to the browser’s dev channel release lets you set ‘material design elements in the browser’s top chrome’. This area is more commonly known as the tab strip and toolbar.

‘Google has been slowly introducing material design to Chrome over the past year’

Three “looks” are offered through the experimental setting, letting you theme the browser’s top bar in full ‘material’, ‘hybrid material’ or stick with the default ‘non-material’.

The differences between ‘material’ and ‘hybrid’ are largely, excuse the pun, immaterial.

Google has been slowly introducing material design tweaks to Chrome over the past year, most visibly in the browser’s mobile builds. Chrome OS has also gained a slate of new app icons, a new look file manager and a redesigned login screen.

Earlier this year Chrome OS gained a revamped App Launcher integrating Google Now cards and optional Google Drive file search.

A carded Chrome settings page is currently in gestation and work on a new look for the downloads history page recently got underway.

The Chrome Material Design Top Bar

Chrome top bar: non-material
How the browser top bar looks normally
Screenshot 2015-08-17 at 19.39.56
How the browser top bar looks with the ‘Hybrid Material’ setting

Don’t expect a dramatic change in the Chrome toolbar when the Material Design flag is set to ‘on’.

As of writing the flag subtly affects the following elements

  • Increased padding/size of the toolbar
  • Height of URL box increased
  • Wider spacing between buttons/elements
  • URL font no longer ‘bold’
  • Smaller font size (‘material’ only)
  • New icons for navigation and bookmarks
  • Lack of nav button ‘on press’ effect

The latter change may, based on another flag that has also been arrived in the latest Chrome Dev, be in lieu of animated ‘ink’ ripple effects being hooked up.

With these changes the desktop browser is but a gradient and hamburger icon away from closely resembling Chrome for Android and iOS.

But as the recent backlash against the new Google Chrome bookmark manager showed us: an awful lot of folk can’t stand an awful lot of change too quickly.

Enable Chrome Material Design Top Bar

chrome dev flag screenshot
The top-chrome-md flag is all you need

Want to track Chrome’s burgeoning toolbar redesign for yourself?

Assuming you’re running Chrome Dev on Windows, Linux or Chrome OS you can.

To enable the material design toolbar paste the following link in a new tab:

chrome://flags/#top-chrome-md

Select a preference from the drop-down list (default is ‘non-material’) and, when prompted to, relaunch Chrome to enjoy the subtle changes.

As this is an article about a development feature you should not consider the screenshots or information above as indicative of a final, finished design. Until it rolls out to the stable channel it remains subject to change.

Development News material design