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添加到body标记，因为该面板继承自页面。

奥马尔在评论中告诉我这一点，并建议将自己作为答案发布。