Posted under PrimeNG
Permalink
Tags themes, Tip, Tutorial
Update 12/5/2017
Note that there are issues when trying to use the standard themes loaded by the PrimeNG installation, which reside under node_modules. Basically, the traditional use of the link tag did not work even though the style files were present. This appears to be an issue relating to how the application is packaged and served.
See this post in the ‘Styles configuration issue’ near the end for details and resolution on this problem.
Original Post
This is handled in much the same way as it was in JSF – a directory for each theme holds its scss and css files.
Normally these are bundled in as part of an npm installation of primeng, so the themes end up under node_modules\primeng\resources\themes, but this may differ if you have your own custom themes.
The PrimeNG showcase for example does not use an npm install of primeng, but declares its own primeng package as it contains everything. It therefore puts the themes under resource\themes. See this post for issues with this re getting the showcase to work locally.
The showcase is instructive as a simple example of how to switch themes – at present there does not appear to be a theme switcher/manager component available.
The basic style link tag which picks up a theme is in index.html:-
<link rel="stylesheet" type="text/css" href="resources/themes/omega/theme.css">
The following javascript function modifies this dynamically as themes are selected:-
var DemoApp = {
changeTheme: function(event, element) {
var theme = $(element).data("theme"),
themeLink = $('link[href$="theme.css"]'),
newThemeURL = 'resources/themes/' + theme + '/theme.css';
themeLink.attr('href', newThemeURL);
event.preventDefault();
}
};
The following markup is used for theme selection, based on a hard coded list of the themes available:-
<span class="topbar-link" id="themeSwitcher"
(mouseenter)="themesVisible = true" (mouseleave)="themesVisible = false">
<img src="showcase/resources/images/themeswitcher.svg" />
<span>Themes</span>
<div id="GlobalThemeSwitcher" [style.display]="themesVisible ? 'block' : 'none'" style="margin-top:10px">
<span>Premium Templates</span>
<a href="http://www.primefaces.org/layouts/ultima-ng">
<img src="showcase/resources/images/themeswitcher-ultima.png" alt="Ultima Template">
<span class="ui-text">Ultima</span></a>
<a href="http://www.primefaces.org/layouts/barcelona-ng">
<img src="showcase/resources/images/themeswitcher-barcelona.png" alt="Barcelona Template">
<span class="ui-text">Barcelona</span></a>
<a href="http://www.primefaces.org/layouts/morpheus-ng">
<img src="showcase/resources/images/themeswitcher-morpheus.png" alt="Morpheus Template">
<span class="ui-text">Morpheus</span></a>
<a href="http://www.primefaces.org/layouts/atlantis-ng">
<img src="showcase/resources/images/themeswitcher-atlantis.png" alt="Atlantis Template">
<span class="ui-text">Atlantis</span></a>
<a href="http://www.primefaces.org/layouts/poseidon-ng">
<img src="showcase/resources/images/themeswitcher-poseidon.png" alt="Poseidon Template">
<span class="ui-text">Poseidon</span></a>
<a href="http://www.primefaces.org/layouts/omega-ng">
<img src="showcase/resources/images/themeswitcher-omega.png" alt="Omega Template">
<span class="ui-text">Omega</span></a>
<span>Free Themes</span>
<a href="#" data-theme="omega" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Omega</span></a>
<a href="#" data-theme="bootstrap" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Bootstrap</span></a>
<a href="#" data-theme="cupertino" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Cupertino</span></a>
<a href="#" data-theme="cruze" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Cruze</span></a>
<a href="#" data-theme="darkness" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Darkness</span></a>
<a href="#" data-theme="flick" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Flick</span></a>
<a href="#" data-theme="home" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Home</span></a>
<a href="#" data-theme="kasper" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Kasper</span></a>
<a href="#" data-theme="lightness" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Lightness</span></a>
<a href="#" data-theme="ludvig" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Ludvig</span></a>
<a href="#" data-theme="pepper-grinder" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Pepper-Grinder</span></a>
<a href="#" data-theme="redmond" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Redmond</span></a>
<a href="#" data-theme="rocket" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Rocket</span></a>
<a href="#" data-theme="south-street" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">South-Street</span></a>
<a href="#" data-theme="start" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Start</span></a>
<a href="#" data-theme="trontastic" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Trontastic</span></a>
<a href="#" data-theme="voclain" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Voclain</span></a>
</div>
</span>