Switch Vue3 (PrimeVue) theme on load and click
Recommend way of including themes is by import in main.js
file at root of the app:
import 'primevue/resources/themes/arya-orange/theme.css';
But I'm look for a way to switch CSS file based on user system theme and on user selection so i moved this in 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("assets/themes/arya-orange/theme.css");
}
@media (prefers-color-scheme: light) {
@import url("assets/themes/arya-orange/theme.css");
}
</style>
I can not import anything inside mounted and in styles tag I can not import inside media also, both are not correct way of usage.
I can not find any other way online or guidance to solve this. All solutions are based on scoping components, using classes etc.
I could wrap all rules in one theme to
@media (prefers-color-scheme: dark) {
and another for light. But then again how could I switch on user selection?
Please advise.
EDIT:
I figured it out how can I do it on load:
(async () => {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
await import('primevue/resources/themes/arya-orange/theme.css');
}else {
await import('primevue/resources/themes/saga-blue/theme.css');
}
})();
If someone can advise how to do it on click.
from Recent Questions - Stack Overflow https://ift.tt/3xHXWBY
https://ift.tt/eA8V8J
Comments
Post a Comment