Theming documentation for ColorPicker component
List of class names used in the styled mode.
| className | description |
|---|---|
| p-color-picker-area | Class name of the area element |
| p-color-picker-area-thumb | Class name of the area thumb element |
| p-color-picker-area-background | Class name of the area background element |
| p-color-picker-slider | Class name of the slider element |
| p-color-picker-slider-thumb | Class name of the slider thumb element |
| p-color-picker-slider-track | Class name of the slider track element |
| p-color-picker-transparency-grid | Class name of the transparency grid element |
| p-color-picker-swatch | Class name of the swatch element |
| p-color-picker-swatch-background | Class name of the swatch background element |
| p-color-picker-input | Class name of the input element |
| p-color-picker-eye-dropper | Class name of the eye dropper element |
List of design tokens.
| token | CSS Variable | description |
|---|---|---|
| colorpicker.transition.duration | --p-colorpicker-transition-duration | Transition duration of root |
| colorpicker.preview.width | --p-colorpicker-preview-width | Width of preview |
| colorpicker.preview.height | --p-colorpicker-preview-height | Height of preview |
| colorpicker.preview.border.radius | --p-colorpicker-preview-border-radius | Border radius of preview |
| colorpicker.preview.focus.ring.width | --p-colorpicker-preview-focus-ring-width | Focus ring width of preview |
| colorpicker.preview.focus.ring.style | --p-colorpicker-preview-focus-ring-style | Focus ring style of preview |
| colorpicker.preview.focus.ring.color | --p-colorpicker-preview-focus-ring-color | Focus ring color of preview |
| colorpicker.preview.focus.ring.offset | --p-colorpicker-preview-focus-ring-offset | Focus ring offset of preview |
| colorpicker.preview.focus.ring.shadow | --p-colorpicker-preview-focus-ring-shadow | Focus ring shadow of preview |
| colorpicker.panel.shadow | --p-colorpicker-panel-shadow | Shadow of panel |
| colorpicker.panel.border.radius | --p-colorpicker-panel-border-radius | Border radius of panel |
| colorpicker.panel.background | --p-colorpicker-panel-background | Background of panel |
| colorpicker.panel.border.color | --p-colorpicker-panel-border-color | Border color of panel |
| colorpicker.handle.color | --p-colorpicker-handle-color | Color of handle |
Theming is implemented with the pass through properties in unstyled mode.