Extensions Blog Press Contribute Support FAQ Videos Changelog About Contact English Dark mode
Chrome extensions you can't live without!
Extensions Blog Press Contribute Support FAQ Videos About Contact

Modern design for the settings pane

It's been a while since Google launched Material 2.0, and I think a compatible design can help a lot with the extension.

Not only is it more visually appealing, with the right UX design you can make the Settings\'Options' screen much more accessible.

Attached a sketch I've created:

Would be glad to help as requested.


  • Wow, that is amazing, i'll definitely use this as a guide.

    My development bottle neck right now is preparing the Gmail extension for manifest v3 - using background persistent false - as i've done with my Calendar extension recently. This means the extension is unloaded from memory when not in use.

  • A simple build I made for the extension popup

  • Great work again, do you have any experience with CSS, because you could use the custom skin to recreate this now. https://jasonsavard.com/wiki/Skins_and_Themes

  • edited May 2020

    So I've created a new dark, so called "Midnight", theme with the limitations I had.

    Unfortunately, I couldn't replace even the 'compose' button to Google's new colorful plus icon (https://i.imgur.com/tZ2cZXy.png) since it's protected under #shadow-root.

    I really do think that the extension could use some changes to make it fit the new standards. I've struggled with the making of this theme.

    CSS code attached below.

  • ah good idea with the + (compose symbol) i used it already in my drive extension, but forgot to propagate it to the other extensions.

    as for your midnight theme, can you send me a screenshot of it?

    redesigns are lovely, but they take a lot of testing because their are many options and different views depending on each user's configuration. So normally I try to proceed incrementally.

  • edited May 2020

    This is an image of the style mentioned above.

  • edited May 2020

    Updated version with some minor fixes:

    • Menus border

    • White search text

    • labels alignment

  • edited May 2020

    Updated with #messagesHidden transition & progress-bar colors

    Same theme can be easily changed to fit any other color scheme.

    For example: This is "Dark Brave" theme-

    * {

      --primary-text-color: #ededed;

      --primary-background-color: #222222;

      --secondary-text-color: #909192;

      --secondary-background-color: #282828;

      --disabled-text-color: #6f6f6f;

      --highlight-background-color: #393939;

      --compose-color: #444444;

      --hover-message-color: #444444;

      --error-color: #d04a48;

      --primary-color: #f15220;

      --accent-color: #f95234;

      --icons: #ffffff;


  • edited May 2020

    Also, I gathered some material design colors which should replace the current contactPhoto colors (especially the current gray which is WAY too bright):

    • Red #E57373

    • Pink #F06292

    • Purple #BA68C8

    • Deep Purple #9575CD

    • Indigo #7986CB

    • Blue #64B5F6

    • Light Blue #4FC3F7

    • Cyan #4DD0E1

    • Teal #4DB6AC

    • Green #81C784

    • Light Green #AED581

    • Lime #DCE775

    • Yellow #FFF176

    • Amber #FFD54F

    • Orange #FFB74D

    • Deep Orange #FF8A65

    • Brown #A1887F

    • Blue Gray #90A4AE

  • @Jason I uploaded the theme to GitHub for future updates.

    Can be found under https://gist.github.com/E-RELevant/e7ab7359acd0c6b72bd4394a6d7a6677

  • It's been a year... or three, since the last time. 🦥

    Is there any update on this one? I would be glad to assist you in making the transition.

This website uses cookies to ensure you get the best experience on our website. More info
Got it!