ThemeSwitcher

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

Documentation

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:graphicImage name="showcase/images/themeswitcher/themeswitcher-#{t.name}.png" alt="#{t.name}" styleClass="ui-theme"/>
            </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="pi pi-file" />
            <p:commandButton type="button" value="Open" icon="pi pi-folder-open"/>
            <p:commandButton type="button" title="Save" icon="pi pi-save"/>
            <p:commandButton type="button" title="Delete" icon="pi pi-trash"/>
            <p:commandButton type="button" title="Print" icon="pi pi-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>

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.