Time for action – applying a user-specific theme using stateful ThemeSwitcher

In this section we will learn how to use the ThemeSwitcher component to apply theme for entire application based on user preference, and how a user can dynamically switch themes:

1. Configure Primefaces theme name in web.xml using EL expression:

   <context-param>
     <param-name>primefaces.THEME</param-name>
     <param-value>#{userPreferences.selectedTheme}</param-value>
   </context-param>

   Here EL expression #{userPreferences.selectedTheme} resolves to a theme name.

2. Create ThemeSwitcher component using <p:themeSwitcher> with value="#{userPreferences.selectedTheme}" along with the AJAX event listener to update the user-preferred theme to the selected theme name on server side:

   <p:themeSwitcher value="#{userPreferences.selectedTheme}"  style="width:165px">  
     <f:selectItem itemLabel="Choose Theme" itemValue="" />  
    ...