One way to incorporate themes is by importing them in the main.js file at the root of the app:
import 'primevue/resources/themes/arya-orange/theme.css';
However, I am exploring ways to dynamically switch CSS files based on the user's system theme and selection. Therefore, I moved this logic into my main App.vue:
export default {
name: "App",
components: {
HelloWorld,
toDo,
},
mounted() {
//window.matchMedia('(prefers-color-scheme: dark)').matches ? do dark : do light
},
};
<style>
@media (prefers-color-scheme: dark) {
@import url("primevue/resources/themes/bootstrap4-dark-blue/theme.css");
}
@media (prefers-color-scheme: light) {
@import url("primevue/resources/themes/bootstrap4-light-blue/theme.css");
}
</style>
I cannot import anything inside mounted, and importing inside media queries within style tags is not considered correct usage.
After researching, I could not find any alternative solutions or guidance to resolve this issue. The existing solutions mainly focus on scoping components and using classes.
One approach I could consider is consolidating all rules for one theme under:
@media (prefers-color-scheme: dark) {
and another set for the light theme. However, this does not address how to switch themes based on user selection.
EDIT:
I managed to make it work upon loading:
(async () => {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
await import('primevue/resources/themes/bootstrap4-dark-blue/theme.css');
} else {
await import('primevue/resources/themes/bootstrap4-light-blue/theme.css');
}
})();
Additionally, on user click, the initial import can be overridden with:
methods: {
theme() {
(async () => {
await import("primevue/resources/themes/bootstrap4-light-blue/theme.css");
})();
},
},
HOWEVER, when attempting to toggle back to the original theme upon click, nothing happens. This might be due to the dark theme being loaded initially if the system was set to dark. As a result, toggling back to the dark theme upon click does not take effect because it was already loaded initially.
Any suggestions would be greatly appreciated.