Anonymous
Как установить основной цвет темы в шаблоне Primevue перед/в приложении.
Сообщение
Anonymous » 03 сен 2025, 18:44
Я использую шаблон Sakai's Sakai's
https://github.com/primefaces/sakai-vue и хотел бы установить то, что должен быть основной цвет темы Aura до того, как приложение будет загружено, например, использование значений в cookie.
https://github.com/primefaces/sakai-vue ... urator.vue , но я бы предпочел установить эти значения до загрузки приложения. Я полагаю, что код должен идти в
https://github.com/primefaces/sakai-vue ... rc/main.js
Код: Выделить всё
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import Aura from '@primeuix/themes/aura';
import PrimeVue from 'primevue/config';
import ConfirmationService from 'primevue/confirmationservice';
import ToastService from 'primevue/toastservice';
import '@/assets/styles.scss';
const app = createApp(App);
app.use(router);
app.use(PrimeVue, {
theme: {
preset: Aura,
options: {
darkModeSelector: '.app-dark'
}
}
});
app.use(ToastService);
app.use(ConfirmationService);
app.mount('#app');
В качестве простого теста я попытался добавить следующее подарок, который я получил от
https://github.com/primefaces/sakai-vue ... urator.vue
образно
Код: Выделить всё
const myPreset = {
semantic: {
primary: {
50: "#fff1f2",
100: "#ffe4e6",
200: "#fecdd3",
300: "#fda4af",
400: "#fb7185",
500: "#f43f5e",
600: "#e11d48",
700: "#be123c",
800: "#9f1239",
900: "#881337",
950: "#4c0519"
},
colorScheme: {
light: {
primary: {
color: "{primary.500}",
contrastColor: "#ffffff",
hoverColor: "{primary.600}",
activeColor: "{primary.700}"
},
highlight: {
background: "{primary.50}",
focusBackground: "{primary.100}",
color: "{primary.700}",
focusColor: "{primary.800}"
}
},
dark: {
primary: {
color: "{primary.400}",
contrastColor: "{surface.900}",
hoverColor: "{primary.300}",
activeColor: "{primary.200}"
},
highlight: {
background: "color-mix(in srgb, {primary.400}, transparent 84%)",
focusBackground:
"color-mix(in srgb, {primary.400}, transparent 76%)",
color: "rgba(255,255,255,.87)",
focusColor: "rgba(255,255,255,.87)"
}
}
}
}
};
< /code>
и изменил тему < /p>
app.use(PrimeVue, {
theme: {
preset: myPresent,
}
}
});
Цвет акцента правильно установлен, но цвет других элементов, таких как поверхности или тосты, полностью исчез.>
Подробнее здесь:
https://stackoverflow.com/questions/797 ... n-app-load
1756914295
Anonymous
Я использую шаблон Sakai's Sakai's https://github.com/primefaces/sakai-vue и хотел бы установить то, что должен быть основной цвет темы Aura до того, как приложение будет загружено, например, использование значений в cookie. https://github.com/primefaces/sakai-vue/blob/master/src/layout/appconfigurator.vue, но я бы предпочел установить эти значения до загрузки приложения. Я полагаю, что код должен идти в https://github.com/primefaces/sakai-vue/blob/master/src/main.js [code]import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import Aura from '@primeuix/themes/aura'; import PrimeVue from 'primevue/config'; import ConfirmationService from 'primevue/confirmationservice'; import ToastService from 'primevue/toastservice'; import '@/assets/styles.scss'; const app = createApp(App); app.use(router); app.use(PrimeVue, { theme: { preset: Aura, options: { darkModeSelector: '.app-dark' } } }); app.use(ToastService); app.use(ConfirmationService); app.mount('#app'); [/code] В качестве простого теста я попытался добавить следующее подарок, который я получил от https://github.com/primefaces/sakai-vue/blob/master/src/layout/appconfigurator.vue образно[code]const myPreset = { semantic: { primary: { 50: "#fff1f2", 100: "#ffe4e6", 200: "#fecdd3", 300: "#fda4af", 400: "#fb7185", 500: "#f43f5e", 600: "#e11d48", 700: "#be123c", 800: "#9f1239", 900: "#881337", 950: "#4c0519" }, colorScheme: { light: { primary: { color: "{primary.500}", contrastColor: "#ffffff", hoverColor: "{primary.600}", activeColor: "{primary.700}" }, highlight: { background: "{primary.50}", focusBackground: "{primary.100}", color: "{primary.700}", focusColor: "{primary.800}" } }, dark: { primary: { color: "{primary.400}", contrastColor: "{surface.900}", hoverColor: "{primary.300}", activeColor: "{primary.200}" }, highlight: { background: "color-mix(in srgb, {primary.400}, transparent 84%)", focusBackground: "color-mix(in srgb, {primary.400}, transparent 76%)", color: "rgba(255,255,255,.87)", focusColor: "rgba(255,255,255,.87)" } } } } }; < /code> и изменил тему < /p> app.use(PrimeVue, { theme: { preset: myPresent, } } }); [/code] Цвет акцента правильно установлен, но цвет других элементов, таких как поверхности или тосты, полностью исчез.> Подробнее здесь: [url]https://stackoverflow.com/questions/79754816/how-to-set-the-primary-colour-of-a-theme-in-primevue-template-before-on-app-load[/url]