Merge pull request matrix-org#4756 from matrix-org/travis/room-list/dark

Initial dark theme support for new room list

Author: turt2live

res/css/structures/_LeftPanel2.scss

@@ -16,12 +16,10 @@ limitations under the License.
 
 // TODO: Rename to mx_LeftPanel during replacement of old component
 
-// TODO: Put these variables in the right place, or namespace them.
-$tagPanelWidth: 70px;
-$roomListMinimizedWidth: 50px;
+$tagPanelWidth: 70px; // only applies in this file, used for calculations
 
 .mx_LeftPanel2 {
-    background-color: $header-panel-bg-color;
+    background-color: $roomlist2-bg-color;
     min-width: 260px;
     max-width: 50%;
 
@@ -108,7 +106,7 @@ $roomListMinimizedWidth: 50px;
                 width: 28px;
                 height: 28px;
                 border-radius: 20px;
-                background-color: #fff; // TODO: Variable and theme
+                background-color: $roomlist2-button-bg-color;
                 position: relative;
                 margin-left: 8px;
 

res/css/structures/_RoomSearch.scss

@@ -18,7 +18,7 @@ limitations under the License.
 .mx_RoomSearch {
     flex: 1;
     border-radius: 20px;
-    background-color: #fff; // TODO: Variable & theme
+    background-color: $roomlist2-button-bg-color;
     height: 26px;
     padding: 2px;
 

res/css/structures/_UserMenuButton.scss

@@ -19,7 +19,7 @@ limitations under the License.
 }
 
 .mx_UserMenuButton_contextMenu {
-    width: 231px;
+    width: 247px;
 
     .mx_UserMenuButton_contextMenu_header {
         // Create a flexbox to organize the header a bit easier

res/css/views/rooms/_NotificationBadge.scss

@@ -27,7 +27,7 @@ limitations under the License.
     //     ^- The count is an element floating within that.
 
     &.mx_NotificationBadge_visible {
-        background-color: $roomtile2-badge-color;
+        background-color: $roomtile2-default-badge-bg-color;
 
         // Create a flexbox to order the count a bit easier
         display: flex;

res/css/views/rooms/_RoomSublist2.scss

@@ -108,7 +108,7 @@ limitations under the License.
 
             // This is the same color as the left panel background because it needs
             // to occlude the lastmost tile in the list.
-            background-color: $header-panel-bg-color;
+            background-color: $roomlist2-bg-color;
 
             // Update the render() function for RoomSublist2 if these change
             // Update the ListLayout class for minVisibleTiles if these change.
@@ -198,7 +198,7 @@ limitations under the License.
                 height: 24px;
                 margin-left: 16px;
                 visibility: visible;
-                background-color: #fff; // TODO: Variable and theme
+                background-color: $roomlist2-button-bg-color;
             }
         }
     }
@@ -226,7 +226,7 @@ limitations under the License.
                 width: 32px !important; // !important to override hover styles
                 height: 32px !important; // !important to override hover styles
                 margin-left: 0 !important; // !important to override hover styles
-                background-color: #fff; // TODO: Variable and theme
+                background-color: $roomlist2-button-bg-color;
                 margin-top: 8px;
 
                 &::before {
@@ -261,7 +261,7 @@ limitations under the License.
 
                 // This is the same color as the left panel background because it needs
                 // to occlude the sublist title
-                background-color: $header-panel-bg-color;
+                background-color: $roomlist2-bg-color;
 
                 &::before {
                     top: 0;

res/themes/dark/css/_dark.scss

@@ -103,6 +103,24 @@ $eventtile-meta-color: $roomtopic-color;
 
 $header-divider-color: $header-panel-text-primary-color;
 
+// ********************
+
+// V2 Room List
+// TODO: Remove the 2 from all of these when the new list takes over
+
+$theme-button-bg-color: #e3e8f0;
+
+$roomlist2-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons
+$roomlist2-bg-color: $header-panel-bg-color;
+
+$roomsublist2-divider-color: #e9eaeb;
+
+$roomtile2-preview-color: #9e9e9e;
+$roomtile2-default-badge-bg-color: #61708b;
+$roomtile2-selected-bg-color: #1A1D23;
+
+// ********************
+
 $roomtile-name-color: $header-panel-text-primary-color;
 $roomtile-selected-color: $text-primary-color;
 $roomtile-notified-color: $text-primary-color;

res/themes/light/css/_light.scss

@@ -172,14 +172,22 @@ $header-divider-color: #91A1C0;
 
 // ********************
 
-// TODO: Update variables for new room list
-// TODO: Dark theme
-$roomtile2-preview-color: #9e9e9e;
-$roomtile2-badge-color: #61708b;
-$roomtile2-selected-bg-color: #FFF;
+// V2 Room List
+// TODO: Remove the 2 from all of these when the new list takes over
+
 $theme-button-bg-color: #e3e8f0;
+
+$roomlist2-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
+$roomlist2-bg-color: $header-panel-bg-color;
+
 $roomsublist2-divider-color: #e9eaeb;
 
+$roomtile2-preview-color: #9e9e9e;
+$roomtile2-default-badge-bg-color: #61708b;
+$roomtile2-selected-bg-color: #FFF;
+
+// ********************
+
 $roomtile-name-color: #61708b;
 $roomtile-badge-fg-color: $accent-fg-color;
 $roomtile-selected-color: #212121;