special case for dialogs - the theme class will apply to the page container when a dialog is shown, and that class will be removed when the dialog is hidden. This allows the transition to appear to affect only the inset window portion of the dialog page.

css/structure/jquery.mobile.dialog.css

@@ -1,5 +1,7 @@
 .ui-dialog { width: 92.5%; max-width: 500px; margin: 10% auto 15px auto; padding: 0; }
-
+.ui-dialog-page {
+	 background: none !important; /* this is to ensure that dialog theming does not apply (by default at least) on the page div */
+}
 .ui-dialog .ui-header {
 	margin-top: 15%;
 }

css/structure/jquery.mobile.transitions.flow.css

@@ -5,6 +5,11 @@
 	-webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
 	-moz-box-shadow: 0 0 20px rgba(0,0,0,.4);
 }
+.ui-dialog-page.flow {
+	-moz-transform-origin: none;	
+	-webkit-box-shadow: none;
+	-moz-box-shadow: none;
+}
 .flow.out {
 	-webkit-transform: translateX(-100%) scale(.7);
 	-webkit-animation-name: flowouttoleft;

js/jquery.mobile.dialog.js

@@ -62,6 +62,14 @@ $.widget( "mobile.dialog", $.mobile.widget, {
 		})
 		.bind( "pagehide", function() {
 			$( this ).find( "." + $.mobile.activeBtnClass ).removeClass( $.mobile.activeBtnClass );
+			if( self.options.overlayTheme ){
+				$.mobile.pageContainer.removeClass( "ui-body-" + self.options.overlayTheme );
+			}
+		})
+		.bind( "pagebeforeshow", function(){
+			if( self.options.overlayTheme ){
+				$.mobile.pageContainer.addClass( "ui-body-" + self.options.overlayTheme );
+			}
 		});
 	},