UI redesign: Change background color.

Fixes: #21750

templates/zerver/app/index.html

@@ -13,7 +13,7 @@
 <style>
     #app-loading {
     font-size: 16px;
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0, 0%, 94%);
     position: fixed;
     height: 100%;
     width: 100%;
@@ -48,7 +48,7 @@
     visibility: hidden;
     }
     :root.dark-theme #app-loading {
-    background-color: hsl(212, 28%, 18%);
+    background-color: hsl(0, 0%, 11%);
     color: hsl(236, 33%, 90%);
     }
     @media (prefers-color-scheme: dark) {

web/styles/compose.css

@@ -52,11 +52,12 @@
 
 /* Main geometry for this element is in zulip.css */
 #compose-content {
-    border-top: 1px solid hsl(0deg 0% 0% / 7%);
+    background-color: hsl(232deg 30% 92%);
     transition: background-color 200ms linear;
     padding: 4px 4px 8px;
-    border-left: 1px solid hsl(0deg 0% 93%);
+    border: 1px solid hsl(0deg 0% 0% / 10%);
-    border-right: 1px solid hsl(0deg 0% 93%);
+    border-radius: 9px 9px 0 0;
+    box-shadow: 0 0 0 hsl(236deg 11% 28%);
     height: 100%;
     display: flex;
     flex-flow: column;
@@ -94,6 +95,10 @@
     flex-flow: column;
 
     .stream-selection-header-colorblock {
+        box-shadow: none;
+        border: 1px solid hsl(0deg 0% 80%);
+        border-right: none;
+
         &.message_header_private_message {
             border-radius: 3px 0 0 3px;
             border-bottom: 0;
@@ -218,8 +223,6 @@
     left: 0;
     z-index: 4;
     width: 100%;
-
-    background-color: hsl(0deg 0% 100%);
 }
 
 #compose-container {
@@ -683,7 +686,7 @@ input.recipient_box {
     }
 
     .divider {
-        color: hsl(0deg 0% 88%);
+        color: hsl(0deg 0% 75%);
         font-size: 20px;
         margin: 0 3px;
     }
@@ -763,7 +766,7 @@ a.compose_control_button.hide {
 
     border: 1px solid hsl(0deg 0% 67%);
     border-radius: 4px;
-    background-color: hsl(0deg 0% 0% / 2%);
+    background-color: hsl(0deg 0% 98%);
     cursor: not-allowed;
 }
 

web/styles/dark_theme.css

@@ -63,9 +63,10 @@
         border-top: 1px solid hsl(0deg 0% 100% / 20%);
     }
 
+    /* Restate this here for more selector specificity */
     .modal-bg,
     .modal__container {
-        background-color: hsl(212deg 28% 18%);
+        background-color: var(--color-background);
     }
 
     .modal__close {
@@ -203,18 +204,14 @@
 
     & body,
     .app-main,
-    .header-main,
     .column-middle,
-    #compose,
-    .column-left .left-sidebar,
-    .column-right .right-sidebar,
     #groups_overlay .right,
     #subscription_overlay .right,
     #settings_page .right,
     #streams_header,
     .private_messages_container,
     .header {
-        background-color: hsl(212deg 28% 18%);
+        background-color: var(--color-background);
     }
 
     #scroll-to-bottom-button-container {
@@ -402,13 +399,6 @@
         color: inherit !important;
     }
 
-    /* It's a little annoying that we need to specify the different
-       background colors for these, but this alert feature can't use a
-       transparent background without creating other problems */
-    .alert-msg {
-        background-color: hsl(212deg 28% 18%);
-    }
-
     .private-message .alert-msg {
         background-color: hsl(208deg 17% 29%);
     }
@@ -499,7 +489,7 @@
     }
 
     & select option {
-        background-color: hsl(212deg 28% 18%);
+        background-color: var(--color-background);
         color: hsl(236deg 33% 90%);
     }
 
@@ -519,6 +509,10 @@
         background-color: hsl(0deg 86% 14%) !important;
     }
 
+    #compose-direct-recipient.pill-container {
+        background-color: hsl(0deg 0% 0% / 20%);
+    }
+
     #search_arrows .pill,
     #compose-direct-recipient.pill-container .pill {
         color: inherit;
@@ -593,12 +587,28 @@
         color: hsl(236deg 33% 90% / 50%);
     }
 
+    #compose-content {
+        background-color: hsl(228deg 11% 17%);
+        border-color: hsl(0deg 0% 0% / 60%);
+    }
+
+    .compose_table .stream-selection-header-colorblock {
+        border-color: hsl(240deg 11% 5%);
+    }
+
     /* Not that .message_row (below) needs to be more contrast on dark theme */
     #compose-content,
+    .message_list .recipient_row,
+    .message_row,
+    .draft-row .draft-info-box,
     .preview_message_area {
         border-color: hsl(0deg 0% 0% / 20%);
     }
 
+    .preview_message_area {
+        background-color: inherit;
+    }
+
     .spectator_narrow_login_button,
     .top-navbar-border {
         border-color: hsl(0deg 0% 0% / 60%);
@@ -748,7 +758,6 @@
     #streamlist-toggle,
     #userlist-toggle {
         color: inherit;
-        border-color: hsl(0deg 0% 0% / 60%);
     }
 
     #streamlist-toggle-button {
@@ -764,31 +773,9 @@
         }
     }
 
-    & li.active-filter,
-    li.active-sub-filter {
-        background-color: hsl(199deg 33% 46% / 20%);
-    }
-
-    :not(.active-sub-filter) {
-        &.top_left_row:hover,
-        &.bottom_left_row:hover,
-        &#stream_filters li.highlighted_stream {
-            background-color: hsl(136deg 25% 73% / 20%);
-        }
-    }
-
-    #stream_filters .narrow-filter.active-filter {
-        .topic-list .filter-topics,
-        > .bottom_left_row {
-            background-color: hsl(208deg 31% 24%);
-        }
-    }
-
     .zoom-in {
-        #topics_header,
+        #topics_header {
-        .narrow-filter > .bottom_left_row,
+            background-color: var(--color-background);
-        #stream_filters .topic-list .filter-topics {
-            background-color: hsl(212deg 28% 18%);
         }
     }
 
@@ -838,12 +825,8 @@
         }
     }
 
-    .recent_topics_container {
-        background-color: hsl(212deg 28% 18%) !important;
-    }
-
     #recent_topics_table tr {
-        background-color: hsl(212deg 28% 18%);
+        background-color: var(--color-background);
 
         &:hover {
             background-color: hsl(208deg 26% 11% / 60%);
@@ -851,12 +834,16 @@
     }
 
     #recent_topics_table .unread_topic {
-        background-color: hsl(212deg 30% 22% / 60%);
+        background-color: hsl(212deg 30% 22% / 40%);
+
+        &:hover {
+            background-color: hsl(212deg 30% 22% / 60%);
+        }
     }
 
     .btn-recent-selected,
     #recent_topics_table thead th {
-        background-color: hsl(0deg 0% 0%) !important;
+        background-color: hsl(228deg 11% 17%) !important;
 
         &[data-sort]:hover {
             background-color: hsl(211deg 29% 14%) !important;
@@ -902,7 +889,7 @@
     }
 
     .table-striped tbody tr:nth-child(odd) td {
-        background-color: hsl(212deg 28% 18%);
+        background-color: var(--color-background);
     }
 
     .user-groups-container .right .display-type,
@@ -938,6 +925,10 @@
         text-shadow: none;
     }
 
+    .unread_marker {
+        left: 0;
+    }
+
     .selected_message .messagebox-content {
         border-color: hsl(217deg 64% 59% / 70%);
     }
@@ -964,8 +955,12 @@
 
         .codehilite code,
         .codehilite pre {
-            color: hsl(212deg 100% 82%);
+            color: hsl(212deg 98% 82%);
-            background-color: hsl(212deg 25% 15%);
+            background-color: hsl(212deg 0% 11%);
+        }
+
+        .codehilite pre {
+            border: 1px solid hsl(0deg 0% 0% / 50%);
         }
 
         .codehilite .hll {
@@ -1350,7 +1345,7 @@
     /* Content: */
     .hotspot.overlay .hotspot-popover .hotspot-popover-content,
     .hotspot.overlay .hotspot-popover .hotspot-popover-bottom {
-        background-color: hsl(212deg 28% 18%);
+        background-color: var(--color-background);
     }
 
     .scheduled-messages-loading-logo,
@@ -1386,13 +1381,20 @@
         background-color: hsl(51deg 100% 23%);
     }
 
+    .streams_subheader {
+        color: hsl(240deg 11% 85%);
+
+        & span::before,
+        span::after {
+            border-color: hsl(240deg 11% 85%);
+        }
+    }
+
     .sub-unsub-message span::before,
     .sub-unsub-message span::after,
     .date_row span::before,
-    .date_row span::after,
+    .date_row span::after {
-    .streams_subheader span::before,
+        opacity: 0.15;
-    .streams_subheader span::after {
-        opacity: 0.5;
         border-bottom: 1px solid hsl(0deg 0% 100%);
     }
 
@@ -1403,7 +1405,7 @@
 
     #bots_lists_navbar .active a {
         color: hsl(0deg 0% 87%);
-        background-color: hsl(212deg 28% 18%);
+        background-color: var(--color-background);
         border-color: hsl(0deg 0% 87%);
         border-bottom-color: transparent;
     }

web/styles/input_pill.css

@@ -114,6 +114,7 @@
     flex-grow: 1;
     align-content: center;
     border: 1px solid hsl(0deg 0% 0% / 20%);
+    background-color: hsl(0deg 0% 100%);
 
     .input {
         height: 20px;

web/styles/left_sidebar.css

@@ -132,7 +132,6 @@ li.show-more-topics {
                     position: sticky;
                     top: calc($sections_vertical_gutter + 43px);
                     z-index: 2;
-                    background-color: hsl(0deg 0% 100%);
                 }
             }
         }
@@ -188,7 +187,6 @@ li.show-more-topics {
 }
 
 .private_messages_container {
-    background: hsl(0deg 0% 100%);
     margin-right: 16px;
     margin-left: 6px;
     z-index: 1;
@@ -303,7 +301,7 @@ li.show-more-topics {
     &.top_left_row:hover,
     &.bottom_left_row:hover,
     &#stream_filters li.highlighted_stream {
-        background-color: hsl(120deg 12.3% 71.4% / 38%);
+        background-color: var(--color-background-hover-narrow-filter);
         border-radius: 4px;
     }
 }
@@ -411,15 +409,15 @@ ul.filters {
 li.active-filter,
 li.active-sub-filter {
     font-weight: 600 !important;
-    background-color: hsl(202deg 56% 91%);
     position: relative;
     border-radius: 4px;
+    background-color: var(--color-background-active-narrow-filter);
 }
 
 #stream_filters .narrow-filter.active-filter {
     .topic-list .filter-topics,
     > .bottom_left_row {
-        background-color: hsl(202deg 56% 91%);
+        background-color: var(--color-background-active-narrow-filter);
         border-radius: 4px;
     }
 }
@@ -661,11 +659,11 @@ li.topic-list-item {
 #topics_header {
     position: sticky;
     top: 0;
-    background-color: hsl(0deg 0% 100%);
     z-index: 2;
     margin-right: 10px;
     padding-top: $sections_vertical_gutter;
     color: hsl(0deg 0% 43%);
+    background-color: var(--color-background);
 
     .show-all-streams {
         color: inherit;
@@ -686,10 +684,10 @@ li.topic-list-item {
     cursor: pointer;
     padding: $sections_vertical_gutter 0 3px calc($far_left_gutter_size + 2px);
     position: sticky;
+    background-color: var(--color-background);
     /* Ideally, 0px should work here, but maybe simplebar is doing something
        that is creating `0.5px` extra gap in zoomed-in windows. */
     top: -0.5px;
-    background: hsl(0deg 0% 100%);
     z-index: 1;
 
     & input {
@@ -704,6 +702,7 @@ li.topic-list-item {
     cursor: pointer;
     text-align: center;
     margin-right: 12px;
+    color: hsl(240deg 10% 50%);
 
     & span {
         display: flex;
@@ -720,8 +719,8 @@ li.topic-list-item {
         flex: 1 1;
         vertical-align: middle;
         margin: auto;
-        border-top: 1px solid hsl(0deg 0% 88%);
+        border: 0.5px solid hsl(240deg 10% 50%);
-        border-bottom: 1px solid hsl(0deg 0% 100%);
+        opacity: 0.2;
     }
 
     & span::before {
@@ -763,7 +762,7 @@ li.topic-list-item {
         top: calc($sections_vertical_gutter + 20px);
         z-index: 2;
         padding-bottom: 1px;
-        background-color: hsl(0deg 0% 100%);
+        background-color: var(--color-background);
     }
 
     #subscribe-to-more-streams,

web/styles/recent_topics.css

@@ -1,7 +1,6 @@
 .recent_topics_container {
     padding: 0;
     border-radius: 4px;
-    background-color: hsl(0deg 0% 100%);
     overflow: hidden;
     display: flex;
     flex-direction: column;

web/styles/right_sidebar.css

@@ -193,7 +193,6 @@ $user_status_emoji_width: 24px;
     right: 0;
     text-align: center;
     vertical-align: middle;
-    border-left: 1px solid hsl(0deg 0% 88%);
 }
 
 #userlist-toggle-button {

web/styles/zulip.css

@@ -8,6 +8,11 @@ html {
     touch-action: manipulation;
 }
 
+.column-middle,
+#main_div {
+    background-color: var(--color-background);
+}
+
 #app-loading.loaded {
     display: none !important; /* We are now loaded, by definition. */
 }
@@ -18,10 +23,9 @@ body {
     font-family: "Source Sans 3", sans-serif;
 }
 
-/* Common background color */
 body,
 #message_view_header_underpadding {
-    background-color: hsl(0deg 0% 100%);
+    background-color: var(--color-background);
     transition: background-color 200ms linear;
 }
 
@@ -61,15 +65,22 @@ body,
     --color-background-private-message-header: hsl(46deg 35% 93%);
     --color-text-private-message-header: hsl(0deg 0% 100%);
     --color-background-private-message-content: hsl(45deg 20% 96%);
+    --color-background-stream-message-content: hsl(0deg 0% 100%);
     --color-text-message-header: hsl(0deg 0% 15%);
-    --color-message-list-border: hsl(0deg 0% 80%);
+    --color-message-list-border: hsl(0deg 0% 0% / 10%);
+    --color-message-header-contents-border: hsl(0deg 0% 0% / 5%);
     --color-message-header-icon-non-interactive: hsl(0deg 0% 0% / 30%);
     --color-message-header-icon-interactive: hsl(0deg 0% 0%);
-    --color-background: hsl(0deg 0% 100%);
+    --color-background: hsl(0deg 0% 94%);
     --color-background-direct-mention: hsl(240deg 52% 95%);
     --color-background-group-mention: hsl(180deg 40% 94%);
     --color-background-dropdown-input: hsl(0deg 0% 100%);
     --color-text-dropdown-input: hsl(0deg 0% 13.33%);
+    --color-background-navbar: hsl(0deg 0% 96%);
+    --color-background-active-narrow-filter: hsl(202deg 56% 91%);
+    --color-background-hover-narrow-filter: hsl(120deg 12.3% 71.4% / 38%);
+    --color-navbar-bottom-border: hsl(0deg 0% 80%);
+    --color-unread-marker: hsl(217deg 100% 50%);
 }
 
 %dark-theme {
@@ -78,15 +89,21 @@ body,
     --color-background-private-message-header: hsl(46deg 15% 20%);
     --color-text-private-message-header: hsl(0deg 0% 100%);
     --color-background-private-message-content: hsl(46deg 10% 15%);
+    --color-background-stream-message-content: hsl(0deg 0% 14%);
     --color-text-message-header: hsl(0deg 0% 100%);
     --color-message-header-icon-non-interactive: hsl(0deg 0% 100% / 30%);
     --color-message-header-icon-interactive: hsl(0deg 0% 100%);
-    --color-message-list-border: hsl(0deg 0% 7%);
+    --color-message-header-contents-border: hsl(0deg 0% 0% / 60%);
-    --color-background: hsl(212deg 28% 18%);
+    --color-background: hsl(0deg 0% 11%);
     --color-background-direct-mention: hsl(240deg 13% 20%);
     --color-background-group-mention: hsl(180deg 13% 15%);
     --color-background-dropdown-input: hsl(225deg 6% 10%);
     --color-text-dropdown-input: hsl(0deg 0% 95%);
+    --color-background-navbar: hsl(0deg 0% 13%);
+    --color-background-active-narrow-filter: hsl(200deg 17% 18%);
+    --color-background-hover-narrow-filter: hsl(136deg 25% 73% / 20%);
+    --color-navbar-bottom-border: hsl(0deg 0% 0% / 60%);
+    --color-unread-marker: hsl(217deg 100% 60%);
 }
 
 :root.dark-theme {
@@ -305,11 +322,15 @@ p.n-margin {
     width: 100%;
     height: var(--header-height);
     /* Since the headers are sticky, we need non-transparent background. */
-    background-color: hsl(0deg 0% 100%);
+    background-color: var(--color-background);
 }
 
-#top_navbar {
+#navbar-middle .column-middle-inner,
-    border-bottom: 1px solid hsl(0deg 0% 0% / 20%);
+#userlist-toggle-button,
+.header-main,
+#message_view_header {
+    background-color: var(--color-background-navbar);
+    box-shadow: inset 0 -1px 0 var(--color-navbar-bottom-border);
 }
 
 #navbar_alerts_wrapper {
@@ -434,7 +455,6 @@ p.n-margin {
     margin: 0 auto;
     padding: 0;
     position: relative;
-    background-color: hsl(0deg 0% 100%);
 }
 
 .column-right {
@@ -970,7 +990,6 @@ td.pointer {
    but it works. */
 .alert-msg {
     color: hsl(170deg 48% 54%);
-    background-color: hsl(0deg 0% 100%);
     z-index: 999;
     font-weight: 400;
     display: none;
@@ -1138,7 +1157,7 @@ td.pointer {
         align-items: center;
         justify-content: space-between;
         height: 28px;
-        border: 1px solid var(--color-message-list-border);
+        border: 1px solid var(--color-message-header-contents-border);
         border-radius: 7px 7px 0 0;
     }
 
@@ -1453,6 +1472,7 @@ td.pointer {
     z-index: 2;
     bottom: 1px;
     transition: all 0.3s ease-out;
+    left: -1px;
 
     &.slow_fade {
         transition: all 2s ease-out;
@@ -1464,7 +1484,7 @@ td.pointer {
 }
 
 .unread-marker-fill {
-    border-left: 2px solid hsl(107deg 74% 29%);
+    border-left: 2px solid var(--color-unread-marker);
     height: 100%;
 }
 
@@ -1581,6 +1601,7 @@ div.message_table {
     position: relative;
     border-left: 1px solid var(--color-message-list-border);
     border-right: 1px solid var(--color-message-list-border);
+    background-color: var(--color-background-stream-message-content);
 
     &.group_mention {
         background-color: var(--color-background-group-mention);
@@ -1591,9 +1612,9 @@ div.message_table {
     }
 
     .date_row {
+        background-color: var(--color-background-stream-message-content);
         /* We only want padding for the date rows between recipient blocks */
         padding-bottom: 0;
-        background-color: var(--color-background);
 
         & span {
             font-size: calc(12em / 14);
@@ -1813,11 +1834,6 @@ div.focused_table {
     font-weight: bold;
 }
 
-.top-navbar-border {
-    border-right: 1px solid hsl(0deg 0% 88%);
-    border-left: 1px solid hsl(0deg 0% 88%);
-}
-
 .search_icon {
     /* These rules match the .dropdown-toggle CSS for the gear menu. */
     color: inherit;
@@ -2071,7 +2087,6 @@ div.focused_table {
     color: hsl(0deg 0% 52%);
     display: block;
     position: relative;
-    background-color: hsl(0deg 0% 89%);
     width: 40px;
     height: 19px;
     padding-top: 12px;
@@ -2729,7 +2744,6 @@ select.invite-as {
             top: 0;
 
             .right-sidebar {
-                background-color: hsl(0deg 0% 100%);
                 box-shadow: 0 -2px 3px 0 hsl(0deg 0% 0% / 10%);
                 border-left: 1px solid hsl(0deg 0% 87%);
 
@@ -2740,6 +2754,7 @@ select.invite-as {
                 padding: var(--header-padding-bottom) 15px 0 15px;
                 height: 100%;
                 right: 0;
+                background-color: var(--color-background);
             }
         }
     }
@@ -2791,7 +2806,7 @@ select.invite-as {
             top: 0;
 
             .left-sidebar {
-                background-color: hsl(0deg 0% 100%);
+                background-color: var(--color-background);
                 box-shadow: 0 2px 3px 0 hsl(0deg 0% 0% / 10%);
                 border-right: 1px solid hsl(0deg 0% 87%);