diff --git a/zephyr/static/js/narrow.js b/zephyr/static/js/narrow.js
index 3208993c84..8625c0a2d4 100644
--- a/zephyr/static/js/narrow.js
+++ b/zephyr/static/js/narrow.js
@@ -434,7 +434,7 @@ exports.activate = function (operators, opts) {
     });
 
     // Show the new set of messages.
-    $("#main_div").addClass("narrowed_view");
+    $("body").addClass("narrowed_view");
     $("#zfilt").addClass("focused_table");
     $("#zhome").removeClass("focused_table");
 
@@ -527,8 +527,7 @@ exports.deactivate = function () {
 
     exports.hide_empty_narrow_message();
 
-    $("#main_div").removeClass('narrowed_view');
-    $("#searchbox").removeClass('narrowed_view');
+    $("body").removeClass('narrowed_view');
     $("#zfilt").removeClass('focused_table');
     $("#zhome").addClass('focused_table');
 
diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css
index 5f1b86cb3e..cfca205399 100644
--- a/zephyr/static/styles/zephyr.css
+++ b/zephyr/static/styles/zephyr.css
@@ -6,6 +6,20 @@ body {
 /* Common background color */
 body, #tab_bar, #tab_bar_underpadding, .message_list, .message_comp {
     background-color: #f8f9f8;
+   -webkit-transition: background-color 200ms linear;
+   -moz-transition: background-color 200ms linear;
+   -o-transition: background-color 200ms linear;
+   -ms-transition: background-color 200ms linear;
+   transition: background-color 200ms linear;
+}
+
+body.narrowed_view, .narrowed_view #tab_bar, .narrowed_view #tab_bar_underpadding, .narrowed_view .message_list, .narrowed_view .message_comp {
+    background-color: #f0f8ff;
+   -webkit-transition: background-color 200ms linear;
+   -moz-transition: background-color 200ms linear;
+   -o-transition: background-color 200ms linear;
+   -ms-transition: background-color 200ms linear;
+   transition: background-color 200ms linear;
 }