primevue-mirror/doc/theming/styled/utils/UpdateSurfacePaletteDoc.vue

52 lines
1.1 KiB
Vue
Raw Normal View History

2024-04-01 10:38:37 +00:00
<template>
<DocSectionText v-bind="$attrs">
<p>Updates the surface colors, this is a shorthand to do the same update using <i>updatePreset</i>.</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
import { updateSurfacePalette } from 'primevue/themes';
const changeSurfaces() {
//changes surfaces both in light and dark mode
updateSurfacePalette({
50: '{zinc.50}',
// ...
950: '{zinc.950}'
});
}
const changeLightSurfaces() {
//changes surfaces only in light
updateSurfacePalette({
light: {
50: '{zinc.50}',
// ...
950: '{zinc.950}'
}
});
}
const changeDarkSurfaces() {
//changes surfaces only in dark mode
updateSurfacePalette({
dark: {
50: '{zinc.50}',
// ...
950: '{zinc.950}'
}
});
}
`
}
};
}
};
</script>