How can we customize primevue components like button,inputtext when we have theme switching?

[bhargavram-fission]

const MyPreset = definePreset(Aura, {
components: {
menubar: {
colorScheme: {
light: {
root: {
background: '#fff',
color: '#121212'
},
subtitle: {
color: '#121212'
}
},
dark: {
root: {
background: '#121212',
color: '#fff'
},
subtitle: {
color: '#fff'
}
}
}
},
panel: {
colorScheme: {
light: {
root: {
background: 'inherit',
color: '#121212'
},
subtitle: {
color: '#121212'
}
},
dark: {
root: {
background: 'inherit',
color: '#fff'
},
subtitle: {
color: '#fff'
}
}
}
},
dialog: {
colorScheme: {
light: {
root: {
background: '#fff',
color: '#121212'
},
subtitle: {
color: '#121212'
}
},
dark: {
root: {
background: '#121212',
color: '#fff'
},
subtitle: {
color: '#fff'
}
}
}
},
drawer: {
colorScheme: {
light: {
root: {
background: '#fff',
color: '#121212'
},
subtitle: {
color: '#121212'
}
},
dark: {
root: {
background: '#121212',
color: '#fff'
},
subtitle: {
color: '#fff'
}
}
}
},
fileUpload: {
colorScheme: {
light: {
'background': '#fff',
'--p-fileupload-border-color': '#cccccc',
'--p-fileupload-color': '#000000',
},
dark: {
'background': '#121212',
'--p-fileupload-border-color': '#cccccc',
'--p-fileupload-color': '#000000',
}
}
}
}
});

app.use(PrimeVue, {
inputStyle: "filled",
theme: {
preset: MyPreset,
options: {
darkModeSelector: '.my-app-dark',
prefix: 'p',
cssLayer: false,
},
},
});