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');