How can one have a theme switcher in primereact - reactjs

Question

I would like to be in a position to switch between themes in primereact rather than import one theme and then it affects my whole app and I don't have an option to switch between dark or light mode.

Answer 1

Observing how they do it on the website www.primefaces.org/primereact/showcase/, open Developer view: Elements, and one can notice that choosing a different theme changes css file link in HTML header:
<link id="theme-link" rel="stylesheet" href="./themes/bootstrap4-light-blue/theme.css">
becomes
<link id="theme-link" rel="stylesheet" href="./themes/bootstrap4-light-purple/theme.css">
It is fairly easy to switch link element HREF from one to another.
This page talks about primereact theme switching:
Switch Your React App Between Material, Bootstrap and Custom Themes at Runtime
But the method it describes is too convoluted, involves ejecting and custom webpack, to bundle all theme CSS files and import them programmatically, like that:
const changeTheme = (theme) => {
import(`./${theme}.scss`).then((module) => {
if (selectedThemeModule) {
selectedThemeModule.unuse();
}
module.use();
setSelectedThemeModule(module);
});
}
Instead, grab the example repo where they do method of link HREF swap: github.com/mertsincan/primereact-dynamic-theming/
example-1 has code for the convoluted method from the above page, you can skip it and go to example-2, which is much simpler.
In a nutshell, add to 'public/index.html', in <header> section:
<link id="app-theme" rel="stylesheet" type="text/css" href="saga-blue.css">
And use this function:
const changeTheme = (theme) => {
let themeLink = document.getElementById('app-theme');
if (themeLink) {
themeLink.href = theme + '.css';
}
}
Then just call changeTheme(XXX) when theme XXX is clicked.
Next put .css files into the right place - just copy all node_modules/primereact/themes/*/theme.css files into public folder (giving them corresponding theme names). Some theme.css reference fonts - search for "url" in each file, and if present, copy corresponding fonts/ directory too.
I should mention that benefits of example-1 is using minified and bundled CSS files, so themes will be switching faster. If that's important, then follow the above linked tutorial and example-1. Also note that example-2 has very similar setup to example-1 (eject and custom webpack config), but only to copy css files to the right output folder, which can be skipped in favor of copying files by hand once.