diff --git a/core/colours.js b/core/colours.js
index ff0eb35482..58e4f96d3c 100644
--- a/core/colours.js
+++ b/core/colours.js
@@ -82,8 +82,7 @@ Blockly.Colours = {
     "secondary": "#FF4D6A",
     "tertiary": "#FF3355"
   },
-  "text": "#575E75",
-  "blockText": "#FFFFFF",
+  "text": "#FFFFFF",
   "workspace": "#F9F9F9",
   "toolboxHover": "#4C97FF",
   "toolboxSelected": "#e9eef2",
@@ -93,6 +92,7 @@ Blockly.Colours = {
   "scrollbar": "#CECDCE",
   "scrollbarHover": '#CECDCE',
   "textField": "#FFFFFF",
+  "textFieldText": "#575E75",
   "insertionMarker": "#000000",
   "insertionMarkerOpacity": 0.2,
   "dragShadowOpacity": 0.3,
diff --git a/core/css.js b/core/css.js
index a2c1292f71..e46579d5e4 100644
--- a/core/css.js
+++ b/core/css.js
@@ -93,14 +93,15 @@ Blockly.Css.inject = function(hasCss, pathToMedia) {
   text = text.replace(/<<<PATH>>>/g, Blockly.Css.mediaPath_);
   // Dynamically replace colours in the CSS text, in case they have
   // been set at run-time injection.
-  for (var colourProperty in Blockly.Colours) {
-    if (Blockly.Colours.hasOwnProperty(colourProperty)) {
-      // Replace all
-      text = text.replace(
-        new RegExp('\\$colour\\_' + colourProperty, 'g'),
-        Blockly.Colours[colourProperty]
-      );
-    }
+  // Process longer colour properties first to handle common prefixes.
+  var compareByLength = function(a, b) { return b.length - a.length; };
+  var colourProperties = Object.keys(Blockly.Colours).sort(compareByLength);
+  for (var i = 0, colourProperty; colourProperty = colourProperties[i]; i++) {
+    // Replace all
+    text = text.replace(
+      new RegExp('\\$colour\\_' + colourProperty, 'g'),
+      Blockly.Colours[colourProperty]
+    );
   }
 
   // Inject CSS tag at start of head.
@@ -459,7 +460,7 @@ Blockly.Css.CONTENT = [
   '}',
 
   '.blocklyText {',
-    'fill: $colour_blockText;',
+    'fill: $colour_text;',
     'font-family: "Helvetica Neue", Helvetica, sans-serif;',
     'font-size: 12pt;',
     'font-weight: 500;',
@@ -474,7 +475,7 @@ Blockly.Css.CONTENT = [
   '}',
   '.blocklyNonEditableText>text,',
   '.blocklyEditableText>text {',
-    'fill: $colour_text;',
+    'fill: $colour_textFieldText;',
   '}',
 
   '.blocklyEditableText>.blocklyEditableLabel {',
@@ -482,11 +483,11 @@ Blockly.Css.CONTENT = [
   '}',
 
   '.blocklyDropdownText {',
-    'fill: #fff !important;',
+    'fill: $colour_text !important;',
   '}',
 
   '.blocklyBubbleText {',
-    'fill: $colour_text;',
+    'fill: $colour_textFieldText;',
   '}',
   '.blocklyFlyout {',
     'position: absolute;',
@@ -502,7 +503,7 @@ Blockly.Css.CONTENT = [
   '}',
 
   '.blocklyFlyoutButton .blocklyText {',
-    'fill: $colour_text;',
+    'fill: $colour_textFieldText;',
   '}',
 
   '.blocklyFlyoutButtonShadow {',
@@ -720,7 +721,7 @@ Blockly.Css.CONTENT = [
     'box-sizing: border-box;',
     'width: 100%;',
     'text-align: center;',
-    'color: $colour_text;',
+    'color: $colour_textFieldText;',
     'font-weight: 500;',
   '}',
 
@@ -1014,7 +1015,7 @@ Blockly.Css.CONTENT = [
   '.scratchNotePickerKeyLabel {',
     'font-family: "Helvetica Neue", Helvetica, sans-serif;',
     'font-size: 0.75rem;',
-    'fill: $colour_text;',
+    'fill: $colour_textFieldText;',
     'pointer-events: none;',
   '}',
 
@@ -1095,7 +1096,7 @@ Blockly.Css.CONTENT = [
   '}',
 
   '.blocklyDropDownDiv .goog-menuitem {',
-    'color: #fff;',
+    'color: $colour_text;',
     'font: normal 13px "Helvetica Neue", Helvetica, sans-serif;',
     'font-weight: bold;',
     'list-style: none;',