Re-style toolbars to have a light background

css/inverse.css

@@ -1732,11 +1732,11 @@ body {
       padding: 5px;
       height: 29px;
       display: block;
-      background-color: #3AA569; }
+      background-color: #E7FBF0; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
         font-size: 16px;
-        color: white;
+        color: #818479;
         text-decoration: none;
         text-shadow: none; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toolbar-picker-panel a,
@@ -1750,7 +1750,7 @@ body {
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
-        color: white; }
+        color: #818479; }
         #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-picker-panel a,
         #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-picker-panel a,
         #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-picker-panel a,
@@ -1806,7 +1806,7 @@ body {
         margin-left: 0; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley {
-        color: white;
+        color: #818479;
         padding-left: 5px; }
         #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul,
         #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul {
@@ -2686,7 +2686,7 @@ body {
           background-color: #E77051; }
   #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-toolbar,
   #conversejs .chatroom form.sendXMPPMessage .chat-toolbar {
-    background-color: #E77051; }
+    background-color: #FFECE7; }
   #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-textarea,
   #conversejs .chatroom form.sendXMPPMessage .chat-textarea {
     border-bottom-right-radius: 0; }

sass/_chatbox.scss

@@ -267,7 +267,7 @@
                 background-color: $toolbar-color;
                 a {
                     font-size: $font-size;
-                    color: $inverse-link-color;
+                    color: $text-color;
                     text-decoration: none;
                     text-shadow: none;
                 }
@@ -282,7 +282,7 @@
                 }
                 .unencrypted a,
                 .unencrypted {
-                    color: $inverse-link-color;
+                    color: $text-color;
                     .toolbar-picker-panel {
                         a {
                             color: $link-color;
@@ -334,7 +334,7 @@
                     margin-left: 0;
                 }
                 .toggle-smiley {
-                    color: $inverse-link-color;
+                    color: $text-color;
                     padding-left: 5px;
                     ul {
                         left: 0;

sass/_chatrooms.scss

@@ -216,7 +216,7 @@
 
         form.sendXMPPMessage {
             .chat-toolbar {
-                background-color: $chatroom-head-color;
+                background-color: $chatroom-toolbar-color;
             }
             .chat-textarea {
                 border-bottom-right-radius: 0;

sass/converse/_variables.scss

@@ -26,7 +26,10 @@ $orange: #E7A151;
 $dark-orange: #D2842B;
 $darkest-orange: #A56214;
 
-$lightest-green: #8DD8AE;
+$greenish-white: #E7FBF0;
+$reddish-white: #FFECE7;
+
+$lightest-green: #BCEDD1;
 $light-green: #5CBC86;
 $green: #3AA569;
 $dark-green: #1E9652;
@@ -91,7 +94,7 @@ $font-size-large: 16px !default;
 $legend-font-size: 16px !default;
 
 $toolbar-height: 25px !default;
-$toolbar-color: $chat-head-color !default;
+$toolbar-color: $greenish-white !default;
 
 $line-height:  16px !default;
 
@@ -112,6 +115,7 @@ $chatroom-head-color: $red !default;
 $chatroom-color-light: $light-red !default;
 $chatroom-color-dark: $darkest-red !default;
 $chatroom-message-them-color: $green !default;
+$chatroom-toolbar-color: $reddish-white !default;
 
 $headline-head-color: $orange !default;
 

sass/inverse/_variables.scss

@@ -26,7 +26,10 @@ $orange: #E7A151;
 $dark-orange: #D2842B;
 $darkest-orange: #A56214;
 
-$lightest-green: #8DD8AE;
+$greenish-white: #E7FBF0;
+$reddish-white: #FFECE7;
+
+$lightest-green: #E7FBF0;
 $light-green: #5CBC86;
 $green: #3AA569;
 $dark-green: #1E9652;
@@ -95,7 +98,7 @@ $font-size-huge: 26px !default;
 $legend-font-size: 18px !default;
 
 $toolbar-height: 29px !default;
-$toolbar-color: $chat-head-color !default;
+$toolbar-color: $greenish-white !default;
 
 $line-height-small:  20px !default;
 $line-height:  22px !default;
@@ -120,6 +123,7 @@ $chatroom-head-color: $red !default;
 $chatroom-color-light: $light-red !default;
 $chatroom-color-dark: $darkest-red !default;
 $chatroom-message-them-color: $green !default;
+$chatroom-toolbar-color: $reddish-white !default;
 
 $headline-head-color: $orange !default;