Update chat rooms to Material design

Question

The major Material design updates to this site are cool, and increase the look of the site. But, see this comparison:

^{Screenshot of Android Enthusiasts Stack Exchange}

^{Screenshot of Android Enthusiasts Chat Room}

Why wasn't the chat room user interface updated too? The Q&A site is on Lollipop, but the Chat Rooms are on Gingerbread. Too much variation.

---

^{Screenshot of Meta Stack Exchange Chat Room}

The last screenshot of the Meta Stack Exchange Chat Room looks much better, in fact. It uses bright, vibrant colours and makes chatting lively. So, why not update the Android Enthusiasts one too? Moreover, if Ripple Effects or something like that were added, then that would emphasize on our site's popularity and look. More users would like to go through here, and that means more visitors to this website.

Plus, can features be added like 'Online indicators', 'Read indicators', etc. and some design improvements like making the user's text be aligned right and the other users' text be aligned left, in a Hangouts-esque style? That would make this site stand out

Answer 1

While we're waiting for official response from SE designers team, I decided to create a userstyle for main chat room.

It looks like this

You need to install Stylish extension on your browser:

• Firefox
• Chrome
• Safari
• Opera

Here's the CSS rules

.button {
    background: #FF3D00;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    color: #FFF;
    font-family: Roboto, Noto, Verdana, Arial, sans-serif;
    font-weight: bold;
    padding: 8px;
    text-decoration: none;
    text-shadow: none;
    text-transform: uppercase;
}
.button:hover,
.button:active,
.button:focus {
    background: #DD2C00;
}
.mention {
    background-color: #90CAF9;
}
.messages {
    background-color: #FFF;
    color: #000;
}
.mine .messages {
    background-color: #2196F3;
    color: #FFF;
}
.mine div.content>a {
    color: #FFF;
}
.monologue .signature .username {
    font-size: 13px;
    margin: 0;
    padding-bottom: 3px;
}
#feed-ticker {
    background: #323232;
}
#dismiss-ticker {
    color: #FE4336;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
}
#sidebar {
    color: #000;
}
#sidebar #info #roomtitle {
    font-family: Roboto, Noto, Verdana, Arial, sans-serif;
}
#input-area {
    background: #2196F3;
}
input#searchbox.watermark {
    font-family: Roboto, Noto, Verdana, Arial, sans-serif !important;
}
td#footer-legal>a {
    color: #FFF;
}
div#starred-posts>div>ul>li {
    font-size: 13px;
}
div#feed-ticker>h2>a {
    color: #FFF;
    text-decoration: none;
    text-transform: uppercase;
}
div.ticker-item>a {
    color: #FFF !important;
    font-size: 12px;
    text-decoration: none;
}
body {
    font-family: Roboto, Noto, Verdana, Arial, sans-serif;
    font-size: 13px;
    background-color: #EEE;
    color: #FFF;
}
a {
    text-decoration: underline;
    color: #000;
}

Feel free to edit/improve the rules!

Some references to Material Design:

• Color
• Typography