diff --git a/devtools/client/performance-new/popup/initializer.js b/devtools/client/performance-new/popup/initializer.js
index 246b347b6263..efbe862f93e5 100644
--- a/devtools/client/performance-new/popup/initializer.js
+++ b/devtools/client/performance-new/popup/initializer.js
@@ -66,6 +66,20 @@ const {
   ActorReadyGeckoProfilerInterface,
 } = require("devtools/server/performance-new/gecko-profiler-interface");
 
+const { LightweightThemeManager } = ChromeUtils.import(
+  "resource://gre/modules/LightweightThemeManager.jsm"
+);
+
+/* Force one of our two themes depending on what theme the browser is
+ * currently using. This might be different from the selected theme in
+ * the devtools panel. By forcing a theme here, we're unaffected by
+ * the devtools setting when we show the popup.
+ */
+document.documentElement.setAttribute(
+  "force-theme",
+  isCurrentThemeDark() ? "dark" : "light"
+);
+
 document.addEventListener("DOMContentLoaded", () => {
   gInit();
 });
@@ -116,3 +130,16 @@ function resizeWindow() {
     }
   });
 }
+
+/**
+ * Return true if the current (non-devtools) theme is the built in
+ * dark theme.
+ */
+function isCurrentThemeDark() {
+  const DARK_THEME_ID = "firefox-compact-dark@mozilla.org";
+  return (
+    LightweightThemeManager.themeData &&
+    LightweightThemeManager.themeData.theme &&
+    LightweightThemeManager.themeData.theme.id === DARK_THEME_ID
+  );
+}