Is there a way to change the theme using Prime Vue without directly modifying the index.html file with
<link id="lara-light-indigo" rel="stylesheet" href="/themes/lara-light-indigo/theme.css">Currently, I am managing my theme by importing it in the main.js file like this:
import "primevue/resources/themes/lara-light-indigo/theme.css";import { usePrimeVue } from 'primevue/config';
const PrimeVue = usePrimeVue();
let currentTheme = ref(null);
if (localStorage.getItem('theme') != null) {
currentTheme.value = localStorage.getItem('theme');
toggleThemeDark();
} else {
localStorage.setItem('theme', 'lara-light-indigo');
currentTheme.value = 'lara-light-indigo';
toggleThemeDark();
}
function toggleTheme() {
const newTheme = localStorage.getItem('theme') === 'lara-light-indigo' ? 'lara-dark-indigo' : 'lara-light-indigo';
PrimeVue.changeTheme(localStorage.getItem('theme'), newTheme, 'lara-light-indigo', () => {
currentTheme = newTheme;
document.querySelector('.moon').classList.toggle('sun');
});
localStorage.setItem('theme', newTheme);
};
function toggleThemeDark() {
if(currentTheme.value == 'lara-dark-indigo'){
PrimeVue.changeTheme('lara-light-indigo', 'lara-dark-indigo', 'lara-light-indigo', () => {
document.querySelector('.moon');
});
}else{
PrimeVue.changeTheme('lara-dark-indigo', 'lara-light-indigo', 'lara-light-indigo', () => {
document.querySelector('.dark');
document.querySelector('.moon').classList.toggle('sun');
});
}
};
<div class="dark" @click="toggleTheme">
<div class="tdnn" :class="{ 'day': currentTheme === 'lara-light-indigo' }">
<div class="moon" :class="{ 'moon': currentTheme === 'lara-dark-indigo' }"></div>
</div>
</div>
Previously, when I used the link tag in the index.html file, everything worked well. However, I now need to find an alternative solution that does not involve modifying the index.html directly due to recent updates in Prime Vue or similar reasons.