PrimeVue components configuration, polish locales, change color (color picker, date picker, custom theme style).
Install with npm install primevue @primeuix/themes
import PrimeVue from 'primevue/config';
import Aura from '@primeuix/themes/aura';
import { definePreset, palette } from '@primeuix/themes';
import { createApp } from 'vue';
import App from './App.vue';
import './assets/css/main.css';
// Custom primary color
const customColors = palette('#0075ff');
const customPreset = definePreset(Aura, {
semantic: {
primary: {
50: customColors['50'],
100: customColors['100'],
200: customColors['200'],
300: customColors['300'],
400: customColors['400'],
500: customColors['500'],
600: customColors['600'],
700: customColors['700'],
800: customColors['800'],
900: customColors['900'],
950: customColors['950'],
},
colorScheme: {
light: {
formField: {
hoverBorderColor: '{primary.color}',
},
highlight: {
background: '{primary.50}',
color: '{primary.700}',
},
},
dark: {
formField: {
hoverBorderColor: '{primary.color}',
},
highlight: {
background: '{primary.200}',
color: '{primary.900}',
},
},
},
},
});
const app = createApp(App);
app.use(PrimeVue, {
theme: {
// preset: Aura,
preset: customPreset,
options: {
prefix: 'p',
darkModeSelector: '.app-dark',
},
},
locale: {
currentLocale: 'pl',
dayNames: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
dayNamesShort: ['Niedz', 'Pon', 'Wt', 'Śr', 'Czw', 'Pt', 'Sob'],
dayNamesMin: ['Nd', 'Po', 'Wt', 'Śr', 'Cz', 'Pt', 'So'],
monthNames: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
monthNamesShort: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'],
},
});
app.mount('#app');const color = ref('ff2255');
const time = ref('21:23:45');
const date = ref('2025-10-21');
const date_time = ref('2025-10-21 05:22:22');
<label class="form-label">{{ $t('Text color') }} <strong class="color-hex">#{{ color }}</strong></label>
<ColorPicker v-model="color" name="text_color" format="hex" />
<label class="form-label">{{ $t('Date') }}</label>
<DatePicker v-model="date" size="large" dateFormat="yy-mm-dd" :manualInput="false" name="date" />
<label class="form-label">{{ $t('Date') }}</label>
<DatePicker v-model="date_time" size="large" dateFormat="yy-mm-dd" showSeconds showTime showIcon fluid iconDisplay="input" :manualInput="false" name="date_time" />
<label class="form-label">{{ $t('Time') }}</label>
<DatePicker v-model="time" size="large" hourFormat="hh" :showSeconds="true" :showTime="true" showIcon fluid timeOnly :manualInput="false" name="time" />// PrimeVue toggle dark mode
let th = ref('dark')
function changeTheme() {
th.value == 'dark' ? th.value = 'light' : th.value = 'dark';
document.querySelector('html').setAttribute('color-scheme', th.value);
document.querySelector('html').classList.remove('app-dark', 'app-light');
document.querySelector('html').classList.add('app-' + th.value);
}/* Colors */
:root {
/* Light */
--w-accent-1: #0075ff;
--w-bg-1: #ffffff;
--w-bg-2: #fafafa;
--w-text-1: #0a0a0a;
--w-text-2: #909090;
/* Dark */
--b-accent-1: #0075ff;
--b-bg-1: #1c1c1c;
--b-bg-2: #1f1f1f;
--b-text-1: #e8e8e8;
--b-text-2: #7e7e7e;
}
/* Color mode from browser settings */
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--bg-1: var(--b-bg-1);
--bg-2: var(--b-bg-2);
--text-1: var(--b-text-1);
--text-2: var(--b-text-2);
/* ... */
}
}
/* Color mode from <html color-scheme="light" class="app-light> */
[color-scheme='light'] {
color-scheme: light;
--bg-1: var(--w-bg-1);
--bg-2: var(--w-bg-2);
--text-1: var(--w-text-1);
--text-1: var(--w-text-2);
/* ... */
}
/* Color mode from <html color-scheme="dark" class="app-dark"> */
[color-scheme='dark'] {
color-scheme: dark;
--bg-1: var(--b-bg-1);
--bg-2: var(--b-bg-2);
--text-1: var(--b-text-1);
--text-2: var(--b-text-2);
/* ... */
}
.p-inputtext {
box-sizing: border-box !important;
float: left !important;
width: 100% !important;
padding: 15px 20px !important;
line-height: 1.5 !important;
color: var(--text-1) !important;
background: var(--input-bg) !important;
border: 1px solid var(--input-border) !important;
border-radius: var(--border-radius) !important;
font-size: var(--input-font-size) !important;
}
.p-colorpicker-panel {
background: var(--bg-2) !important;
border: 1px solid var(--bg-2) !important;
}
.p-inputwrapper-filled,
.p-colorpicker {
float: left !important;
width: 100% !important;
margin-bottom: 20px !important;
}
.p-colorpicker-preview {
float: left !important;
width: 100% !important;
height: auto !important;
padding: 15px 20px !important;
font-size: var(--font-size) !important;
line-height: 1.5 !important;
}
.p-datepicker {
position: relative !important;
}
.p-datepicker-input {
box-sizing: border-box !important;
}
.p-datepicker-dropdown {
position: absolute !important;
top: 0 !important;
right: 0 !important;
padding: 15px !important;
margin: 3px !important;
background: var(--input-bg) !important;
border: 1px solid var(--input-border) !important;
border-radius: var(--border-radius) !important;
}
.p-datepicker-dropdown svg {
color: var(--input-icon) !important;
}
.p-datepicker-panel {
background: var(--bg-2) !important;
max-width: 520px !important;
}PrimeVue docs