51 lines
1.3 KiB
JavaScript
51 lines
1.3 KiB
JavaScript
|
import * as PrimeVueConfig from 'primevue/config';
|
||
|
|
import Theme, { ThemeService } from 'primevue/themes';
|
||
|
|
import PrimeOne from 'primevue/themes/primeone';
|
||
|
|
import Aura from 'primevue/themes/primeone/aura';
|
||
|
|
import { ref, watch } from 'vue';
|
||
|
|
|
||
|
|
export const defaultOptions = {
|
||
|
|
...PrimeVueConfig.defaultOptions,
|
||
|
|
theme: {
|
||
|
|
base: PrimeOne,
|
||
|
|
preset: Aura,
|
||
|
|
options: {
|
||
|
|
prefix: 'p',
|
||
|
|
darkModeSelector: 'system',
|
||
|
|
cssLayer: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
export const { usePrimeVue } = PrimeVueConfig;
|
||
|
|
|
||
|
|
function setupTheme(app, PrimeVue) {
|
||
|
|
const isChanged = ref(false);
|
||
|
|
|
||
|
|
watch(
|
||
|
|
PrimeVue.config.theme,
|
||
|
|
(newValue) => {
|
||
|
|
if (!isChanged.value) {
|
||
|
|
Theme.setTheme(newValue);
|
||
|
|
}
|
||
|
|
|
||
|
|
isChanged.value = false;
|
||
|
|
},
|
||
|
|
{ immediate: true, deep: true }
|
||
|
|
);
|
||
|
|
|
||
|
|
ThemeService.on('theme:change', function (newTheme) {
|
||
|
|
isChanged.value = true;
|
||
|
|
app.config.globalProperties.$primevue.config.theme = newTheme;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
export default {
|
||
|
|
install: (app, options) => {
|
||
|
|
const configOptions = { ...defaultOptions, ...options, unstyled: false };
|
||
|
|
const PrimeVue = PrimeVueConfig.setup(app, configOptions);
|
||
|
|
|
||
|
|
setupTheme(app, PrimeVue);
|
||
|
|
}
|
||
|
|
};
|