jquery UI & MediaWiki

jquery UI & MediaWiki

HI, I'am writing an extension for MediaWiki and utilize the jquery/jquery UI delivered with Mediawiki (MediaWiki 1.22.0, jquery 1.8.3, jquery ui 1.8.24). For usability reasons I decided to use a custom theme (=sunny) which I downloaded from the theme roller.

When I open a dialog box then for example for the header the font color (white) is taken from theme file, whereas the (nearly white) background comes from mediawiki. The reason is that the CSS rule which applies is "body .ui-dialog .ui-widget-header { bacjkground: url(...) !important; }" whereas the  theme rule is ".sunny .uni-dialog-header {background: url(..); }" (second position in specificity).

To increase specificity of the theme CSS rule I changed it to ".mediawiki .sunny .uni-dialog-header {background: url(..); !important; }" which works. However, I do not want to tamper with downloaded themes. Is there any other solution, e.g. to invalidate some CSS rules/files via jquery for a dialog box? Would it make sense that I deliver and use my own jquery UI and/or jquery with my extension?

Thanks in advance