Material Design is a user interface concept introduced by Google during 2014. Let us not go into too much technical details of Material Design, this basically uses card (similar to card in Bootstrap 4) and makes fully responsive layout based on grids. If you are a long time user of Google products then you might have noticed most of the products like Gmail, YouTube, Google+, etc. are changed to a new interface in recent years.
Material Design in Google Chrome
Unlike other applications, Google only changed the base Chrome design to use Material Design. Though most of pages including Settings page is changed to adapt to new Material Design concept, it is yet to be done completely throughout the browser.
In this article let us explain how to use Material Design in Google Chrome.
How to Use Material Design in Google Chrome?
Go to command URL “chrome://flags/” in Chrome and enter “material design” in the “Search flags” search box. You will see all available and unavailable experiments based on your OS and Chrome version.
Test Material Design in Chrome
Let us try to enable Material Design for Extensions section. Before that go to “chrome://extensions/” which should look like below.
Now come back to the flags section and look for “Enable Material Design extensions” flag. Choose “Enabled” from the dropdown and you will be prompted to relaunch the browser.
Click on the “Relaunch Now” button to close and reopen Chrome. All tabs will reopen again but you need to login to the sites again in case if you were previously logged in. Now go to extensions page “chrome://extensions/” again. It should look elegantly like below with Material Design boxes.
Other Material Design Flags
On Chrome version 64 and later, we could see the following experimental flags:
1. Material Design in the rest of the browser’s native UI
The basic UI of Chrome is already using Material Design concept. Enabling this flag will extend the functionality to other secondary features like bubbles, dialog box, etc.
2. Enable Material Design bookmarks
By default, Chrome uses Material Design view for the bookmarks section. So, you don’t need to explicitly enable this flag.
3. Enable Material Design extensions
This is the option we have explained above. It will change the “chrome://extensions” URL to load in Material Design view.
4. Enable Material Design download shelf – only for Mac
If this option is enabled, the download section will load with Material Design view.
5. Material Design Incognito NTP – only for Android
This option will not be available on desktops as it is applicable only on Android devices. Enabling this flag will make the incognito pages better readable text.
Disable Material Design in Chrome
Currently Chrome uses Material Design as a base UI but still there are some pages using the normal view. You can soon expect, Google will completely update Chrome’s UI to Material Design in later versions. Till the time the experimental flags are available, you can disable Material Design on the selected components like Bookmarks and Extensions.
As explained above, go to the “chrome://flags/” section. Choose “Disabled” option for the flag “Material Design bookmarks” and relaunch Chrome. Now go to “chrome://bookmarks” and check your bookmarks section. It should be showing back with the normal view without Material Design.
Caution with Using Flags
Flags are experimental features that may affect the use of Chrome. You will see the warning shown below when accessing the flags section. So play with flags only if you want to enable or disable the features.
Material Design Themes and Extensions for Chrome
Go to the Chrome Web Store and search for “material design” to see hundreds of themes and extensions. There is a “Elegant New Tab” extension to change the look of the new tab. If the default Google search box view on new tabs bored you, then this one will make you excited showing cards in a simple view.
On other hand, you can install Material Design based themes like “Material Dark” to change the look of the browser.
