diff --git a/docs/development/ZENTRAL.md b/docs/development/ZENTRAL.md
index 8ab607f..06c0571 100644
--- a/docs/development/ZENTRAL.md
+++ b/docs/development/ZENTRAL.md
@@ -14,3 +14,5 @@ File riassuntivo dello stato di sviluppo di Zentral.
   - Refinement logica attivazione/acquisto moduli, gestione dipendenze e UI.
 - [2025-12-03 Move Reports Menu](./devlog/2025-12-03_move_reports_menu.md) - **Completato**
   - Spostamento voce menu Report sotto Amministrazione.
+- [2025-12-03 Report Designer Theme](./devlog/2025-12-03_report_designer_theme.md) - **Completato**
+  - Allineamento completo del Report Designer al tema scuro (Canvas, Toolbar, Dialogs).
diff --git a/docs/development/devlog/2025-12-03_report_designer_theme.md b/docs/development/devlog/2025-12-03_report_designer_theme.md
new file mode 100644
index 0000000..25fa59a
--- /dev/null
+++ b/docs/development/devlog/2025-12-03_report_designer_theme.md
@@ -0,0 +1,34 @@
+# Report Designer Theme Alignment
+
+## Obiettivo
+Allineare completamente il Report Designer al tema scuro dell'applicazione. L'obiettivo è eliminare incongruenze visive come sfondi bianchi hardcoded, griglie poco visibili e componenti non adattivi in modalità dark.
+
+## Stato Attuale
+**Completato**
+
+## Modifiche Apportate
+
+### 1. Editor Canvas (`EditorCanvas.tsx`)
+- **Sfondo Canvas**: Implementata logica dinamica per utilizzare `#1e1e1e` (dark) o `#ffffff` (light) in base al tema.
+- **Griglia**: Colore delle linee della griglia reso dinamico (`#333333` in dark mode) per garantire visibilità.
+- **Shadows & Selection**: Aggiornati colori di selezione e ombre per essere coerenti con il tema.
+
+### 2. Toolbar (`EditorToolbar.tsx`)
+- **Background Pulsanti**: Sostituiti i colori hardcoded `grey.100` e `grey.200` con i token del tema `action.hover` e `action.selected`.
+- **Visibilità**: Migliorato il contrasto delle icone e dei testi nella toolbar.
+
+### 3. Designer Page (`ReportEditorPage.tsx`)
+- **Sfondo Workspace**: Lo sfondo del contenitore principale (dietro il foglio) ora utilizza `theme.palette.background.default` in dark mode invece di un grigio scuro hardcoded, uniformandosi al resto dell'app.
+
+### 4. Pannelli Laterali (`DataBindingPanel.tsx`, `DatasetSelector.tsx`)
+- **Empty States**: Sostituiti sfondi `grey.50` con `background.default` per le schermate di "Nessun dataset selezionato".
+- **Liste e Header**: Aggiornati i colori di sfondo degli header e degli elementi delle liste per utilizzare `action.hover` e colori primari con opacità corretta.
+
+### 5. Dialogs (`PreviewDialog.tsx`, `ImageUploadDialog.tsx`)
+- **Preview**: Sfondi delle liste e delle sezioni di dettaglio aggiornati a `background.default`.
+- **Image Upload**: Corretti sfondi dell'area di drag & drop e dei pannelli per supportare il dark mode.
+- **Fix Tecnici**: Aggiunta importazione mancante `alpha` in `ImageUploadDialog.tsx`.
+
+## Prossimi Passi Suggeriti
+- Verificare eventuali altri dialoghi minori nel report editor (es. impostazioni avanzate) per assicurare copertura totale.
+- Testare l'export PDF per assicurarsi che i colori di sfondo (se non desiderati) non vengano esportati erroneamente (il canvas background è solo visuale).
diff --git a/src/frontend/src/components/reportEditor/ImageUploadDialog.tsx b/src/frontend/src/components/reportEditor/ImageUploadDialog.tsx
index 18326a6..e81cce5 100644
--- a/src/frontend/src/components/reportEditor/ImageUploadDialog.tsx
+++ b/src/frontend/src/components/reportEditor/ImageUploadDialog.tsx
@@ -17,6 +17,7 @@ import {
   useTheme,
   AppBar,
   Toolbar,
+  alpha,
 } from "@mui/material";
 import {
   CloudUpload as UploadIcon,
@@ -324,7 +325,9 @@ export default function ImageUploadDialog({
               borderRadius: 2,
               p: isMobile ? 3 : 4,
               textAlign: "center",
-              bgcolor: isDragging ? "primary.50" : "grey.50",
+              bgcolor: isDragging
+                ? (theme) => alpha(theme.palette.primary.main, 0.08)
+                : "background.default",
               cursor: "pointer",
               transition: "all 0.2s",
               minHeight: isMobile ? 150 : "auto",
@@ -425,7 +428,7 @@ export default function ImageUploadDialog({
               border: 1,
               borderColor: "divider",
               borderRadius: 2,
-              bgcolor: "grey.50",
+              bgcolor: "background.default",
             }}
           >
             <Typography variant="subtitle2" color="primary" gutterBottom>
@@ -436,7 +439,7 @@ export default function ImageUploadDialog({
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center",
-                bgcolor: "white",
+                bgcolor: "background.paper",
                 borderRadius: 1,
                 p: 1,
                 mb: 1,
diff --git a/src/frontend/src/components/reportEditor/PreviewDialog.tsx b/src/frontend/src/components/reportEditor/PreviewDialog.tsx
index 3cbb737..ca370a5 100644
--- a/src/frontend/src/components/reportEditor/PreviewDialog.tsx
+++ b/src/frontend/src/components/reportEditor/PreviewDialog.tsx
@@ -240,8 +240,8 @@ export default function PreviewDialog({
         const query = entityQueries[index];
         const selectedEntity = isSelected
           ? ((query.data as EntityListItemDto[]) || []).find(
-              (e) => e.id === selections[dataset.id],
-            )
+            (e) => e.id === selections[dataset.id],
+          )
           : null;
 
         return (
@@ -319,7 +319,7 @@ export default function PreviewDialog({
             p: 2,
             borderBottom: 1,
             borderColor: "divider",
-            bgcolor: "grey.50",
+            bgcolor: "background.default",
           }}
         >
           {isMobile && (
@@ -478,7 +478,7 @@ export default function PreviewDialog({
             p: 1,
             borderTop: 1,
             borderColor: "divider",
-            bgcolor: "grey.50",
+            bgcolor: "background.default",
           }}
         >
           <Typography variant="caption" color="text.secondary">
@@ -571,7 +571,7 @@ export default function PreviewDialog({
                 <Box
                   sx={{
                     p: 2,
-                    bgcolor: "grey.50",
+                    bgcolor: "background.default",
                     borderBottom: 1,
                     borderColor: "divider",
                   }}