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:
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.Create ThemeSwitcher component using
<p:themeSwitcher>
withvalue="#{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="" /> <f:selectItems value="#{userPreferences.themes}" />...