You can customize specific parts of the picker by overriding these CSS variables. Target .EmojiPickerReact or aside.EmojiPickerReact to apply them.
.EmojiPickerReact {
--epr-emoji-size: 32px;
}
or
aside.EmojiPickerReact {
--epr-emoji-size: 32px;
}
| Variable | Description | Default |
|---|
--epr-emoji-size | Size of the emojis. | 30px |
--epr-emoji-padding | Padding around each emoji. | 5px |
--epr-emoji-gap | Deprecated. Use --epr-emoji-padding instead. | - |
--epr-bg-color | Background color of the picker. | #fff |
--epr-text-color | Main text color. | #858585 |
--epr-picker-border-color | Border color of the picker container. | #e7e7e7 |
--epr-picker-border-radius | Border radius of the picker. | 8px |
--epr-horizontal-padding | Horizontal padding for various elements. | 10px |
--epr-highlight-color | Color for active states and highlights. | #007aeb |
--epr-hover-bg-color | Background color on hover. | #e5f0fa |
--epr-focus-bg-color | Background color on focus. | #e0f0ff |
| Variable | Description | Default |
|---|
--epr-search-input-bg-color | Background color of the search input. | #f6f6f6 |
--epr-search-input-bg-color-active | Background color when search is active. | var(--epr-search-input-bg-color) |
--epr-search-input-text-color | Text color in the search input. | var(--epr-text-color) |
--epr-search-input-placeholder-color | Placeholder text color. | var(--epr-text-color) |
--epr-search-border-color | Border color of the search input. | var(--epr-search-input-bg-color) |
--epr-search-border-color-active | Border color when search is active. | var(--epr-highlight-color) |
--epr-search-input-border-radius | Border radius of the search input. | 8px |
--epr-search-input-height | Height of the search input. | 40px |
--epr-search-icon-color | Color of the search icon. | - |
| Variable | Description | Default |
|---|
--epr-category-navigation-button-size | Size of category navigation buttons. | 30px |
--epr-category-icon-active-color | Color of the active category icon. | #6aa8de |
| Variable | Description | Default |
|---|
--epr-category-label-bg-color | Background color of the sticky category label. | #ffffffe6 |
--epr-category-label-text-color | Text color of the category label. | var(--epr-text-color) |
--epr-category-label-height | Height of the category label. | 40px |
| Variable | Description | Default |
|---|
--epr-preview-height | Height of the preview area. | 70px |
--epr-preview-text-size | Font size of text in the preview area. | 14px |
--epr-preview-text-color | Text color in the preview area. | var(--epr-text-color) |
| Variable | Description | Default |
|---|
--epr-skin-tone-picker-menu-color | Background color of the skin tone picker menu. | #ffffff95 |
--epr-skin-tone-size | Size of skin tone circles. | 20px |
| Variable | Description | Default |
|---|
--epr-dark-bg-color | Background color in dark mode. | #222222 |
--epr-dark-picker-border-color | Border color in dark mode. | #151617 |
--epr-dark-text-color | Text color in dark mode. | var(--epr-highlight-color) |
--epr-dark-search-input-bg-color | Search input background in dark mode. | #333333 |
--epr-dark-hover-bg-color | Hover background color in dark mode. | #363636f6 |