--- a/devtools/client/netmonitor/src/components/request-list-header.js
+++ b/devtools/client/netmonitor/src/components/request-list-header.js
@@ -5,16 +5,18 @@
 "use strict";
 
 const {
   createClass,
   PropTypes,
   DOM,
 } = require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { getTheme, addThemeObserver, removeThemeObserver } =
+  require("devtools/client/shared/theme");
 const Actions = require("../actions/index");
 const { HEADERS, REQUESTS_WATERFALL } = require("../constants");
 const { getWaterfallScale } = require("../selectors/index");
 const { getFormattedTime } = require("../utils/format-utils");
 const { L10N } = require("../utils/l10n");
 const WaterfallBackground = require("../waterfall-background");
 const RequestListHeaderContextMenu = require("../request-list-header-context-menu");
 
@@ -45,36 +47,46 @@ const RequestListHeader = createClass({
       resetColumns,
       toggleColumn,
     });
   },
 
   componentDidMount() {
     // Create the object that takes care of drawing the waterfall canvas background
     this.background = new WaterfallBackground(document);
-    this.background.draw(this.props);
+    this.drawBackground();
     this.resizeWaterfall();
     window.addEventListener("resize", this.resizeWaterfall);
+    addThemeObserver(this.drawBackground);
   },
 
   componentDidUpdate() {
-    this.background.draw(this.props);
+    this.drawBackground();
   },
 
   componentWillUnmount() {
     this.background.destroy();
     this.background = null;
     window.removeEventListener("resize", this.resizeWaterfall);
+    removeThemeObserver(this.drawBackground);
   },
 
   onContextMenu(evt) {
     evt.preventDefault();
     this.contextMenu.open(evt);
   },
 
+  drawBackground() {
+    // The background component is theme dependent, so add the current theme to the props.
+    let props = Object.assign({}, this.props, {
+      theme: getTheme()
+    });
+    this.background.draw(props);
+  },
+
   resizeWaterfall() {
     let waterfallHeader = this.refs.waterfallHeader;
     if (waterfallHeader) {
       // Measure its width and update the 'waterfallWidth' property in the store.
       // The 'waterfallWidth' will be further updated on every window resize.
       setTimeout(() => {
         this.props.resizeWaterfall(waterfallHeader.getBoundingClientRect().width);
       }, 500);

--- a/devtools/client/netmonitor/src/constants.js
+++ b/devtools/client/netmonitor/src/constants.js
@@ -226,21 +226,23 @@ const FILTER_FLAGS = [
 const REQUESTS_WATERFALL = {
   BACKGROUND_TICKS_MULTIPLE: 5, // ms
   BACKGROUND_TICKS_SCALES: 3,
   BACKGROUND_TICKS_SPACING_MIN: 10, // px
   BACKGROUND_TICKS_COLOR_RGB: [128, 136, 144],
   // 8-bit value of the alpha component of the tick color
   BACKGROUND_TICKS_OPACITY_MIN: 32,
   BACKGROUND_TICKS_OPACITY_ADD: 32,
-  // RGBA colors for the timing markers
-  DOMCONTENTLOADED_TICKS_COLOR_RGBA: [0, 0, 255, 128],
+  // Colors for timing markers (theme colors, see variables.css)
+  DOMCONTENTLOADED_TICKS_COLOR: "highlight-blue",
+  LOAD_TICKS_COLOR: "highlight-red",
+  // Opacity for the timing markers
+  TICKS_COLOR_OPACITY: 192,
   HEADER_TICKS_MULTIPLE: 5, // ms
   HEADER_TICKS_SPACING_MIN: 60, // px
-  LOAD_TICKS_COLOR_RGBA: [255, 0, 0, 128],
   // Reserve extra space for rendering waterfall time label
   LABEL_WIDTH: 50, // px
 };
 
 const general = {
   ACTIVITY_TYPE,
   EVENTS,
   FILTER_SEARCH_DELAY: 200,

--- a/devtools/client/netmonitor/src/waterfall-background.js
+++ b/devtools/client/netmonitor/src/waterfall-background.js
@@ -1,15 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { REQUESTS_WATERFALL } = require("./constants");
+const { getColor } = require("devtools/client/shared/theme");
+const { colorUtils } = require("devtools/shared/css/color");
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 const STATE_KEYS = [
   "firstRequestStartedMillis",
   "scale",
   "timingMarkers",
   "waterfallWidth",
 ];
@@ -104,29 +106,47 @@ WaterfallBackground.prototype = {
       if (timestamp === -1) {
         return;
       }
 
       let delta = Math.floor((timestamp - state.firstRequestStartedMillis) * state.scale);
       drawPixelAt(delta, color);
     }
 
+    let { DOMCONTENTLOADED_TICKS_COLOR, LOAD_TICKS_COLOR } = REQUESTS_WATERFALL;
     drawTimestamp(state.timingMarkers.firstDocumentDOMContentLoadedTimestamp,
-                  REQUESTS_WATERFALL.DOMCONTENTLOADED_TICKS_COLOR_RGBA);
+                  this.getThemeColorAsRgba(DOMCONTENTLOADED_TICKS_COLOR, state.theme));
 
     drawTimestamp(state.timingMarkers.firstDocumentLoadTimestamp,
-                  REQUESTS_WATERFALL.LOAD_TICKS_COLOR_RGBA);
+                  this.getThemeColorAsRgba(LOAD_TICKS_COLOR, state.theme));
 
     // Flush the image data and cache the waterfall background.
     pixelArray.set(view8bit);
     this.ctx.putImageData(imageData, 0, 0);
 
     setImageElement("waterfall-background", this.canvas);
   },
 
+  /**
+   * Retrieve a color defined for the provided theme as a rgba array. The alpha channel is
+   * forced to the waterfall constant TICKS_COLOR_OPACITY.
+   *
+   * @param {String} colorName
+   *        The name of the theme color
+   * @param {String} theme
+   *        The name of the theme
+   * @return {Array} RGBA array for the color.
+   */
+  getThemeColorAsRgba(colorName, theme) {
+    let colorStr = getColor(colorName, theme);
+    let color = new colorUtils.CssColor(colorStr);
+    let { r, g, b } = color.getRGBATuple();
+    return [r, g, b, REQUESTS_WATERFALL.TICKS_COLOR_OPACITY];
+  },
+
   destroy() {
     setImageElement("waterfall-background", null);
   }
 };
 
 /**
  * Returns true if this is document is in RTL mode.
  * @return boolean