diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss
index 570439543a..8a333071cd 100644
--- a/src/skins/vector/css/_common.scss
+++ b/src/skins/vector/css/_common.scss
@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
+Copyright 2017 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -118,6 +119,19 @@ textarea {
     transition: height 120ms ease-out ! important;
 }
 
+// These are magic constants which are excluded from tinting, to let themes
+// (which only have CSS, unlike skins) tell the app what their non-tinted
+// colourscheme is by inspecting the stylesheet DOM.
+//
+// They are not used for layout!!
+#mx_theme_accentColor {
+    color: $accent-color;
+}
+
+#mx_theme_secondaryAccentColor {
+    color: $secondary-accent-color;
+}
+
 .mx_Dialog_wrapper {
     position: fixed;
     z-index: 4000;
diff --git a/src/vector/index.html b/src/vector/index.html
index e32f63133d..14efb0b201 100644
--- a/src/vector/index.html
+++ b/src/vector/index.html
@@ -73,5 +73,7 @@
         <source src="media/busy.mp3" type="audio/mpeg" />
     </audio>
     <audio id="remoteAudio"/>
+    <!-- let CSS themes pass constants to the app -->
+    <div id="mx_theme_accentColor"></div><div id="mx_theme_secondaryAccentColor"/></div>
   </body>
 </html>