agtemplateweb/target/agtemplate-1.0.0/template/config.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <div id="layout-config" class="layout-config">
        <div class="layout-config-content">
            <a href="#" id="layout-config-button" class="layout-config-button">
                <i class="pi pi-cog"/>
            </a>
            <h:form id="config-form" styleClass="layout-config-form">
                <div class="layout-config-header">
                    <h5>Theme Customization</h5>
                    <span>Poseidon offers different themes for layout, topbar, menu etc.</span>
                </div>

                <p:outputPanel id="lightdark-panel" styleClass="layout-config-section options">
                    <span class="section-name">Layout Mode</span>
                    <div class="grid layout-config-options">
                        <p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.darkMode}" onchange="PrimeFaces.PoseidonConfigurator.changeLayout('#{guestPreferences.componentTheme}', event.target.value)"   >
                            <f:selectItem itemLabel="Light" itemValue="light" />
                            <f:selectItem itemLabel="Dark" itemValue="dark" />
                            <f:selectItem itemLabel="Dim" itemValue="dim" />
                            <p:ajax onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()" update="config-form logolink footerlogolink"/>
                        </p:selectOneRadio>
                    </div>
                </p:outputPanel>

                <p:outputPanel id="menumodes-panel" styleClass="layout-config-section options">
                    <span class="section-name">Menu Mode</span>
                    <div class="grid layout-config-options">
                        <p:selectOneRadio layout="responsive" columns="2" value="#{guestPreferences.menuMode}" onchange="PrimeFaces.PoseidonConfigurator.changeMenuMode(event.target.value)" >
                            <f:selectItem itemLabel="Static" itemValue="layout-static layout-static-active" />
                            <f:selectItem itemLabel="Overlay" itemValue="layout-overlay" />
                            <f:selectItem itemLabel="Horizontal" itemValue="layout-horizontal" />
                            <p:ajax update="menumodes-panel" />
                        </p:selectOneRadio>
                    </div>
                </p:outputPanel>

                <p:outputPanel id="menuthemes-panel" styleClass="layout-config-section options">
                    <span class="section-name">Menu Theme</span>
                    <div class="grid layout-config-options">
                        <p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.menuTheme}" onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-menu')"   >
                            <f:selectItem itemLabel="Light" itemValue="light" itemDisabled="#{guestPreferences.darkMode != 'light'}"  />
                            <f:selectItem itemLabel="Dark" itemValue="dark" itemDisabled="#{guestPreferences.darkMode != 'light'}"  />
                            <f:selectItem itemLabel="Dim" itemValue="dim" itemDisabled="#{guestPreferences.darkMode != 'light'}" />
                            <p:ajax update="logolink menuthemes-panel"/>
                        </p:selectOneRadio>
                    </div>
                </p:outputPanel>

                <p:outputPanel id="topbarthemes-panel" styleClass="layout-config-section options">
                    <span class="section-name">Topbar Mode</span>
                    <div class="grid layout-config-options">
                        <p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.topbarTheme}" onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-topbar')"   >
                            <f:selectItem itemLabel="Light" itemValue="light" itemDisabled="#{guestPreferences.darkMode != 'light'}"  />
                            <f:selectItem itemLabel="Dark" itemValue="dark" itemDisabled="#{guestPreferences.darkMode != 'light'}" />
                            <f:selectItem itemLabel="Dim" itemValue="dim" itemDisabled="#{guestPreferences.darkMode != 'light'}" />
                            <p:ajax update="logolink config-form"/>
                        </p:selectOneRadio>
                    </div>
                </p:outputPanel>

                <p:outputPanel id="outlined-panel" styleClass="layout-config-section options">
                    <span class="section-name">Form Type</span>
                    <div class="grid layout-config-options">
                        <p:selectOneRadio layout="responsive" columns="2" value="#{guestPreferences.inputStyle}"
                                          onchange="PrimeFaces.PoseidonConfigurator.updateInputStyle(event.target.value)">
                            <f:selectItem itemLabel="Outlined" itemValue="outlined" />
                            <f:selectItem itemLabel="Filled" itemValue="filled" />
                            <p:ajax />
                        </p:selectOneRadio>
                    </div>
                </p:outputPanel>

                <p:outputPanel id="orientation-panel" styleClass="layout-config-section dark">
                    <span class="section-name">RTL Mode</span>
                    <p:inputSwitch id="layout-switch-2" value="#{guestPreferences.orientationRTL}" onchange="PrimeFaces.PoseidonConfigurator.changeMenuToRTL()">
                        <p:ajax onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()" update="config-form" />
                    </p:inputSwitch>
                </p:outputPanel>

                <p:outputPanel id="componentthemes-panel" styleClass="layout-config-section colors">
                    <span class="section-name">Component Colors</span>
                    <div class="grid layout-config-colors">
                        <ui:repeat value="#{guestPreferences.componentThemes}" var="componentTheme">
                            <div class="col col-fixed">
                                <p:commandLink styleClass="layout-config-option" 
                                    actionListener="#{guestPreferences.setComponentTheme(componentTheme.file)}" process="@this"
                                    update=":config-form"
                                    onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
                                    oncomplete="PrimeFaces.PoseidonConfigurator.changeComponentsTheme('#{componentTheme.file}', '#{guestPreferences.darkMode}')">
                                    <span class="layout-config-option-color"
                                        style="background-color: #{componentTheme.color};" title="#{componentTheme.name}"></span>
                                    <ui:fragment rendered="#{componentTheme.file eq guestPreferences.componentTheme}">
                                        <span class="layout-config-option-check-mask">
                                            <i class="pi pi-check"></i>
                                        </span>
                                    </ui:fragment>
                                </p:commandLink>
                            </div>
                        </ui:repeat>
                    </div>
                </p:outputPanel>

            </h:form>
        </div>
    </div>
</ui:composition>