BootsFaces comes with the Bootstrap default theme and 16 Bootswatch themes. Plus, you can use an arbitrary third-party or custom Bootstrap theme.

Theme CSS support improved in BootsFaces 0.8.0

The BootsFaces_USETHEME context-param in your web.xml controls whether theme.css is loaded or not.

If you set the parameter to false, BootsFaces delivers a CSS file containing the basic layout instructions. This basic file doesn't contain shadows, decorations or colors, so it looks pretty boring. But it's a good starting point to implement your own look and feel.

Setting the parameter to true causes BootsFaces to load theme.css, this is true for Bootstrap and Bootswatch Themes.

BootsFaces also contains all 16 BootsWatch themes. You can activate any of these by setting BootsFaces_THEME to the name of the theme:

Custom themes

If you want to use a custom theme, set BootsFaces_THEME to custom . In this case, you have to add the custom theme files manually to your JSF page. Typically, the custom CSS files are a Bootstrap.min.css and a theme.css, so the import looks like this:

Switching themes

You can even implement a theme switcher by using an EL expression in the web.xml: