ThemeSwitcher ThemeSwitcher applies new themes on-the-fly without full page refresh.
  • Choose Theme
  • Afterdark
  • Afternoon
  • Afterwork
  • Aristo
  • Black-Tie
  • Blitzer
  • Bluesky
  • Bootstrap
  • Casablanca
  • Cupertino
  • Cruze
  • Dark-Hive
  • Delta
  • Dot-Luv
  • Eggplant
  • Excite-Bike
  • Flick
  • Glass-X
  • Home
  • Hot-Sneaks
  • Humanity
  • Le-Frog
  • Midnight
  • Mint-Choc
  • Omega
  • Overcast
  • Pepper-Grinder
  • Redmond
  • Rocket
  • Sam
  • Smoothness
  • South-Street
  • Start
  • Sunny
  • Swanky-Purse
  • Trontastic
  • UI-Darkness
  • UI-Lightness
  • Vader
Choose Theme
Afterdark
Afternoon
Afterwork
Aristo
Black-Tie
Blitzer
Bluesky
Bootstrap
Casablanca
Cupertino
Cruze
Dark-Hive
Delta
Dot-Luv
Eggplant
Excite-Bike
Flick
Glass-X
Home
Hot-Sneaks
Humanity
Le-Frog
Midnight
Mint-Choc
Omega
Overcast
Pepper-Grinder
Redmond
Rocket
Sam
Smoothness
South-Street
Start
Sunny
Swanky-Purse
Trontastic
UI-Darkness
UI-Lightness
Vader

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="[afterdark, afternoon, afterwork, aristo, black-tie, blitzer, bluesky, bootstrap, casablanca, cupertino, cruze, dark-hive, delta, dot-luv, eggplant, excite-bike, flick, glass-x, home, hot-sneaks, humanity, le-frog, midnight, mint-choc, omega, overcast, pepper-grinder, redmond, rocket, sam, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vader]" var="theme" itemLabel="" itemValue=""/>
        </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="" />
            <f:selectItems value="[afterdark, afternoon, afterwork, aristo, black-tie, blitzer, bluesky, bootstrap, casablanca, cupertino, cruze, dark-hive, delta, dot-luv, eggplant, excite-bike, flick, glass-x, home, hot-sneaks, humanity, le-frog, midnight, mint-choc, omega, overcast, pepper-grinder, redmond, rocket, sam, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vader]" var="theme" itemLabel="" itemValue="" />

            <p:column>
                <h:outputText styleClass="ui-theme ui-theme-" style="display-block" />
            </p:column>

            <p:column>
                
            </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 © 2015
All rights reserved.
Running PrimeFaces-6.0.16 on Mojarra-2.2.8.