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 |