factor out some more colours

src/skins/vector/css/_common.scss

@@ -174,13 +174,13 @@ textarea {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: #e9e9e9;
+    background-color: $dialog-background-bg-color;
     opacity: 0.8;
 }
 
 .mx_Dialog_lightbox .mx_Dialog_background {
     opacity: 0.85;
-    background-color: #000;
+    background-color: $lightbox-background-bg-color;
 }
 
 .mx_Dialog_lightbox .mx_Dialog {

src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss

@@ -58,7 +58,7 @@ limitations under the License.
     clear: both;
     margin-left: 63px;
     text-transform: uppercase;
-    color: #3d3b39;
+    color: $h3-color;
     font-weight: 600;
     font-size: 13px;
     margin-top: 26px;
@@ -166,10 +166,10 @@ limitations under the License.
 {
     display: inline-block;
     border: 0px;
-    border-bottom: 1px solid rgba(151, 151, 151, 0.5);
+    border-bottom: 1px solid $input-underline-color;
     padding: 0px;
     width: 240px;
-    color: rgba(74, 74, 74, 0.9);
+    color: $input-fg-color;
     font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
     font-size: 16px;
 }

src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss

@@ -147,7 +147,7 @@ limitations under the License.
 }
 
 .mx_Login_error {
-    color: #ff2020;
+    color: $warning-color;
     font-weight: bold;
     text-align: center;
 /*

src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss

@@ -44,7 +44,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
     padding: 3px;
     padding-left: 10px;
     padding-right: 10px;
-    background-color: #efefef;
+    background-color: $plinth-bg-color;
     border-radius: 3px;
     background-image: url('img/icon-return.svg');
     background-position: 8px 70%;

src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss

@@ -16,10 +16,10 @@ limitations under the License.
 
 .mx_ProgressBar {
     height: 5px;
-    border: 1px solid black;
+    border: 1px solid $progressbar-color;
 }
 
 .mx_ProgressBar_fill {
     height: 100%;
-    background-color: #000;
+    background-color: $progressbar-color;
 }

src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss

@@ -61,7 +61,7 @@ limitations under the License.
 
 .mx_MemberInfo h3 {
     text-transform: uppercase;
-    color: #3d3b39;
+    color: $h3-color;
     font-weight: 600;
     font-size: 13px;
     margin-top: 16px;

src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss

@@ -96,7 +96,7 @@ limitations under the License.
 
 .mx_MemberList_invited h2 {
     text-transform: uppercase;
-    color: #3d3b39;
+    color: $h3-color;
     font-weight: 600;
     font-size: 13px;
     padding-left: 3px;

src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss

@@ -81,7 +81,7 @@ limitations under the License.
 
 .mx_RoomSettings h3 {
     text-transform: uppercase;
-    color: #3d3b39;
+    color: $h3-color;
     font-weight: 600;
     font-size: 13px;
     margin-top: 36px;

src/skins/vector/css/themes/_base.scss

@@ -1,5 +1,4 @@
 
-
 // typical text (dark-on-white in light skin)
 $primary-fg-color: #454545;
 $primary-bg-color: #ffffff;
@@ -20,6 +19,12 @@ $warning-color: #ff0064;
 // left-panel style muted accent color
 $secondary-accent-color: #eaf5f0;
 
+// used by RoomDirectory permissions
+$plinth-bg-color: $secondary-accent-color;
+
+// used by RoomDropTarget
+$droptarget-bg-color: rgba(255,255,255,0.5);
+
 // used by AddressSelector
 $selected-color: #eaf5f0;
 
@@ -35,18 +40,27 @@ $input-border-color: #f0f0f0;
 // apart from login forms, which have stronger border
 $strong-input-border-color: #c7c7c7;
 
+// used for UserSettings EditableText
+$input-underline-color: rgba(151, 151, 151, 0.5);
+$input-fg-color: rgba(74, 74, 74, 0.9);
+
 // context menus
 $menu-border-color: rgba(187, 187, 187, 0.5);
 $menu-bg-color: #f6f6f6;
 
 $avatar-initial-color: #ffffff;
 
+$h3-color: #3d3b39;
+
+$dialog-background-bg-color: #e9e9e9;
+$lightbox-background-bg-color: #000;
+
 // ********************
 
 $roomtile-name-color: rgba(69, 69, 69, 0.8);
 $roomtile-selected-bg-color: rgba(255, 255, 255, 0.8);
 
-$roomsublist-label-fg-color: #3d3b39;
+$roomsublist-label-fg-color: $h3-color;
 $roomsublist-label-bg-color: #d3efe1;
 
 // ********************
@@ -64,8 +78,10 @@ $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
 $e2e-unverified-color: #e8bf37;
 $e2e-warning-color: #ba6363;
 
-// ********************
+/*** ImageView ***/
-
 $lightbox-bg-color: #454545;
 $lightbox-fg-color: #ffffff;
 $lightbox-border-color: #ffffff;
+
+// unused?
+$progressbar-color: #000;

src/skins/vector/css/themes/_dark.scss

@@ -19,6 +19,12 @@ $warning-color: #ff0064;
 // left-panel style muted accent color
 $secondary-accent-color: $primary-bg-color;
 
+// used by RoomDirectory permissions
+$plinth-bg-color: #474747;
+
+// used by RoomDropTarget
+$droptarget-bg-color: rgba(45,45,45,0.5);
+
 // used by AddressSelector
 $selected-color: #eaf5f0;
 
@@ -34,18 +40,27 @@ $input-border-color: #3a3a3a;
 // apart from login forms, which have stronger border
 $strong-input-border-color: #656565;
 
+// used for UserSettings EditableText
+$input-underline-color: $primary-fg-color;
+$input-fg-color: $primary-fg-color;
+
 // context menus
 $menu-border-color: rgba(187, 187, 187, 0.5);
 $menu-bg-color: #373737;
 
 $avatar-initial-color: #2d2d2d;
 
+$h3-color: $primary-fg-color;
+
+$dialog-background-bg-color: #000;
+$lightbox-background-bg-color: #000;
+
 // ********************
 
 $roomtile-name-color: rgba(186, 186, 186, 0.8);
 $roomtile-selected-bg-color: rgba(0, 0, 0, 0.8);
 
-$roomsublist-label-fg-color: $primary-fg-color;
+$roomsublist-label-fg-color: $h3-color;
 $roomsublist-label-bg-color: #454545;
 
 // ********************
@@ -67,3 +82,6 @@ $e2e-warning-color: #ba6363;
 $lightbox-bg-color: #454545;
 $lightbox-fg-color: #ffffff;
 $lightbox-border-color: #ffffff;
+
+// unused?
+$progressbar-color: #000;

src/skins/vector/css/vector-web/structures/_RoomDirectory.scss

@@ -110,7 +110,7 @@ limitations under the License.
     padding-right: 5px;
     height: 15px;
     border-radius: 11px;
-    background-color: $secondary-accent-color;
+    background-color: $plinth-bg-color;
     text-transform: uppercase;
     font-weight: 600;
     font-size: 11px;

src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss

@@ -24,7 +24,7 @@ limitations under the License.
     padding-bottom: 5px;
     border: 1px dashed $accent-color;
     color: $primary-fg-color;
-    background-color: rgba(255,255,255,0.5);
+    background-color: $droptarget-bg-color;
     border-radius: 4px;
 }