Внешняя панель JQM не включает пользовательские цвета

Question

Я просто попытался применить тему nativedroid JQM для внешних панелей. Я знаю, что enhanceWithin() должен решить это полностью, но это не так. Цвета Nativedroid css не применяются к внешней панели. Я сделал JSFiddle, чтобы продемонстрировать это поведение. При нормальной панели все нормально, но внешняя панель отображается без зеленого стиля, который должен быть там.

JSFiddle Example

Как решить эту проблему?

<script id="panel-init"> 
    $(function() { 
    $("#externalPanel").panel().enhanceWithin(); 
    }); 

</script> 


<div data-role="panel" id="externalPanel" data-position-fixed="true" data-display="push" data-theme="b"> 
    <!-- panel content goes here --> 
    <ul data-role="listview" data-theme="b" data-dividertheme="b" data-inset="false"> 
    <li>External Panel</li> 
    <li data-icon='false'><a href="#"><i class='lIcon fa fa-coffee'></i>Need a Coffee</a></li> 
    <li data-icon='false'><a href="#"><i class='lIcon fa fa-beer'></i>Have a Beer</a></li> 
    <li data-icon='false'><a href="#"><i class='lIcon fa fa-music'></i>Play Music</a></li> 
    <li data-icon='false'><a href="#"><i class='lIcon fa fa-fire'></i>Make a fire</a></li> 
    </ul> 
</div> 
<!-- /panel --> 

<div data-role="page" id="one" data-theme='b'> 
    <div data-role="panel" id="internalPanel" data-position-fixed="true" data-display="push" data-theme="b"> 
    <!-- panel content goes here --> 
    <ul data-role="listview" data-theme="b" data-dividertheme="b" data-inset="false"> 
     <li>Internal Panel</li> 
     <li data-icon='false'><a href="#"><i class='lIcon fa fa-coffee'></i>Need a Coffee</a></li> 
     <li data-icon='false'><a href="#"><i class='lIcon fa fa-beer'></i>Have a Beer</a></li> 
     <li data-icon='false'><a href="#"><i class='lIcon fa fa-music'></i>Play Music</a></li> 
     <li data-icon='false'><a href="#"><i class='lIcon fa fa-fire'></i>Make a fire</a></li> 
    </ul> 
    </div> 
    <!-- /panel --> 
    <div data-role="header" data-theme='b'> 
    <h1>Single page</h1> 
    </div> 
    <!-- /header --> 

    <div role="main" class="ui-content"> 
    <a href="#externalPanel" data-theme="b" data-role="button">Open EXTERNAL panel</a> 
    <a href="#internalPanel" data-theme="b" data-role="button">Open INTERNAL panel</a> 

    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
     takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores 
     et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
    </div> 
    <!-- /content --> 

</div> 
<!-- /page --> 

Answer 1

В случае, если кто-нибудь имеет подобную проблему - решение:

Добавьте класс ui-page-theme-b в тег тела, так как панель наследует от страницы.

Омар сказал мне это в своем комментарии и посоветовал опубликовать его сам в качестве ответа.