How to change data-role "content" in ui-popup theme?

Question

i try to customize the theme of jquery mobile. In the documentation of "ui-popup" i found two options that I can change concerning theming:

$.mobile.popup.prototype.options.overlayTheme = "jobstaff-de"; 
$.mobile.popup.prototype.options.theme = "jobstaff-de"; 

This results the following:

<div data-role="popup" id="loginDialog" class="ui-body-jobstaff-de"  data-theme="jobstaff-de" data-overlay-theme="jobstaff-de">...</div>

So far so good. My question refers to the inner html of this div-area. I found this in it:

<div data-role="content" class="ui-body-c" data-theme="c" role="main">...</div>

Why the theme is reset to "c" here? Do I need to change something else?

Thanks for any help!!

---

EDIT 1 for Orma: the following themes I changed, too. I've put them into a file called jquery.mobile.theme.js which is loaded after jquery.js but before jquery.mobile.js:

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.mobile.theme.js'></script>
<script type='text/javascript' src='js/jquery.mobile.js'></script>

content of jquery.mobile.theme.js: (jquery.js and jquery.mobile.js are unchanged)

$(document).bind('mobileinit', function () {

    $.mobile.page.prototype.options.theme               = "jobstaff-de";
    $.mobile.page.prototype.options.headerTheme         = "jobstaff-de";  
    $.mobile.page.prototype.options.contentTheme        = "jobstaff-de";
    $.mobile.page.prototype.options.footerTheme         = "jobstaff-de";
    $.mobile.page.prototype.options.backBtnTheme        = "jobstaff-de"; 

    // Popups
    $.mobile.popup.prototype.options.overlayTheme       = "jobstaff-de"; 
    $.mobile.popup.prototype.options.theme              = "jobstaff-de"; 

    // listviews
    $.mobile.listview.prototype.options.headerTheme     = "jobstaff-de";  // Header for nested lists
    $.mobile.listview.prototype.options.theme           = "jobstaff-de";  // List items / content
    $.mobile.listview.prototype.options.dividerTheme    = "jobstaff-de";  // List divider
    $.mobile.listview.prototype.options.splitTheme      = "jobstaff-de";
    $.mobile.listview.prototype.options.countTheme      = "jobstaff-de";
    $.mobile.listview.prototype.options.filterTheme     = "jobstaff-de";

    // selectmenu
    $.mobile.selectmenu.prototype.options.menuPageTheme = "jobstaff-de"; 
    $.mobile.selectmenu.prototype.options.overlayTheme  = "jobstaff-de"; 
    $.mobile.selectmenu.prototype.options.theme         = "jobstaff-de"; 

    // dialog
    $.mobile.dialog.prototype.options.theme             = "jobstaff-de"; 

    // panel
    $.mobile.panel.prototype.options.theme              = "jobstaff-de"; 

    //input
    $.mobile.textinput.prototype.options.theme          = "jobstaff-de"; 

    // buttons
    $.mobile.button.prototype.options.theme             = "jobstaff-de"; 


});

Answer 1

I have never modified themes like this :-)

Why don't you just write your jobstaff-de theme (which I assume you have) and manually set it on your JQM page:

<div data-role="page" data-theme="jobstaff-de">
  // all widgets will inherit jobstaff-de
</div>

In JQM 1.4, this single theme declaration should be enough to inherit the theme to all widgets on the page without having to specify it again - so no need to overwrite any defaults IMHO.