Friday, February 3, 2017

Enable Google's "Material Design" in Chrome

How to Enable Google’s “Material Design” in Chrome


2017-01-18_15h24_53

Over the last couple of years, Google has been moving towards a unified user experience with its Material Design interface. It started with Android, and we’ve seen many Google Apps—like Drive, Docs, and Sheets—get this clean, modern makeover. Chrome (and, by extension, Chrome OS) has seen touches of Material Design here and there, but many of these design remakes are still in testing.

If you’re looking to modernize the way Chrome looks and feels, however, there are several experimental Material Design elements that can easily be turned on. Each one will have to be activated individually, however, so it is a bit of a painstaking process. We’ll walk you through it.

Keep in mind, there’s a reason these aren’t on by default yet: they’re still basically in “beta.” That means everything may not work perfectly all the time and you may experience more bugs than normal during regular tasks. If you value stability over experimentation, you may want to wait until these are on by default. You can, of course, always change things back to stock if you experience unfortunate results.

Ready? Let’s get started.

First, jump into Chrome’s Flags menu by typing this in Chrome’s address bar:

chrome://flags

Press Enter, and you’ll see a nice warning at the top telling you what to expect from tweaking things in this menu—but everything worth doing has at least some cost, right?

From here, hit Ctrl+F on the keyboard to open the “Search Page” box. In the box, type “material design.” These settings are scattered throughout the page, so it’s much easier to just search for the keywords and tweak them from there.

2017-01-17_15h12_18

There should be about 17 hits for the keywords—don’t worry, though, some of these are duplicates. There are really only ten settings or so, and only eight of them worth changing. To navigate through the list, use the up/down arrows at the end of the search box.

Here’s a quick look all the options you’re going to enable, along with a brief look at what they do:


  • Material design in the rest of the browser’s UI: Since the top chrome is already Material Design themed (since August 2016 or so), this setting will apply the theme to some of the finer details, like dialog boxes, bubbles, and the like. It’s subtle, but worth turning on.
  • Use Material Design user menu: This themes the desktop user menu. Great for Chrome browsers with multiple users, but still worth turning on for single users, if for nothing else but completeness.
  • Enable Material Design policy page: This gives the chrome://policy page a Material makeover. Again, this is for completeness more than anything—when’s the last time you even looked at the policy page, anyway?
  • Enable Material Design bookmarks: This is a much more forward-facing change since it applies to a menu you might actually use. It makes the bookmarks menu look so much prettier:


2017-01-17_15h09_20


  • Enable Material Design feedback: If you have to report an issue, it will now be Material themed.
  • Enable Material history: Just like the bookmarks page, you can give the History menu a pretty makeover. And when it looks better, it’ll work better.
  • Enable Material Design settings: Give the Settings menu a much-needed refresh. This is a big one on Chrome OS, too. You can also check this one out without enabling it by going putting heading to chrome://md-settings in Chrome’s Omnibox.


2017-01-17_15h10_23


  • Enable Material Design Extensions: Give Chrome’s extensions page a fresh coat of paint. It’ll make it easier to read, too.


2017-01-17_15h08_27

Don’t worry about the last two—Security Chip and Security Chip animation—just leave those alone.

As soon as you toggle one of the above-listed settings to “Enabled,” a dialog will show up at the bottom of the screen letting you know that Chrome needs to be restarted before the changes will take place. You don’t have to restart for each setting, though—go ahead and enable them all, then hit the restart button. They’ll all be enabled at once. I like doing things the easy way.

And that’s pretty much that. Chrome should feel a lot more modern with the updated interface, and in some cases it might even improve your workflow—depending on how you use these menus, of course.

Like I said at the beginning, these settings are still basically beta. If you start to notice Chrome acting weird, you might look to these settings as the culprit, especially if you notice the bugginess in one of the tweaked menus. At that point, if you want to revert back to the way things used to be, simply disable all of the settings you enabled earlier.

No comments:

Post a Comment