diff --git a/src/ccDarkTheme/components/dialogs/_index.scss b/src/ccDarkTheme/components/dialogs/_index.scss
index 59f8798..3ec7a09 100644
--- a/src/ccDarkTheme/components/dialogs/_index.scss
+++ b/src/ccDarkTheme/components/dialogs/_index.scss
@@ -2,3 +2,4 @@
 @forward 'private-message';
 @forward 'keyboard-shortcuts';
 @forward 'bug-case-links';
+@forward 'report';
diff --git a/src/ccDarkTheme/components/dialogs/_report.scss b/src/ccDarkTheme/components/dialogs/_report.scss
new file mode 100644
index 0000000..8c6bb46
--- /dev/null
+++ b/src/ccDarkTheme/components/dialogs/_report.scss
@@ -0,0 +1,3 @@
+iframe[src*="reportingwidget"] {
+  color-scheme: auto;
+}
diff --git a/src/contentScripts/communityConsole/darkTheme/darkTheme.js b/src/contentScripts/communityConsole/darkTheme/darkTheme.js
index 7bd4ba6..c1888ea 100644
--- a/src/contentScripts/communityConsole/darkTheme/darkTheme.js
+++ b/src/contentScripts/communityConsole/darkTheme/darkTheme.js
@@ -3,6 +3,11 @@
 import {createPlainTooltip} from '../../../common/tooltip.js';
 import {createExtBadge} from '../utils/common.js';
 
+export const kColorThemeMode = Object.freeze({
+  Auto: Symbol('auto'),
+  Light: Symbol('light'),
+  Dark: Symbol('dark'),
+});
 
 export function injectDarkThemeButton(rightControl, previousDarkThemeOption) {
   var darkThemeSwitch = document.createElement('material-button');
@@ -45,12 +50,31 @@
   new MDCTooltip(badgeTooltip);
 }
 
+export function getCurrentColorTheme(options) {
+  if (!options.ccdarktheme) {
+    return kColorThemeMode.Light;
+  } else {
+    if (options.ccdarktheme_mode == 'switch') {
+      return options.ccdarktheme_switch_status ? kColorThemeMode.Dark :
+                                                 kColorThemeMode.Light;
+    } else {
+      return kColorThemeMode.Auto;
+    }
+  }
+}
+
 export function isDarkThemeOn(options) {
-  if (!options.ccdarktheme) return false;
+  const activeColorTheme = getCurrentColorTheme(options);
 
-  if (options.ccdarktheme_mode == 'switch')
-    return options.ccdarktheme_switch_status;
+  switch (activeColorTheme) {
+    case kColorThemeMode.Auto:
+      return window.matchMedia &&
+          window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-  return window.matchMedia &&
-      window.matchMedia('(prefers-color-scheme: dark)').matches;
+    case kColorThemeMode.Light:
+      return false;
+
+    case kColorThemeMode.Dark:
+      return true;
+  }
 }
diff --git a/src/contentScripts/communityConsole/darkTheme/reportDialog.js b/src/contentScripts/communityConsole/darkTheme/reportDialog.js
new file mode 100644
index 0000000..d7c84a8
--- /dev/null
+++ b/src/contentScripts/communityConsole/darkTheme/reportDialog.js
@@ -0,0 +1,31 @@
+import {getCurrentColorTheme, kColorThemeMode} from './darkTheme';
+
+const kReportingWidgetThemes = {
+  [kColorThemeMode.Auto]: '0',
+  [kColorThemeMode.Light]: '1',
+  [kColorThemeMode.Dark]: '2',
+};
+
+export default class ReportDialogColorThemeFix {
+  constructor(options) {
+    this.optionsAtPageLoad = options;
+  }
+
+  fixThemeIfReportDialogIframeAndApplicable(iframe) {
+    if (!this.isReportDialogIframe(iframe)) return;
+
+    const currentColorTheme = getCurrentColorTheme(this.optionsAtPageLoad);
+
+    // By default the report dialog is added with the light theme
+    if (currentColorTheme === kColorThemeMode.Light) return;
+
+    console.debug('[reportDialogColorThemeFix] Fixing report dialog iframe');
+    let url = new URL(iframe.src);
+    url.searchParams.set('theme', kReportingWidgetThemes[currentColorTheme]);
+    iframe.src = url.href;
+  }
+
+  isReportDialogIframe(iframe) {
+    return iframe.src?.includes?.('reportingwidget') ?? false;
+  }
+}
diff --git a/src/contentScripts/communityConsole/main.js b/src/contentScripts/communityConsole/main.js
index 4381b86..0200394 100644
--- a/src/contentScripts/communityConsole/main.js
+++ b/src/contentScripts/communityConsole/main.js
@@ -6,6 +6,7 @@
 import AvatarsHandler from './avatars.js';
 import {batchLock} from './batchLock.js';
 import {injectDarkThemeButton, isDarkThemeOn} from './darkTheme/darkTheme.js';
+import ReportDialogColorThemeFix from './darkTheme/reportDialog.js';
 import {unifiedProfilesFix} from './darkTheme/unifiedProfiles.js';
 // #!if ['chromium', 'chromium_mv3'].includes(browser_target)
 import {applyDragAndDropFixIfEnabled} from './dragAndDropFix.js';
@@ -17,7 +18,7 @@
 import Workflows from './workflows/workflows.js';
 
 var mutationObserver, options, avatars, infiniteScroll, workflows,
-    threadToolbar, flattenThreads;
+    threadToolbar, flattenThreads, reportDialogColorThemeFix;
 
 const watchedNodesSelectors = [
   // App container (used to set up the intersection observer and inject the dark
@@ -55,7 +56,7 @@
   // Thread list (used for the autorefresh feature)
   'ec-thread-list',
 
-  // Unified profile iframe
+  // Unified profile iframe and report dialog iframe
   'iframe',
 
   // Canned response tags (for the "import CR" popup for the workflows feature)
@@ -178,10 +179,14 @@
       window.TWPTAutoRefresh.setUp();
     }
 
-    // Redirect unified profile iframe to dark version if applicable
-    if (node.tagName == 'IFRAME' && isDarkThemeOn(options) &&
-        unifiedProfilesFix.checkIframe(node)) {
-      unifiedProfilesFix.fixIframe(node);
+    if (node.tagName == 'IFRAME') {
+      // Redirect unified profile iframe to dark version if applicable
+      if (isDarkThemeOn(options) && unifiedProfilesFix.checkIframe(node)) {
+        unifiedProfilesFix.fixIframe(node);
+      }
+
+      // Set report dialog iframe's theme to the appropriate theme
+      reportDialogColorThemeFix.fixThemeIfReportDialogIframeAndApplicable(node);
     }
 
     // Add the "import" button in the canned responses view for the workflows
@@ -283,6 +288,7 @@
   workflows = new Workflows();
   threadToolbar = new ThreadToolbar();
   flattenThreads = new FlattenThreads();
+  reportDialogColorThemeFix = new ReportDialogColorThemeFix(options);
 
   // autoRefresh, extraInfo, threadPageDesignWarning and workflowsImport are
   // initialized in start.js