Color Picker
Examples
Adaptive Colors
An 'adaptive' API is also exposed with color pickers that allows colors to change contextually based on the user's selected theme. onChange and onChangeComplete events will include an 'adaptive' payload in the second (colorObject) parameter, which has the hexes of the selected color adjusted for light theme and dark theme, as well as the theme said color was selected in. Consumers may also directly use the exported adaptiveColor utility to customize behaviour, such as for non-standard light/dark background hexes.Source
vs Adapted
Source
vs Adapted
Adaptive Color Picker
You can also override the default colors if you use a different set in your theming, and completely control when and how to use adapted colors. Apart from the element itself, ColorPicker exports multiple helper functions for adaptive colors - adaptiveColor, themedAdaptiveColor, and invertColor.
Manual Adaptive Color Picker
Custom Adaptive Color Picker
API
Color Picker props
| Name | Type | Default | Description |
|---|---|---|---|
enableAlphaSelector | boolean | false | Shows the alpha value picker tab |
enableGradientSelector | boolean | false | Shows the gradient color picker tab |
heading | string | Heading to show on color picker | |
onChange | function | Called when user changes color or resets the color in picker, It gets called with 2 values first argument is the color the format given by the user in returnType and second is an object with color in all formats. The object also includes 'adapted' versions of the color for light and dark theme. | |
onChangeComplete | function | Called when user changes color or resets the color in picker,It will only get called when the color change is completed and not in between ,It gets called with 2 values first argument is the color the format given by the user in returnType and second is an object with color in all formats. The object also includes 'adapted' versions of the color for light and dark theme. | |
overrides | custom | Lets you customize all aspects of the component. | |
resetButtonLabel | string | Label of the reset button in picker | |
value | string | Color to be shown selected in picker |
You can check the implementation of the component for more details.
Color Picker exports
You can import this module like so:
import {COLOR_PALETTE} from 'spaceweb/color-picker'It exports the following components or utility functions:
- COLOR_PALETTE
- ColorPicker
- adaptiveThemeColor
- customAdaptiveThemeColor
- invertColor