From c6beaa16318d005f0548f19f2dc956e17c60f1de Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 28 Dec 2016 04:04:43 +0000
Subject: [PATCH] initial stab at an official dark theme via the magic of SASS.
 SVGs are all broken, and some of the more exotic colours haven't been
 updated. There's been no attempt to use SASS to remove duplication from the
 CSS yet. no attempt to switch it at runtime yet.

---
 src/skins/vector/css/_common.scss             | 51 +++++++-------
 src/skins/vector/css/_components.scss         |  1 +
 .../structures/_ContextualMenu.scss           | 14 ++--
 .../structures/_CreateRoom.scss               |  4 +-
 .../structures/_FilePanel.scss                | 10 +--
 .../structures/_MatrixChat.scss               |  4 +-
 .../structures/_NotificationPanel.scss        |  7 +-
 .../structures/_RoomStatusBar.scss            | 16 ++---
 .../structures/_RoomView.scss                 | 24 +++----
 .../structures/_UploadBar.scss                |  6 +-
 .../structures/_UserSettings.scss             |  6 +-
 .../structures/login/_Login.scss              | 14 ++--
 .../views/avatars/_BaseAvatar.scss            |  2 +-
 .../views/dialogs/_ChatInviteDialog.scss      |  4 +-
 .../views/dialogs/_EncryptedEventDialog.scss  |  6 +-
 .../views/dialogs/_SetDisplayNameDialog.scss  |  6 +-
 .../views/elements/_AddressSelector.scss      | 16 ++---
 .../views/elements/_AddressTile.scss          |  8 +--
 .../views/elements/_DirectorySearchBox.scss   |  2 +-
 .../elements/_MemberEventListSummary.scss     |  2 +-
 .../views/elements/_RichText.scss             |  6 +-
 .../views/login/_ServerConfig.scss            |  2 +-
 .../views/messages/_MImageBody.scss           |  8 +--
 .../views/rooms/_Autocomplete.scss            | 12 ++--
 .../views/rooms/_EntityTile.scss              |  6 +-
 .../views/rooms/_EventTile.scss               | 34 +++++-----
 .../views/rooms/_MemberDeviceInfo.scss        | 14 ++--
 .../views/rooms/_MemberInfo.scss              |  4 +-
 .../views/rooms/_MemberList.scss              | 10 +--
 .../views/rooms/_MessageComposer.scss         | 10 +--
 .../views/rooms/_RoomHeader.scss              | 16 ++---
 .../views/rooms/_RoomPreviewBar.scss          |  4 +-
 .../views/rooms/_RoomSettings.scss            | 18 ++---
 .../views/rooms/_RoomTile.scss                | 14 ++--
 .../views/rooms/_SearchableEntityList.scss    | 10 +--
 .../views/rooms/_TabCompleteBar.scss          |  6 +-
 .../views/rooms/_TopUnreadMessagesBar.scss    |  2 +-
 .../views/settings/_IntegrationsManager.scss  |  2 +-
 .../views/voip/_CallView.scss                 |  4 +-
 .../views/voip/_IncomingCallbox.scss          |  4 +-
 src/skins/vector/css/rethemendex.sh           |  2 +-
 src/skins/vector/css/themes/_base.scss        | 68 +++++++++++++++++++
 src/skins/vector/css/themes/dark.scss         | 66 +++++++++++++++++-
 src/skins/vector/css/themes/light.scss        |  6 +-
 .../vector-web/structures/_RightPanel.scss    | 10 +--
 .../vector-web/structures/_RoomDirectory.scss |  6 +-
 .../vector-web/structures/_RoomSubList.scss   | 36 +++++-----
 .../context_menus/_RoomTagContextMenu.scss    |  2 +-
 .../views/directory/_NetworkDropdown.scss     |  6 +-
 .../vector-web/views/elements/_ImageView.scss |  8 +--
 .../views/globals/_GuestWarningBar.scss       |  6 +-
 .../views/globals/_MatrixToolbar.scss         |  6 +-
 .../views/rooms/_RoomDropTarget.scss          |  6 +-
 .../vector-web/views/rooms/_RoomTooltip.scss  | 12 ++--
 .../vector-web/views/rooms/_SearchBar.scss    | 14 ++--
 .../views/settings/_Notifications.scss        |  2 +-
 src/vector/index.js                           |  2 +-
 57 files changed, 388 insertions(+), 259 deletions(-)
 create mode 100644 src/skins/vector/css/themes/_base.scss

diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss
index bb00bbd8c0..e81ea2fa6d 100644
--- a/src/skins/vector/css/_common.scss
+++ b/src/skins/vector/css/_common.scss
@@ -29,7 +29,8 @@ body {
        Arial here. */
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     font-size: 15px;
-    color: #454545;
+    background-color: $primary-bg-color;
+    color: $primary-fg-color;
     border: 0px;
     margin: 0px;
     /* This should render the fonts the same accross browsers */
@@ -41,7 +42,7 @@ div.error {
 }
 
 h2 {
-    color: #454545;
+    color: $primary-fg-color;
     font-weight: 400;
     font-size: 18px;
     margin-top: 16px;
@@ -51,7 +52,7 @@ h2 {
 a:hover,
 a:link,
 a:visited {
-    color: #76cfa6;
+    color: $accent-color;
 }
 
 input[type=text].error, input[type=password].error {
@@ -59,7 +60,7 @@ input[type=text].error, input[type=password].error {
 }
 
 input[type=text]:focus, textarea:focus {
-    border: 1px solid #76CFA6;
+    border: 1px solid $accent-color;
     outline: none;
     box-shadow: none;
 }
@@ -148,8 +149,8 @@ textarea {
 }
 
 .mx_Dialog {
-    background-color: #fff;
-    color: #747474;
+    background-color: $primary-bg-color;
+    color: $light-fg-color;
     z-index: 4010;
     font-weight: 300;
     font-size: 15px;
@@ -190,7 +191,7 @@ textarea {
 .mx_Dialog_content {
     margin: 24px 58px 68px 0;
     font-size: 14px;
-    color: #4a4a4a;
+    color: $primary-fg-color;
     word-wrap: break-word;
 }
 
@@ -202,7 +203,7 @@ textarea {
     border: 0px;
     height: 36px;
     border-radius: 40px;
-    border: solid 1px #76cfa6;
+    border: solid 1px $accent-color;
     font-weight: 600;
     font-size: 14px;
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
@@ -212,26 +213,26 @@ textarea {
     padding-right: 1.5em;
     outline: none;
     cursor: pointer;
-    color: #76cfa6;
-    background-color: #fff;
+    color: $accent-color;
+    background-color: $primary-bg-color;
 
     /* align images in buttons (eg spinners) */
     vertical-align: middle;
 }
 
 .mx_Dialog button.mx_Dialog_primary, .mx_Dialog  input[type="submit"].mx_Dialog_primary {
-    color: #fff;
-    background-color: #76cfa6;
+    color: $accent-fg-color;
+    background-color: $accent-color;
 }
 
 .mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger {
-    background-color: #ff0064;
-    border: solid 1px #ff0064;
+    background-color: $warning-color;
+    border: solid 1px $warning-color;
 }
 
 .mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled {
-    background-color: #777777;
-    border: solid 1px #777777;
+    background-color: $light-fg-color;
+    border: solid 1px $light-fg-color;
     opacity: 0.7;
 }
 
@@ -241,11 +242,11 @@ textarea {
     font-weight: bold;
     font-size: 22px;
     line-height: 1.4;
-    color: #454545;
+    color: $primary-fg-color;
 }
 
 .mx_Dialog_title.danger {
-    color: #ff0064;
+    color: $warning-color;
 }
 
 .mx_TextInputDialog_label {
@@ -256,10 +257,10 @@ textarea {
 .mx_TextInputDialog_input {
     font-size: 15px;
     border-radius: 3px;
-    border: 1px solid #f0f0f0;
+    border: 1px solid $input-border-color;
     padding: 9px;
-    color: #454545;
-    background-color: #fff;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
 }
 
 .mx_emojione {
@@ -268,19 +269,19 @@ textarea {
 }
 
 ::-moz-selection {
-    background-color: #76CFA6;
+    background-color: $accent-color;
     color: white;
 }
 
 ::selection {
-    background-color: #76CFA6;
+    background-color: $accent-color;
     color: white;
 }
 
 /** green button with rounded corners */
 .mx_textButton {
-    color: #fff;
-    background-color: #76cfa6;
+    color: $accent-fg-color;
+    background-color: $accent-color;
     border-radius: 17px;
     text-align: center;
     padding-left: 1em;
diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss
index 1106f249aa..532e0a3657 100644
--- a/src/skins/vector/css/_components.scss
+++ b/src/skins/vector/css/_components.scss
@@ -1,4 +1,5 @@
 // autogenerated by rethemendex.sh
+@import "_common";
 @import "matrix-react-sdk/structures/_ContextualMenu";
 @import "matrix-react-sdk/structures/_CreateRoom";
 @import "matrix-react-sdk/structures/_FilePanel";
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss b/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss
index d317363dd5..d3e73a9a15 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss
@@ -30,10 +30,10 @@ limitations under the License.
 }
 
 .mx_ContextualMenu {
-    border: solid 1px rgba(187, 187, 187, 0.5);
+    border: solid 1px $menu-border-color;
     border-radius: 4px;
-    background-color: #f6f6f6;
-    color: #4a4a4a;
+    background-color: $menu-bg-color;
+    color: $primary-fg-color;
     position: absolute;
     padding: 6px;
 	font-size: 14px;
@@ -51,7 +51,7 @@ limitations under the License.
     width: 0;
     height: 0;
     border-top: 8px solid transparent;
-    border-left: 8px solid rgba(187, 187, 187, 0.5);
+    border-left: 8px solid $menu-border-color;
     border-bottom: 8px solid transparent;
 }
 
@@ -60,7 +60,7 @@ limitations under the License.
     width: 0;
     height: 0;
     border-top: 7px solid transparent;
-    border-left: 7px solid #f6f6f6;
+    border-left: 7px solid $menu-bg-color;
     border-bottom: 7px solid transparent;
     position:absolute;
     top: -7px;
@@ -78,7 +78,7 @@ limitations under the License.
     width: 0;
     height: 0;
     border-top: 8px solid transparent;
-    border-right: 8px solid rgba(187, 187, 187, 0.5);
+    border-right: 8px solid $menu-border-color;
     border-bottom: 8px solid transparent;
 }
 
@@ -87,7 +87,7 @@ limitations under the License.
     width: 0;
     height: 0;
     border-top: 7px solid transparent;
-    border-right: 7px solid #f6f6f6;
+    border-right: 7px solid $menu-bg-color;
     border-bottom: 7px solid transparent;
     position:absolute;
     top: -7px;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss b/src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss
index 88804409e2..2be193525e 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss
@@ -18,13 +18,13 @@ limitations under the License.
     width: 960px;
     margin-left: auto;
     margin-right: auto;
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_CreateRoom input,
 .mx_CreateRoom textarea  {
     border-radius: 3px;
-    border: 1px solid #c7c7c7;
+    border: 1px solid $strong-input-border-color;
     font-weight: 300;
     font-size: 13px;
     padding: 9px;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
index fca53b1d2a..2f4a00ad70 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
@@ -58,12 +58,12 @@ limitations under the License.
 .mx_FilePanel .mx_EventTile .mx_MImageBody_download {
     display: flex;
     font-size: 14px;
-    color: #acacac;
+    color: $event-timestamp-color;
 }
 
 .mx_FilePanel .mx_EventTile .mx_MImageBody_downloadLink {
     flex: 1 1 auto;
-    color: #747474;
+    color: $light-fg-color;
 }
 
 .mx_FilePanel .mx_EventTile .mx_MImageBody_size {
@@ -90,7 +90,7 @@ limitations under the License.
     padding: 0px;
     font-size: 11px;
     opacity: 1.0;
-    color: #acacac;
+    color: $event-timestamp-color;
 }
 
 .mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
@@ -100,7 +100,7 @@ limitations under the License.
     position: initial;
     font-size: 11px;
     opacity: 1.0;
-    color: #acacac;
+    color: $event-timestamp-color;
 }
 
 /* Overrides for the wrappers around the body tile */
@@ -111,7 +111,7 @@ limitations under the License.
 }
 
 .mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
-    background-color: #fff;
+    background-color: $primary-bg-color;
 }
 
 .mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
index f1cc7d4a1a..5587a6093c 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
@@ -91,7 +91,7 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    background-color: #eaf5f0;
+    background-color: $secondary-accent-color;
 
     -webkit-flex: 0 0 235px;
     flex: 0 0 235px;
@@ -111,7 +111,7 @@ limitations under the License.
 
     padding-left: 20px;
     padding-right: 22px;
-    background-color: #fff;
+    background-color: $primary-bg-color;
 
     -webkit-flex: 1;
     flex: 1;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
index 83b0a033b7..06dd92f315 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
@@ -51,7 +51,7 @@ limitations under the License.
 }
 
 .mx_NotificationPanel .mx_EventTile_roomName a {
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_NotificationPanel .mx_EventTile_avatar {
@@ -61,8 +61,7 @@ limitations under the License.
 
 .mx_NotificationPanel .mx_EventTile .mx_SenderProfile, 
 .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
-    color: #000;
-    opacity: 0.3;
+    color: $primary-fg-color;
     font-size: 12px;
     display: inline;
     padding-left: 0px;
@@ -94,7 +93,7 @@ limitations under the License.
 }
 
 .mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
-    background-color: #fff;
+    background-color: $primary-bg-color;
 }
 
 .mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
index ef0b69c4d0..d0ac5a600c 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
@@ -36,7 +36,7 @@ limitations under the License.
 }
 
 .mx_RoomStatusBar_placeholderIndicator span {
-    color: #4a4a4a;
+    color: $primary-fg-color;
     opacity: 0.5;
     position: relative;
     top: -4px;
@@ -76,7 +76,7 @@ limitations under the License.
 
 .mx_RoomStatusBar_unreadMessagesBar {
     padding-top: 10px;
-    color: #ff0064;
+    color: $warning-color;
     cursor: pointer;
 }
 
@@ -93,29 +93,29 @@ limitations under the License.
 }
 
 .mx_RoomStatusBar_connectionLostBar_title {
-    color: #ff0064;
+    color: $warning-color;
 }
 
 .mx_RoomStatusBar_connectionLostBar_desc {
-    color: #454545;
+    color: $primary-fg-color;
     font-size: 13px;
     opacity: 0.5;
 }
 
 .mx_RoomStatusBar_resend_link {
-    color: #454545 ! important;
+    color: $primary-fg-color ! important;
     text-decoration: underline ! important;
     cursor: pointer;
 }
 
 .mx_RoomStatusBar_tabCompleteBar {
     padding-top: 10px;
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_RoomStatusBar_typingBar {
     padding-top: 10px;
-    color: #4a4a4a;
+    color: $primary-fg-color;
     opacity: 0.5;
     overflow-y: hidden;
     display: block;
@@ -135,7 +135,7 @@ limitations under the License.
 .mx_RoomStatusBar_tabCompleteEol {
     flex: 0 0 auto;
     -webkit-flex: 0 0 auto;
-    color: #76CFA6;
+    color: $accent-color;
 }
 
 .mx_RoomStatusBar_tabCompleteEol object {
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
index c3f7ceed3b..182d690c5e 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
@@ -89,7 +89,7 @@ limitations under the License.
     margin: auto;
 
     overflow: auto;
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid $primary-hairline-color;
 
     -webkit-flex: 0 0 auto;
     flex: 0 0 auto;
@@ -158,7 +158,7 @@ limitations under the License.
     margin-bottom: 8px;
     margin-left: 63px;
     padding-bottom: 6px;
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid $primary-hairline-color;
 }
 
 .mx_RoomView_invitePrompt {
@@ -185,8 +185,8 @@ li.mx_RoomView_myReadMarker_container {
 }
 
 hr.mx_RoomView_myReadMarker {
-    border-top: solid 1px #76cfa6;
-    border-bottom: solid 1px #76cfa6;
+    border-top: solid 1px $accent-color;
+    border-bottom: solid 1px $accent-color;
     margin-top: 0px;
     position: relative;
     top: 5px;
@@ -212,16 +212,16 @@ hr.mx_RoomView_myReadMarker {
 
 .mx_RoomView_statusAreaBox_line {
     margin-left: 65px;
-    border-top: 1px solid #e5e5e5;
+    border-top: 1px solid $primary-hairline-color;
     height: 1px;
 }
 
 .mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
-    background-color: #fff;
+    background-color: $primary-bg-color;
 }
 
 .mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
-    color: #fff;
+    color: $accent-fg-color;
     opacity: 1.0;
 }
 
@@ -234,8 +234,8 @@ hr.mx_RoomView_myReadMarker {
 }
 
 .mx_RoomView_inCall .mx_RoomView_statusAreaBox {
-    background-color: #76CFA6;
-    color: #fff;
+    background-color: $accent-color;
+    color: $accent-fg-color;
     position: relative;
 }
 
@@ -272,13 +272,13 @@ hr.mx_RoomView_myReadMarker {
 .mx_RoomView_ongoingConfCallNotification {
     width: 100%;
     text-align: center;
-    background-color: #ff0064;
-    color: #fff;
+    background-color: $warning-color;
+    color: $accent-fg-color;
     font-weight: bold;
     padding: 6px 0;
     cursor: pointer;
 }
 
 .mx_RoomView_ongoingConfCallNotification a {
-    color: #fff ! important;
+    color: $accent-fg-color ! important;
 }
\ No newline at end of file
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss
index b489e13265..d76c81668c 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss
@@ -26,7 +26,7 @@ limitations under the License.
 }
 
 .mx_UploadBar_uploadProgressInner {
-    background-color: #76cfa6;
+    background-color: $accent-color;
     height: 5px;
 }
 
@@ -34,7 +34,7 @@ limitations under the License.
     margin-top: 5px;
     margin-left: 65px;
     opacity: 0.5;
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_UploadBar_uploadIcon {
@@ -57,5 +57,5 @@ limitations under the License.
     float: right;
     margin-top: 5px;
     margin-right: 30px;
-    color: #76cfa6;
+    color: $accent-color;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
index 427369a5c7..6ba1002bf9 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
@@ -84,8 +84,8 @@ limitations under the License.
     border-radius: 36px;
     font-weight: 400;
     font-size: 16px;
-    color: #fff;
-    background-color: #76cfa6;
+    color: $accent-fg-color;
+    background-color: $accent-color;
     width: auto;
     margin: auto;
     padding: 7px;
@@ -95,7 +95,7 @@ limitations under the License.
 }
 
 .mx_UserSettings_button.danger {
-    background-color: #ff0064;
+    background-color: $warning-color;
 }
 
 .mx_UserSettings_section {
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
index 0f610b25da..5f4164e894 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
@@ -32,7 +32,7 @@ limitations under the License.
 }
 
 .mx_Login h2 {
-    color: #4a4a4a;
+    color: $primary-fg-color;
     font-weight: 300;
     margin-top: 32px;
     margin-bottom: 20px;
@@ -53,7 +53,7 @@ limitations under the License.
 .mx_Login_field {
     width: 100%;
     border-radius: 3px;
-    border: 1px solid #c7c7c7;
+    border: 1px solid $strong-input-border-color;
     font-weight: 300;
     font-size: 13px;
     padding: 9px;
@@ -75,9 +75,9 @@ limitations under the License.
     border-radius: 40px;
     height: 40px;
     border: 0px;
-    background-color: #76cfa6;
+    background-color: $accent-color;
     font-size: 15px;
-    color: #fff;
+    color: $accent-fg-color;
 }
 
 .mx_Login_label {
@@ -99,7 +99,7 @@ limitations under the License.
 }
 
 .mx_Login_create:link {
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_Login_links {
@@ -112,7 +112,7 @@ limitations under the License.
 }
 
 .mx_Login_links a:link {
-   color: #4a4a4a;
+   color: $primary-fg-color;
 }
 
 .mx_Login_prompt {
@@ -127,7 +127,7 @@ limitations under the License.
 }
 
 .mx_Login_forgot:link {
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_Login_loader {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss b/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss
index 901a29599a..d481e5c177 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss
@@ -21,7 +21,7 @@ limitations under the License.
 .mx_BaseAvatar_initial {
     position: absolute;
     z-index: 1;
-    color: #fff;
+    color: $avatar-initial-color;
     text-align: center;
     speak: none;
     pointer-events: none;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss
index aa1dced80a..6bf9adce66 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss
@@ -36,7 +36,7 @@ limitations under the License.
 
 .mx_ChatInviteDialog_inputContainer {
     border-radius: 3px;
-    border: solid 1px #f0f0f0;
+    border: solid 1px $input-border-color;
     line-height: 36px;
     padding-left: 4px;
     padding-right: 4px;
@@ -49,7 +49,7 @@ limitations under the License.
 
 .mx_ChatInviteDialog_error {
     position: absolute;
-    color: #ff0064;
+    color: $warning-color;
     line-height: 36px;
 }
 
diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss
index 5e72d7f8bf..cbc0195cac 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss
@@ -24,7 +24,7 @@ limitations under the License.
     border: 0px;
     height: 36px;
     border-radius: 40px;
-    border: solid 1px #76cfa6;
+    border: solid 1px $accent-color;
     font-weight: 600;
     font-size: 14px;
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
@@ -34,6 +34,6 @@ limitations under the License.
     padding-right: 1.5em;
     outline: none;
     cursor: pointer;
-    color: #76cfa6;
-    background-color: #fff;
+    color: $accent-color;
+    background-color: $primary-bg-color;
 }
\ No newline at end of file
diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss
index 68409a803b..2f0750ad6b 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss
@@ -16,9 +16,9 @@ limitations under the License.
 
 .mx_SetDisplayNameDialog_input {
     border-radius: 3px;
-    border: 1px solid #f0f0f0;
+    border: 1px solid $input-border-color;
     padding: 9px;
-    color: #454545;
-    background-color: #fff;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
     font-size: 15px;
 }
\ No newline at end of file
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss
index aa0f8c6a4e..9871a7e881 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss
@@ -16,13 +16,13 @@ limitations under the License.
 
 .mx_AddressSelector {
     position: absolute;
-    background-color: #fff;
+    background-color: $primary-bg-color;
     width: 485px;
     max-height: 116px;
     overflow-y: auto;
 	border-radius: 3px;
-	background-color: #fff;
-	border: solid 1px #76cfa6;
+	background-color: $primary-bg-color;
+	border: solid 1px $accent-color;
     cursor: pointer;
 }
 
@@ -31,15 +31,15 @@ limitations under the License.
 }
 
 .mx_AddressSelector_addressListElement .mx_AddressTile {
-    background-color: #fff;
-    border: solid 1px #fff;
+    background-color: $primary-bg-color;
+    border: solid 1px $primary-bg-color;
 }
 
 .mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
-     background-color: #eaf5f0; /* selected colour */
+    background-color: $selected-color;
 }
 
 .mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile {
-    background-color: #eaf5f0; /* selected colour */
-    border: solid 1px #eaf5f0; /* selected colour */
+    background-color: $selected-color;
+    border: solid 1px $selected-color;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss
index 76c0e6032f..59c0b68d3b 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss
@@ -18,9 +18,9 @@ limitations under the License.
     display: inline-block;
     border-radius: 3px;
     background-color: rgba(74, 73, 74, 0.1);
-    border: solid 1px #f0f0f0;
+    border: solid 1px $input-border-color;
     line-height: 26px;
-    color: #454545;
+    color: $primary-fg-color;
     font-size: 14px;
     font-weight: normal;
     margin-right: 4px;
@@ -28,8 +28,8 @@ limitations under the License.
 
 .mx_AddressTile.mx_AddressTile_error {
     background-color: rgba(255, 0, 100, 0.1);
-    color: #ff0064;
-    border-color: #ff0064;
+    color: $warning-color;
+    border-color: $warning-color;
 }
 
 .mx_AddressTile_network {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
index 3a0922bcd2..dd953ab955 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_DirectorySearchBox {
     position: relative;
     border-radius: 3px;
-    border: 1px solid #c7c7c7;
+    border: 1px solid $strong-input-border-color;
 }
 
 .mx_DirectorySearchBox_container {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss
index b8197805a0..7d1b059b3c 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss
@@ -31,6 +31,6 @@ limitations under the License.
 }
 
 .mx_MemberEventListSummary_toggle {
-    color:#76cfa6;
+    color:$accent-color;
     cursor:pointer;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss
index f0b3c04645..72a4c0b7a4 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss
@@ -1,14 +1,14 @@
 .mx_UserPill {
     color: white;
-    background-color: #76cfa6;
+    background-color: $accent-color;
     padding: 2px 8px;
     border-radius: 16px;
 }
 
 .mx_RoomPill {
     background-color: white;
-    color: #76cfa6;
-    border: 1px solid #76cfa6;
+    color: $accent-color;
+    border: 1px solid $accent-color;
     padding: 2px 8px;
     border-radius: 16px;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss b/src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss
index 75cd4170da..1ad195de29 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss
@@ -27,5 +27,5 @@ limitations under the License.
     opacity: 0.8;
     font-size: 13px;
     font-weight: 300;
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
\ No newline at end of file
diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss b/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss
index 003ef1030c..83ae06160d 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss
@@ -22,18 +22,18 @@ limitations under the License.
 .mx_MImageBody_thumbnail {
     max-width: 100%;
 /*
-    background-color: #fff;
-    border: 2px solid #fff;
+    background-color: $primary-bg-color;
+    border: 2px solid $primary-bg-color;
     border-radius: 1px;
 */
 }
 
 .mx_MImageBody_download {
-    color: #76cfa6;
+    color: $accent-color;
 }
 
 .mx_MImageBody_download a {
-    color: #76cfa6;
+    color: $accent-color;
     text-decoration: none;
 }
 
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
index 6d611b5ef3..9265d4dc12 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
@@ -3,7 +3,7 @@
     bottom: 0;
     z-index: 1000;
     width: 100%;
-    border: 1px solid #e5e5e5;
+    border: 1px solid $primary-hairline-color;
     background: white;
     border-bottom: none;
     border-radius: 4px 4px 0 0;
@@ -12,7 +12,7 @@
 }
 
 .mx_Autocomplete_ProviderSection {
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid $primary-hairline-color;
 }
 
 .mx_Autocomplete_Completion_container_pill {
@@ -28,7 +28,7 @@
     user-select: none;
     cursor: pointer;
     align-items: center;
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_Autocomplete_Completion_block * {
@@ -42,7 +42,7 @@
     user-select: none;
     cursor: pointer;
     align-items: center;
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_Autocomplete_Completion_pill * {
@@ -57,13 +57,13 @@
 }
 
 .mx_Autocomplete_Completion.selected {
-    background: #f6f6f6;
+    background: $menu-bg-color;
     outline: none;
 }
 
 .mx_Autocomplete_provider_name {
     margin: 12px;
-    color: #454545;
+    color: $primary-fg-color;
     font-weight: 400;
     opacity: 0.4;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss
index e52ece778d..2511f07d4d 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_EntityTile {
     display: table-row;
     position: relative;
-    color: #454545;
+    color: $primary-fg-color;
     cursor: pointer;
 }
 
@@ -77,12 +77,12 @@ limitations under the License.
 
 .mx_EntityTile_ellipsis .mx_EntityTile_name {
     font-style: italic;
-    font-color: #454545;
+    font-color: $primary-fg-color;
 }
 
 .mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
     font-style: italic;
-    font-color: #454545;
+    font-color: $primary-fg-color;
 }
 
 .mx_EntityTile_unavailable .mx_EntityTile_avatar,
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
index fd3f486b7d..a6b10e2435 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
@@ -44,7 +44,7 @@ limitations under the License.
 }
 
 .mx_EventTile .mx_SenderProfile {
-    color: #454545;
+    color: $primary-fg-color;
     opacity: 0.5;
     font-size: 14px;
     display: block; /* anti-zalgo, with overflow hidden */
@@ -61,7 +61,7 @@ limitations under the License.
     display: block;
     visibility: hidden;
     white-space: nowrap;
-    color: #acacac;
+    color: $event-timestamp-color;
     font-size: 11px;
     left: 8px;
     position: absolute;
@@ -93,20 +93,20 @@ limitations under the License.
  * TODO: ultimately we probably want some transition on here.
  */
 .mx_EventTile_selected .mx_EventTile_line {
-    border-left: #76cfa6 5px solid;
+    border-left: $accent-color 5px solid;
     padding-left: 60px;
-    background-color: #f7f7f7;
+    background-color: $event-selected-color;
 }
 
 .mx_EventTile:hover .mx_EventTile_line,
 .mx_EventTile.menu .mx_EventTile_line
 {
-    background-color: #f7f7f7;
+    background-color: $event-selected-color;
 }
 
 .mx_EventTile_searchHighlight {
-    background-color: #76cfa6;
-    color: #fff;
+    background-color: $accent-color;
+    color: $accent-fg-color;
     border-radius: 5px;
     padding-left: 2px;
     padding-right: 2px;
@@ -114,26 +114,26 @@ limitations under the License.
 }
 
 .mx_EventTile_searchHighlight a {
-    background-color: #76cfa6;
-    color: #fff;
+    background-color: $accent-color;
+    color: $accent-fg-color;
 }
 
 .mx_EventTile_encrypting {
-    color: #abddbc ! important;
+    color: $event-encrypting-color ! important;
 }
 
 .mx_EventTile_sending {
-    color: #ddd;
+    color: $event-sending-color;
 }
 
 .mx_EventTile_notSent {
-    color: #f44;
+    color: $event-notsent-color;
 }
 
 .mx_EventTile_highlight,
 .mx_EventTile_highlight .markdown-body
  {
-    color: #FF0064;
+    color: $warning-color;
 }
 
 .mx_EventTile_contextual {
@@ -204,7 +204,7 @@ limitations under the License.
 }
 
 .mx_EventTile_readAvatarRemainder {
-    color: #acacac;
+    color: $event-timestamp-color;
     font-size: 11px;
     position: absolute;
 }
@@ -244,10 +244,10 @@ limitations under the License.
 }
 
 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
-    border-left: #76cfa5 5px solid;
+    border-left: $e2e-verified-color 5px solid;
 }
 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
-    border-left: #e8bf37 5px solid;
+    border-left: $e2e-unverified-color 5px solid;
 }
 
 .mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp,
@@ -297,7 +297,7 @@ limitations under the License.
 }
 
 .mx_EventTile_content .markdown-body a {
-    color: #76cfa6;
+    color: $accent-color;
 }
 
 .mx_EventTile_content .markdown-body .hljs {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss
index 53379ac4ce..f1584d4e00 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss
@@ -20,8 +20,8 @@ limitations under the License.
 
 
 .mx_MemberDeviceInfo_textButton {
-    color: #fff;
-    background-color: #76cfa6;
+    color: $accent-fg-color;
+    background-color: $accent-color;
     border-radius: 17px;
     text-align: center;
     padding-left: 1em;
@@ -50,13 +50,13 @@ limitations under the License.
 }
 
 /* "Unblacklist" is too long for a regular button: make it wider and
-   reduce the padding. */  
+   reduce the padding. */
 .mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist,
 .mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist {
     width: 8em;
     padding-left: 1em;
     padding-right: 1em;
-}    
+}
 
 .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified,
 .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified,
@@ -66,13 +66,13 @@ limitations under the License.
 }
 
 .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified {
-    color: #76cfa5;
+    color: $e2e-verified-color;
 }
 
 .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified {
-    color: #e8bf37;
+    color: $e2e-unverified-color;
 }
 
 .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted {
-    color: #ba6363;
+    color: $e2e-warning-color;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
index 40b1524c27..3b4b653e55 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
@@ -72,7 +72,7 @@ limitations under the License.
     font-color: #999999;
     font-size: 13px;
     position: relative;
-    background-color: #fff;
+    background-color: $primary-bg-color;
 }
 
 .mx_MemberInfo_buttons {
@@ -82,7 +82,7 @@ limitations under the License.
 .mx_MemberInfo_field {
     cursor: pointer;
     font-size: 13px;
-    color: #76cfa6;
+    color: $accent-color;
     margin-left: 8px;
     line-height: 23px;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
index 7d38360601..3c7e3ec5e6 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
@@ -55,10 +55,10 @@ limitations under the License.
 .mx_MemberList_query {
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     border-radius: 3px;
-    border: 1px solid #f0f0f0;
+    border: 1px solid $input-border-color;
     padding: 9px;
-    color: #454545;
-    background-color: #fff;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
     margin-left: 3px;
     font-size: 14px;
     margin-bottom: 8px;
@@ -66,13 +66,13 @@ limitations under the License.
 }
 
 .mx_MemberList_query::-moz-placeholder {
-    color: #454545;
+    color: $primary-fg-color;
     opacity: 0.5;
     font-size: 14px;
 }
 
 .mx_MemberList_query::-webkit-input-placeholder {
-    color: #454545;
+    color: $primary-fg-color;
     opacity: 0.5;
     font-size: 14px;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
index 842f8db655..e5ffd22064 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
@@ -18,7 +18,7 @@ limitations under the License.
     max-width: 960px;
     vertical-align: middle;
     margin: auto;
-    border-top: 1px solid #e5e5e5;
+    border-top: 1px solid $primary-hairline-color;
     position: relative;
 }
 
@@ -108,8 +108,8 @@ limitations under the License.
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;
-    color: #454545;
-    background-color: #fff;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
     font-size: 14px;
     max-height: 120px;
     overflow: auto;
@@ -120,11 +120,11 @@ limitations under the License.
 /* hack for FF as vertical alignment of custom placeholder text is broken */
 .mx_MessageComposer_input textarea::-moz-placeholder {
     line-height: 100%;
-    color: #76cfa6;
+    color: $accent-color;
     opacity: 1.0;
 }
 .mx_MessageComposer_input textarea::-webkit-input-placeholder {
-    color: #76cfa6;
+    color: $accent-color;
 }
 
 .mx_MessageComposer_upload,
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
index 056fa8794b..a26f12ee69 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
@@ -63,10 +63,10 @@ limitations under the License.
 
 .mx_RoomHeader_textButton {
     height: 36px;
-    background-color: #76cfa6;
+    background-color: $accent-color;
     border-radius: 36px;
     margin-right: 8px;
-    color: #fff;
+    color: $accent-fg-color;
     line-height: 34px;
     margin-top: -2px;
     text-align: center;
@@ -102,7 +102,7 @@ limitations under the License.
 
 .mx_RoomHeader_rightRow {
     margin-top: 4px;
-    background-color: #fff;
+    background-color: $primary-bg-color;
     display: flex;
     align-items: center;
     -webkit-box-ordinal-group: 3;
@@ -120,7 +120,7 @@ limitations under the License.
 
 .mx_RoomHeader_simpleHeader {
     line-height: 70px;
-    color: #454545;
+    color: $primary-fg-color;
     font-size: 22px;
     font-weight: bold;
     overflow: hidden;
@@ -138,7 +138,7 @@ limitations under the License.
     width: 100%;
     height: 31px;
     overflow: hidden;
-    color: #454545;
+    color: $primary-fg-color;
     font-weight: bold;
     font-size: 22px;
     padding-left: 19px;
@@ -174,7 +174,7 @@ limitations under the License.
 }
 
 .mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
-    color: #76cfa6;
+    color: $accent-color;
 }
 
 .mx_RoomHeader_placeholder {
@@ -182,13 +182,13 @@ limitations under the License.
 }
 
 .mx_RoomHeader_editable {
-    border-bottom: 1px solid #c7c7c7 ! important;
+    border-bottom: 1px solid $strong-input-border-color ! important;
     min-width: 150px;
     cursor: text;
 }
 
 .mx_RoomHeader_editable:focus {
-    border-bottom: 1px solid #76CFA6 ! important;
+    border-bottom: 1px solid $accent-color ! important;
     outline: none;
     box-shadow: none;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
index 286a39f7d5..6b71f96d2e 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
@@ -38,11 +38,11 @@ limitations under the License.
 }
 
 .mx_RoomPreviewBar_invite_text {
-    color: #454545;
+    color: $primary-fg-color;
 }
 
 .mx_RoomPreviewBar_join_text {
-    color: #ff0064;
+    color: $warning-color;
 }
 
 .mx_RoomPreviewBar_preview_text {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
index 6a3b1ac8cb..132c979232 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
@@ -24,10 +24,10 @@ limitations under the License.
 .mx_RoomSettings_integrationsButton_error {
     position: relative;
     height: 36px;
-    background-color: #76cfa6;
+    background-color: $accent-color;
     border-radius: 36px;
     margin-right: 8px;
-    color: #fff;
+    color: $accent-fg-color;
     line-height: 34px;
     text-align: center;
     float: right;
@@ -47,8 +47,8 @@ limitations under the License.
     font-size: 10pt;
     line-height: 1.5em;
     border-radius: 5px;
-    background-color: #000;
-    color: #fff;
+    background-color: $accent-color;
+    color: $accent-fg-color;
 }
 
 .mx_RoomSettings_e2eIcon {
@@ -174,7 +174,7 @@ limitations under the License.
 }
 
 .mx_RoomSettings_warning {
-    color: #ff0064;
+    color: $warning-color;
     font-weight: bold;
     margin-top: 8px;
     margin-bottom: 8px;
@@ -182,13 +182,13 @@ limitations under the License.
 
 .mx_RoomSettings_editable {
     border: 0px;
-    border-bottom: 1px solid #c7c7c7;
+    border-bottom: 1px solid $strong-input-border-color;
     padding: 0px;
     min-width: 240px;
 }
 
 .mx_RoomSettings_editable:focus {
-    border-bottom: 1px solid #76CFA6;
+    border-bottom: 1px solid $accent-color;
     outline: none;
     box-shadow: none;
 }
@@ -220,8 +220,8 @@ limitations under the License.
     border-radius: 36px;
     font-weight: 400;
     font-size: 15px;
-    color: #fff;
-    background-color: #76cfa6;
+    color: $accent-fg-color;
+    background-color: $accent-color;
     width: auto;
     margin: auto;
     padding: 6px;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
index 2822d82e88..2236404383 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
@@ -78,7 +78,7 @@ limitations under the License.
     position: absolute;
     content: "";
     border-radius: 40px;
-    background: #4A4A4A;
+    background: $primary-fg-color;
     bottom: 0;
     width: 24px;
     height: 24px;
@@ -103,7 +103,7 @@ limitations under the License.
     padding-right: 6px;
     padding-top: 2px;
     padding-bottom: 3px;
-    color: rgba(69, 69, 69, 0.8);
+    color: $roomtile-name-color;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -142,7 +142,7 @@ limitations under the License.
     width: 0;
     height: 0;
     margin-left: 5px;
-    border-top: 5px solid #ff0064;
+    border-top: 5px solid $warning-color;
     border-right: 7px solid transparent;
 }
 
@@ -154,7 +154,7 @@ limitations under the License.
     right: 8px; /*gutter */
     top: 9px;
     border-radius: 8px;
-    color: #fff;
+    color: $accent-fg-color;
     font-weight: 600;
     font-size: 10px;
     text-align: center;
@@ -175,11 +175,11 @@ limitations under the License.
 }
 
 .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
-    background-color: #76cfa6;
+    background-color: $accent-color;
 }
 
 .mx_RoomTile_highlight .mx_RoomTile_badge {
-    background-color: #ff0064;
+    background-color: $warning-color;
 }
 
 .mx_RoomTile_unread, .mx_RoomTile_highlight {
@@ -187,7 +187,7 @@ limitations under the License.
 }
 
 .mx_RoomTile_selected {
-    background-color: rgba(255, 255, 255, 0.8);
+    background-color: $roomtile-selected-bg-color;
 }
 
 .mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
index 76d9e21634..9a24868d14 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
@@ -25,10 +25,10 @@ limitations under the License.
 .mx_SearchableEntityList_query {
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     border-radius: 3px;
-    border: 1px solid #f0f0f0;
+    border: 1px solid $input-border-color;
     padding: 9px;
-    color: #454545;
-    background-color: #fff;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
     margin-left: 3px;
     font-size: 15px;
     margin-bottom: 8px;
@@ -36,13 +36,13 @@ limitations under the License.
 }
 
 .mx_SearchableEntityList_query::-moz-placeholder {
-    color: #454545;
+    color: $primary-fg-color;
     opacity: 0.5;
     font-size: 12px;
 }
 
 .mx_SearchableEntityList_query::-webkit-input-placeholder {
-    color: #454545;
+    color: $primary-fg-color;
     opacity: 0.5;
     font-size: 12px;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss
index 1f8a345083..5dcbd21a47 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss
@@ -27,7 +27,7 @@ limitations under the License.
 
 .mx_TabCompleteBar_command {
     margin-right: 8px;
-    background-color: #76CFA6;
+    background-color: $accent-color;
     padding-left: 8px;
     padding-right: 8px;
     padding-top: 2px;
@@ -41,7 +41,7 @@ limitations under the License.
 .mx_TabCompleteBar_command .mx_TabCompleteBar_text {
     opacity: 1.0;
     vertical-align: initial;
-    color: #fff;
+    color: $accent-fg-color;
 }
 
 .mx_TabCompleteBar_item img {
@@ -50,7 +50,7 @@ limitations under the License.
 }
 
 .mx_TabCompleteBar_text {
-    color: #4a4a4a;
+    color: $primary-fg-color;
     vertical-align: middle;
     opacity: 0.5;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss
index 77184d424f..7bbafcbe41 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss
@@ -19,7 +19,7 @@ limitations under the License.
     max-width: 960px;
     padding-top: 5px;
     padding-bottom: 5px;
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid $primary-hairline-color;
 }
 
 .mx_TopUnreadMessagesBar_scrollUp {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss b/src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss
index 93ee0e20fe..13fc9b2237 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss
@@ -24,7 +24,7 @@ limitations under the License.
 }
 
 .mx_IntegrationsManager iframe {
-    background-color: #fff;
+    background-color: $primary-bg-color;
     border: 0px;
     width: 100%;
     height: 100%;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss b/src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss
index 8051b4d0d6..deb89a837c 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 .mx_CallView_voice {
-    background-color: #76cfa6;
-    color: #fff;
+    background-color: $accent-color;
+    color: $accent-fg-color;
     cursor: pointer;
     text-align: center;
     padding: 6px;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
index 5cf62091b3..97a82a03e8 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
@@ -18,7 +18,7 @@ limitations under the License.
     text-align: center;
     border: 1px solid #a4a4a4;
     border-radius: 8px;
-    background-color: #fff;
+    background-color: $primary-bg-color;
     position: fixed;
     z-index: 1000;
     padding: 6px;
@@ -58,7 +58,7 @@ limitations under the License.
     height: 36px;
     line-height: 36px;
     border-radius: 36px;
-    color: #fff;
+    color: $accent-fg-color;
     margin: auto;
 }
 
diff --git a/src/skins/vector/css/rethemendex.sh b/src/skins/vector/css/rethemendex.sh
index 27c4722427..29e3438208 100755
--- a/src/skins/vector/css/rethemendex.sh
+++ b/src/skins/vector/css/rethemendex.sh
@@ -2,7 +2,7 @@
 
 echo "// autogenerated by rethemendex.sh" > _components.scss
 
-for i in `find */* -iname _\*.scss`;
+for i in `find . -iname _\*.scss | fgrep -v _components.scss`;
 do
     echo "@import \"`dirname $i`/`basename $i .scss`\";" >> _components.scss
 done
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
new file mode 100644
index 0000000000..0fb25a6a7d
--- /dev/null
+++ b/src/skins/vector/css/themes/_base.scss
@@ -0,0 +1,68 @@
+
+
+// typical text (dark-on-white in light skin)
+$primary-fg-color: #454545;
+$primary-bg-color: #ffffff;
+
+// used for dialog box text
+$light-fg-color: #747474;
+
+// button UI (white-on-green in light skin)
+$accent-fg-color: #ffffff;
+$accent-color: #76CFA6;
+
+// red warning colour
+$warning-color: #ff0064;
+
+// left-panel style muted accent color
+$secondary-accent-color: #eaf5f0;
+
+// used by AddressSelector
+$selected-color: #eaf5f0;
+
+// selected for hoverover & selected event tiles
+$event-selected-color: #f7f7f7;
+
+// used for the hairline dividers in RoomView
+$primary-hairline-color: #e5e5e5;
+
+// used for the border of input text fields
+$input-border-color: #f0f0f0;
+
+// apart from login forms, which have stronger border
+$strong-input-border-color: #c7c7c7;
+
+// context menus
+$menu-border-color: rgba(187, 187, 187, 0.5);
+$menu-bg-color: #f6f6f6;
+
+$avatar-initial-color: #ffffff;
+
+// ********************
+
+$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-bg-color: #d3efe1;
+
+// ********************
+
+// event tile lifecycle
+$event-encrypting-color: #abddbc;
+$event-sending-color: #ddd;
+$event-notsent-color: #f44;
+
+// event timestamp
+$event-timestamp-color: #acacac;
+
+// e2e
+$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
+$e2e-unverified-color: #e8bf37;
+$e2e-warning-color: #ba6363;
+
+// ********************
+
+$lightbox-bg-color: #454545;
+$lightbox-fg-color: #ffffff;
+$lightbox-border-color: #ffffff;
\ No newline at end of file
diff --git a/src/skins/vector/css/themes/dark.scss b/src/skins/vector/css/themes/dark.scss
index 19ab2cde4b..e560240264 100644
--- a/src/skins/vector/css/themes/dark.scss
+++ b/src/skins/vector/css/themes/dark.scss
@@ -1,7 +1,69 @@
+@import "_base";
+
 // typical text (dark-on-white in light skin)
 $primary-fg-color: #dddddd;
 $primary-bg-color: #2d2d2d;
 
-// button UI (white-on-green in light skin)
+// used for dialog box text
+$light-fg-color: #747474;
 
-@import "../_components"
\ No newline at end of file
+// button UI (white-on-green in light skin)
+$accent-fg-color: $primary-bg-color;
+$accent-color: #76CFA6;
+
+// red warning colour
+$warning-color: #ff0064;
+
+// left-panel style muted accent color
+$secondary-accent-color: $primary-bg-color;
+
+// used by AddressSelector
+$selected-color: #eaf5f0;
+
+// selected for hoverover & selected event tiles
+$event-selected-color: #353535;
+
+// used for the hairline dividers in RoomView
+$primary-hairline-color: #474747;
+
+// used for the border of input text fields
+$input-border-color: #3a3a3a;
+
+// apart from login forms, which have stronger border
+$strong-input-border-color: #656565;
+
+// context menus
+$menu-border-color: rgba(187, 187, 187, 0.5);
+$menu-bg-color: #373737;
+
+$avatar-initial-color: #2d2d2d;
+
+// ********************
+
+$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-bg-color: #454545;
+
+// ********************
+
+// event tile lifecycle
+$event-encrypting-color: #abddbc;
+$event-sending-color: #ddd;
+$event-notsent-color: #f44;
+
+// event timestamp
+$event-timestamp-color: #acacac;
+
+// e2e
+$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;
+
+@import "../_components";
\ No newline at end of file
diff --git a/src/skins/vector/css/themes/light.scss b/src/skins/vector/css/themes/light.scss
index e0ad84f62f..8b951e27e0 100644
--- a/src/skins/vector/css/themes/light.scss
+++ b/src/skins/vector/css/themes/light.scss
@@ -1,4 +1,2 @@
-$primary-fg-color: #454545;
-$primary-bg-color: #ffffff;
-
-@import "../_components"
\ No newline at end of file
+@import "_base";
+@import "../_components";
\ No newline at end of file
diff --git a/src/skins/vector/css/vector-web/structures/_RightPanel.scss b/src/skins/vector/css/vector-web/structures/_RightPanel.scss
index 5da4c4ab1a..b9dbf1cd79 100644
--- a/src/skins/vector/css/vector-web/structures/_RightPanel.scss
+++ b/src/skins/vector/css/vector-web/structures/_RightPanel.scss
@@ -33,7 +33,7 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid $primary-hairline-color;
     margin-right: 20px;
 
     -webkit-flex: 0 0 70px;
@@ -45,7 +45,7 @@ limitations under the License.
 .mx_RightPanel_headerButtonGroup {
     margin-top: 6px;
     float: left;
-    background-color: #fff;
+    background-color: $primary-bg-color;
     margin-left: 0px;
 }
 
@@ -73,7 +73,7 @@ limitations under the License.
 
 .mx_RightPanel_headerButton_badge {
     font-size: 11px;
-    color: #76cfa6;
+    color: $accent-color;
     font-weight: bold;
     padding-bottom: 2px;
 }
@@ -97,7 +97,7 @@ limitations under the License.
     -webkit-order: 3;
     order: 3;
 
-    border-top: 1px solid #e5e5e5;
+    border-top: 1px solid $primary-hairline-color;
     margin-right: 20px;
 
     -webkit-flex: 0 0 60px;
@@ -107,7 +107,7 @@ limitations under the License.
 .mx_RightPanel_footer .mx_RightPanel_invite {
     line-height: 35px;
     font-size: 14px;
-	color: #4A4A4A;
+	color: $primary-fg-color;
     padding-top: 13px;
     padding-left: 5px;
     cursor: pointer;
diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
index 563b1772c9..e5df8741d1 100644
--- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
+++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
@@ -20,7 +20,7 @@ limitations under the License.
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 12px;
-    color: #4a4a4a;
+    color: $primary-fg-color;
 
     display: -webkit-box;
     display: -moz-box;
@@ -78,7 +78,7 @@ limitations under the License.
 
 .mx_RoomDirectory_table {
     font-size: 14px;
-    color: #4a4a4a;
+    color: $primary-fg-color;
     width: 100%;
     text-align: left;
     table-layout: fixed;
@@ -110,7 +110,7 @@ limitations under the License.
     padding-right: 5px;
     height: 15px;
     border-radius: 11px;
-    background-color: #eaf5f0;
+    background-color: $secondary-accent-color;
     text-transform: uppercase;
     font-weight: 600;
     font-size: 11px;
diff --git a/src/skins/vector/css/vector-web/structures/_RoomSubList.scss b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss
index e6e81aefb1..0d56d6c378 100644
--- a/src/skins/vector/css/vector-web/structures/_RoomSubList.scss
+++ b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss
@@ -29,7 +29,7 @@ limitations under the License.
 .mx_RoomSubList_label {
     position: relative;
     text-transform: uppercase;
-    color: #3d3b39;
+    color: $roomsublist-label-fg-color;
     font-weight: 600;
     font-size: 12px;
     width: 203px; /* padding + width = LHS Panel width */
@@ -39,8 +39,8 @@ limitations under the License.
     padding-top: 6px;
     padding-bottom: 6px;
     cursor: pointer;
-    background-color: #d3efe1;
-    border-top: solid 2px #eaf5f0;
+    background-color: $roomsublist-label-bg-color;
+    border-top: solid 2px $secondary-accent-color;
 }
 
 .mx_RoomSubList_label.mx_RoomSubList_fixed {
@@ -63,7 +63,7 @@ limitations under the License.
     display: inline-block;
     font-size: 12px;
     font-weight: normal;
-    color: #76cfa6;
+    color: $accent-color;
     padding-left: 5px;
     text-transform: none;
 }
@@ -80,14 +80,14 @@ limitations under the License.
     right: 8px; /*gutter */
     top: 7px;
     border-radius: 8px;
-    color: #fff;
+    color: $accent-fg-color;
     font-weight: 600;
     font-size: 10px;
     text-align: center;
     padding-top: 1px;
     padding-left: 4px;
     padding-right: 4px;
-    background-color: #76cfa6;
+    background-color: $accent-color;
 }
 
 /*
@@ -97,7 +97,7 @@ limitations under the License.
 */
 
 .mx_RoomSubList_badgeHighlight {
-    background-color: #ff0064;
+    background-color: $warning-color;
 }
 
 /* This is the bottom of the speech bubble */
@@ -108,7 +108,7 @@ limitations under the License.
     width: 0;
     height: 0;
     margin-left: 5px;
-    border-top: 5px solid #ff0064;
+    border-top: 5px solid $warning-color;
     border-right: 7px solid transparent;
 }
 
@@ -129,7 +129,7 @@ limitations under the License.
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
-    border-top: 6px solid #76cfa6;
+    border-top: 6px solid $accent-color;
 }
 
 .mx_RoomSubList_chevronUp {
@@ -137,14 +137,14 @@ limitations under the License.
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
-    border-bottom: 6px solid #76cfa6;
+    border-bottom: 6px solid $accent-color;
 }
 
 .mx_RoomSubList_chevronRight {
     width: 0;
     height: 0;
     border-top: 5px solid transparent;
-    border-left: 6px solid #76cfa6;
+    border-left: 6px solid $accent-color;
     border-bottom: 5px solid transparent;
 }
 
@@ -165,7 +165,7 @@ limitations under the License.
 .mx_RoomSubList_line {
     display: inline-block;
     width: 159px;
-    border-top: dotted 2px #76cfa6;
+    border-top: dotted 2px $accent-color;
     vertical-align: middle;
 }
 
@@ -179,7 +179,7 @@ limitations under the License.
     font-size: 10px;
     font-weight: 600;
     text-align: left;
-    color: #76cfa6;
+    color: $accent-color;
     padding-left: 7px;
     padding-right: 7px;
     padding-left: 7px;
@@ -198,20 +198,20 @@ limitations under the License.
     right: 8px; /*gutter */
     top: -2px;
     border-radius: 8px;
-    border: solid 1px #76cfa6;
-    color: #fff;
+    border: solid 1px $accent-color;
+    color: $accent-fg-color;
     font-weight: 600;
     font-size: 10px;
     text-align: center;
     padding-top: 1px;
     padding-left: 3px;
     padding-right: 3px;
-    background-color: #fff;
+    background-color: $primary-bg-color;
     vertical-align: middle;
 }
 
 .mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify {
-    background-color: #76cfa6;
+    background-color: $accent-color;
     border: 0;
     padding-top: 3px;
     padding-left: 4px;
@@ -219,7 +219,7 @@ limitations under the License.
 }
 
 .mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight {
-    background-color: #ff0064;
+    background-color: $warning-color;
     border: 0;
     padding-top: 3px;
     padding-left: 4px;
diff --git a/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss b/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss
index 947fd480fe..0a2e7605df 100644
--- a/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss
+++ b/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss
@@ -31,7 +31,7 @@ limitations under the License.
 
 .mx_RoomTagContextMenu_field:last-child {
     padding-bottom: 4px;
-    color: #ff0064;
+    color: $warning-color;
 }
 
 .mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet {
diff --git a/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss b/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss
index 8b4c445996..9147fdb7cb 100644
--- a/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss
+++ b/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss
@@ -21,14 +21,14 @@ limitations under the License.
 .mx_NetworkDropdown_input {
     position: relative;
     border-radius: 3px;
-    border: 1px solid #c7c7c7;
+    border: 1px solid $strong-input-border-color;
     font-weight: 300;
     font-size: 13px;
     user-select: none;
 }
 
 .mx_NetworkDropdown_arrow {
-    border-color: #4a4a4a transparent transparent;
+    border-color: $primary-fg-color transparent transparent;
     border-style: solid;
     border-width: 5px 5px 0;
     display: block;
@@ -67,7 +67,7 @@ input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:f
     margin: 0;
     padding: 0px;
     border-radius: 3px;
-    border: 1px solid #76cfa6;
+    border: 1px solid $accent-color;
     background-color: white;
 }
 
diff --git a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss
index 03223f259e..d66d9c7dbd 100644
--- a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss
+++ b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss
@@ -87,7 +87,7 @@ limitations under the License.
     padding-right: 30px;
     min-height: 100%;
     max-width: 240px;
-    color: #fff;
+    color: $lightbox-fg-color;
 }
 
 .mx_ImageView_cancel {
@@ -114,10 +114,10 @@ limitations under the License.
     margin-top: 24px;
     margin-bottom: 6px;
     border-radius: 5px;
-    background-color: #454545;
+    background-color: $lightbox-bg-color;
     font-size: 14px;
     padding: 9px;
-    border: 1px solid #fff;
+    border: 1px solid $lightbox-border-color;
 }
 
 .mx_ImageView_size {
@@ -125,7 +125,7 @@ limitations under the License.
 }
 
 .mx_ImageView_link {
-    color: #fff ! important;
+    color: $lightbox-fg-color ! important;
     text-decoration: none ! important;
 }
 
diff --git a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
index 717d75afe4..e8b5aebbb8 100644
--- a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
+++ b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 .mx_GuestWarningBar {
-    background-color: #76cfa6;
-    color: #fff;
+    background-color: $accent-color;
+    color: $accent-fg-color;
 
     display: -webkit-box;
     display: -moz-box;
@@ -34,7 +34,7 @@ limitations under the License.
 }
 
 .mx_GuestWarningBar a {
-    color: #fff ! important;
+    color: $accent-fg-color ! important;
     text-decoration: underline ! important;
     cursor: pointer;
 }
diff --git a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
index 4e214e113f..9bd70bb944 100644
--- a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
+++ b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 .mx_MatrixToolbar {
-    background-color: #76cfa6;
-    color: #fff;
+    background-color: $accent-color;
+    color: $accent-fg-color;
 
     display: -webkit-box;
     display: -moz-box;
@@ -40,7 +40,7 @@ limitations under the License.
 
 .mx_MatrixToolbar_link
 {
-    color: #fff ! important;
+    color: $accent-fg-color ! important;
     text-decoration: underline ! important;
     cursor: pointer;
 }
diff --git a/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss
index 003215aff2..2fe16ca949 100644
--- a/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss
+++ b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss
@@ -22,8 +22,8 @@ limitations under the License.
     margin-bottom: 7px;
     padding-top: 5px;
     padding-bottom: 5px;
-    border: 1px dashed #76cfa6;
-    color: #454545;
+    border: 1px dashed $accent-color;
+    color: $primary-fg-color;
     background-color: rgba(255,255,255,0.5);
     border-radius: 4px;
 }
@@ -39,7 +39,7 @@ limitations under the License.
 }
 
 .mx_RoomDropTarget_avatar {
-    background-color: #fff;
+    background-color: $primary-bg-color;
     border-radius: 24px;
     width: 24px;
     height: 24px;
diff --git a/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss b/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss
index 192fa77b39..5469a9e6d3 100644
--- a/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss
+++ b/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss
@@ -21,16 +21,16 @@ limitations under the License.
     width: 0;
     height: 0;
     border-top: 8px solid transparent;
-    border-right: 8px solid rgba(187, 187, 187, 0.5);
+    border-right: 8px solid $menu-border-color;
     border-bottom: 8px solid transparent;
 }
 
-.mx_RoomTooltip_chevron:after{
+.mx_RoomTooltip_chevron:after {
     content:'';
     width: 0;
     height: 0;
     border-top: 7px solid transparent;
-    border-right: 7px solid #fff;
+    border-right: 7px solid $primary-bg-color;
     border-bottom: 7px solid transparent;
     position:absolute;
     top: -7px;
@@ -40,14 +40,14 @@ limitations under the License.
 .mx_RoomTooltip {
     display: none;
     position: fixed;
-    border: 1px solid rgba(187, 187, 187, 0.5);
+    border: 1px solid $menu-border-color;
     border-radius: 5px;
-    background-color: #fff;
+    background-color: $primary-bg-color;
     z-index: 2000;
     padding: 5px;
     pointer-events: none;
     line-height: 14px;
     font-size: 13px;
-    color: rgba(0, 0, 0, 0.7);
+    color: $primary-fg-color;
 }
 
diff --git a/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss b/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss
index 7ec1a17ad5..5d1953220a 100644
--- a/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss
+++ b/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss
@@ -26,7 +26,7 @@ limitations under the License.
 .mx_SearchBar_input {
     display: inline block;
     border-radius: 3px 0px 0px 3px;
-    border: 1px solid #f0f0f0;
+    border: 1px solid $input-border-color;
     font-size: 15px;
     padding: 9px;
     padding-left: 11px;
@@ -41,7 +41,7 @@ limitations under the License.
     width: 37px;
     height: 37px;
     border-radius: 0px 3px 3px 0px;
-    background-color: #76CFA6;
+    background-color: $accent-color;
 }
 
 @keyframes pulsate {
@@ -61,8 +61,8 @@ limitations under the License.
     border-radius: 36px;
     font-weight: 400;
     font-size: 15px;
-    color: #fff;
-    background-color: #76cfa6;
+    color: $accent-fg-color;
+    background-color: $accent-color;
     width: auto;
     margin: auto;
     margin-left: 7px;
@@ -74,9 +74,9 @@ limitations under the License.
 }
 
 .mx_SearchBar_unselected {
-    background-color: #fff;
-    color: #76CFA6;
-    border: #76CFA6 1px solid;
+    background-color: $primary-bg-color;
+    color: $accent-color;
+    border: $accent-color 1px solid;
 }
 
 .mx_SearchBar_cancel {
diff --git a/src/skins/vector/css/vector-web/views/settings/_Notifications.scss b/src/skins/vector/css/vector-web/views/settings/_Notifications.scss
index 7a93f3f7b2..4c88e44952 100644
--- a/src/skins/vector/css/vector-web/views/settings/_Notifications.scss
+++ b/src/skins/vector/css/vector-web/views/settings/_Notifications.scss
@@ -58,7 +58,7 @@ limitations under the License.
 
 .mx_UserNotifSettings_keywords {
     cursor: pointer;
-    color: #76cfa6;
+    color: $accent-color;
 }
 
 .mx_UserSettings_devicesTable td {
diff --git a/src/vector/index.js b/src/vector/index.js
index 96c6a971b6..47509887b5 100644
--- a/src/vector/index.js
+++ b/src/vector/index.js
@@ -30,7 +30,7 @@ require('babel-polyfill');
 
 // CSS requires: just putting them here for now as CSS is going to be
 // refactored "soon" anyway
-require('../../build/themes/light.css');
+require('../../build/themes/dark.css');
 require('gemini-scrollbar/gemini-scrollbar.css');
 require('gfm.css/gfm.css');
 require('highlight.js/styles/github.css');