ThemeSwitcher ThemeSwitcher applies new themes on-the-fly without full page refresh.

Dialog
Resistance to PrimeFaces is futile!
Panel
Panel Content
Tab1 Content
<h:form>

    <h:panelGrid columns="2" cellpadding="10">
        <p:outputLabel for="basic" value="Basic:" />
        <p:themeSwitcher id="basic" style="width:165px">
            <f:selectItem itemLabel="Choose Theme" itemValue="" />
            <f:selectItems value="#{themeSwitcherView.themes}" var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme.name}"/>
        </p:themeSwitcher>

        <p:outputLabel for="advanced" value="Advanced:" />
        <p:themeSwitcher id="advanced" style="width:165px" effect="fade" var="t">
            <f:selectItem itemLabel="Choose Theme" itemValue="#{null}" />
            <f:selectItems value="#{themeSwitcherView.themes}" var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" />

            <p:column>
                <h:outputText styleClass="ui-theme ui-theme-#{t.name}" style="display-block" />
            </p:column>

            <p:column>
                #{t.displayName}
            </p:column>
        </p:themeSwitcher>
    </h:panelGrid>

    <p:separator />

    <p:dialog header="Dialog" widgetVar="dlg" minHeight="40" modal="true">
        <h:outputText value="Resistance to PrimeFaces is futile!" />
    </p:dialog>

    <p:commandButton value="Dialog" onclick="PF('dlg').show()" type="button" style="display:block;"/>

    <p:panel header="Panel" style="margin:20px 0px">
        Panel Content
    </p:panel>

    <p:spinner />

    <p:toolbar style="margin:20px 0px">
        <f:facet name="left">
            <p:commandButton type="button" value="New" icon="ui-icon-document" />
            <p:commandButton type="button" value="Open" icon="ui-icon-folder-open"/>
            <p:commandButton type="button" title="Save" icon="ui-icon-disk"/>
            <p:commandButton type="button" title="Delete" icon="ui-icon-trash"/>
            <p:commandButton type="button" title="Print" icon="ui-icon-print"/>
        </f:facet>

        <f:facet name="right">
            <p:menuButton value="Navigate">
                <p:menuitem value="Home" url="http://www.primefaces.org" />
                <p:menuitem value="ShowCase" url="http://www.primefaces.org/showcase" />
                <p:menuitem value="TouchFaces" url="http://www.primefaces.org/showcase/touch" />
            </p:menuButton>
        </f:facet>
    </p:toolbar>

    <p:accordionPanel>
        <p:tab title="Tab1">Tab1 Content</p:tab>
        <p:tab title="Tab2">Tab2 Content</p:tab>
        <p:tab title="Tab3">Tab3 Content</p:tab>
    </p:accordionPanel>

</h:form>
                
PrimeTek, Copyright © 2017
All rights reserved.
Running PrimeFaces-6.3-SNAPSHOT on Mojarra-2.3.2.