--- a/devtools/client/shared/theme.js
+++ b/devtools/client/shared/theme.js
@@ -6,17 +6,17 @@
 
 /**
  * Colors for themes taken from:
  * https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors
  */
 
 const Services = require("Services");
 
-const variableFileContents = require("raw!devtools/client/themes/variables.css");
+const variableFileContents = require("theme-loader!devtools/client/themes/variables.css");
 
 const THEME_SELECTOR_STRINGS = {
   light: ":root.theme-light {",
   dark: ":root.theme-dark {",
   firebug: ":root.theme-firebug {",
   root: ":root {",
 };
 const THEME_PREF = "devtools.theme";

new file mode 100644
--- /dev/null
+++ b/devtools/client/shared/webpack/theme-loader.js
@@ -0,0 +1,29 @@
+/* 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";
+
+var fs = require("fs");
+
+/**
+ * Make sure that content of the file is loaded as a text
+ * (no parsing by other loaders)
+ *
+ * Used e.g. for runtime access to colors defined in variables.css
+ */
+module.exports.pitch = function (remainingRequest, precedingRequest, data) {
+  if (this.cacheable) {
+    this.cacheable();
+  }
+
+  let request = remainingRequest.split("!");
+  let rawUrl = request[request.length - 1];
+  let content = fs.readFileSync(rawUrl, "utf8");
+
+  // Avoid mix of single & double quotes in a string
+  // (use only double quotes), so we can stringify.
+  content = content.replace("'", '"');
+
+  return "module.exports = " + JSON.stringify(content) + ";";
+};

--- a/devtools/shared/Loader.jsm
+++ b/devtools/shared/Loader.jsm
@@ -67,17 +67,17 @@ BuiltinProvider.prototype = {
       paths.promise = "resource://gre/modules/Promise-backend.js";
     }
     this.loader = new Loader({
       paths,
       invisibleToDebugger: this.invisibleToDebugger,
       sharedGlobal: true,
       sandboxName: "DevTools (Module loader)",
       requireHook: (id, require) => {
-        if (id.startsWith("raw!")) {
+        if (id.startsWith("raw!") || id.startsWith("theme-loader!")) {
           return requireRawId(id, require);
         }
         return require(id);
       },
     });
   },
 
   unload: function (reason) {

--- a/devtools/shared/loader-plugin-raw.jsm
+++ b/devtools/shared/loader-plugin-raw.jsm
@@ -4,22 +4,24 @@
 
 "use strict";
 
 const { utils: Cu } = Components;
 const { NetUtil } = Cu.import("resource://gre/modules/NetUtil.jsm", {});
 
 /**
  * A function that can be used as part of a require hook for a
- * loader.js Loader.  This function only handles webpack-style "raw!"
- * requires; other requires should not be passed to this.  See
- * https://github.com/webpack/raw-loader.
+ * loader.js Loader.
+ * This function handles "raw!" and "theme-loader!" requires.
+ * See also: https://github.com/webpack/raw-loader.
  */
 this.requireRawId = function (id, require) {
-  let uri = require.resolve(id.slice(4));
+  let index = id.indexOf("!");
+  let rawId = id.slice(index + 1);
+  let uri = require.resolve(rawId);
   // If the original string did not end with ".js", then
   // require.resolve might have added the suffix.  We don't want to
   // add a suffix for a raw load (if needed the caller can specify it
   // manually), so remove it here.
   if (!id.endsWith(".js") && uri.endsWith(".js")) {
     uri = uri.slice(0, -3);
   }