diff --git a/markitect/clean_document_manager.py b/markitect/clean_document_manager.py
index 0c2f7910..95e76d18 100644
--- a/markitect/clean_document_manager.py
+++ b/markitect/clean_document_manager.py
@@ -297,7 +297,42 @@ class CleanDocumentManager:
                 opacity: 0.8;
             }}"""
 
-        return f"<style>{base_css}{heading_css}{text_css}{element_css}{link_css}{accent_css}</style>"
+        # UI theme styling for editor interface elements
+        ui_css = ""
+        if props.get('editor_panel_bg'):
+            ui_css = f"""
+            .markitect-edit-mode .markitect-control-panel {{
+                background: {props['editor_panel_bg']};
+                border: 1px solid {props.get('editor_panel_border', '#dee2e6')};
+                box-shadow: 0 4px 12px {props.get('editor_shadow', 'rgba(0,0,0,0.1)')};
+                color: {props.get('editor_text_color', '#212529')};
+            }}
+            .markitect-edit-mode .markitect-editor-button {{
+                background: {props.get('editor_button_bg', '#ffffff')};
+                color: {props.get('editor_text_color', '#212529')};
+                border: 1px solid {props.get('editor_panel_border', '#dee2e6')};
+            }}
+            .markitect-edit-mode .markitect-editor-button:hover {{
+                background: {props.get('editor_button_hover', '#e9ecef')};
+            }}
+            .markitect-edit-mode .markitect-editor-button:active,
+            .markitect-edit-mode .markitect-editor-button.active {{
+                background: {props.get('editor_button_active', '#dee2e6')};
+            }}
+            .markitect-edit-mode .markitect-section-frame {{
+                border: 2px solid {props.get('editor_focus_color', '#0066cc')};
+                box-shadow: 0 0 0 3px {props.get('editor_focus_color', '#0066cc')}33;
+            }}
+            .markitect-edit-mode .markitect-edit-textarea {{
+                border: 1px solid {props.get('editor_panel_border', '#dee2e6')};
+                color: {props.get('editor_text_color', '#212529')};
+            }}
+            .markitect-edit-mode .markitect-edit-textarea:focus {{
+                border-color: {props.get('editor_focus_color', '#0066cc')};
+                box-shadow: 0 0 0 2px {props.get('editor_focus_color', '#0066cc')}33;
+            }}"""
+
+        return f"<style>{base_css}{heading_css}{text_css}{element_css}{link_css}{accent_css}{ui_css}</style>"
 
     def _get_legacy_template_css(self, template: str) -> str:
         """Legacy CSS generation - kept for backward compatibility."""