Damus
Matthias profile picture
Matthias
@Matthias
If you decide to create your own Friendica theme, you can customise the emoji picker with a little CSS. I use these colours for my dark theme:/*===========================
* Customise the Emoji Picker theme
* ==========================*/

:root {
--emoji-bg-primary: #3e3e3e;
--emoji-bg-secondary: #333334;
--emoji-bg-tertiary: rgba(51, 51, 52, 0.4);
--emoji-bg-input: #848484;
--emoji-border-color: rgba(255, 255, 255, 0.15);
--emoji-border-subtle: #5b5b5b;
--emoji-text-primary: #ffffff;
--emoji-text-secondary: #94a3b8;
--emoji-text-active: #60a5fa;
--emoji-hover-bg: rgba(96, 165, 250, 0.25);
--emoji-active-bg: rgba(255, 255, 255, 0.05);
--emoji-shadow: 0 15px 45px rgba(0, 0, 0, 0.8);
--emoji-border-radius: 12px;
--emoji-border-radius-sm: 6px;
--emoji-border-radius-xs: 4px;
}

/* Emoji-Picker Container */
.fg-emoji-container {
background-color: var(--emoji-bg-primary) !important;
backdrop-filter: blur(25px) !important;
border: 1px solid var(--emoji-border-color) !important;
border-radius: var(--emoji-border-radius) !important;
box-shadow: var(--emoji-shadow) !important;
overflow: visible !important;
}

/* Navigation */
.fg-emoji-nav,
.fg-emoji-nav ul {
background-color: var(--emoji-bg-secondary) !important;
border-bottom: 1px solid var(--emoji-border-subtle) !important;
}

.fg-emoji-nav {
height: 38px !important;
display: flex !important;
align-items: center !important;
padding: 0 5px !important;
position: relative !important;
z-index: 10 !important;
}

.fg-emoji-nav ul {
display: flex !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
align-items: center !important;
}

.fg-emoji-nav li a {
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--emoji-text-secondary) !important;
opacity: 0.7;
font-size: 14px !important;
}

.fg-emoji-nav li.active a {
color: var(--emoji-text-active) !important;
opacity: 1;
background: var(--emoji-active-bg);
border-radius: var(--emoji-border-radius-sm);
}

.fg-emoji-nav-item {
height: 28px !important;
line-height: 28px !important;
padding: 0 10px !important;
margin-left: 4px !important;
font-size: 13px !important;
border-radius: var(--emoji-border-radius-xs) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
z-index: 20 !important;
}

/* Search */
.fg-emoji-picker-search {
background-color: var(--emoji-bg-tertiary) !important;
padding: 8px !important;
position: relative !important;
}

.fg-emoji-picker-search input {
background-color: var(--emoji-bg-input) !important;
color: var(--emoji-text-primary) !important;
border: 1px solid var(--emoji-border-color) !important;
border-radius: var(--emoji-border-radius-sm) !important;
height: 32px !important;
padding: 0 10px !important;
}

/* Category Title */
.fg-emoji-picker-category-title {
color: var(--emoji-text-primary) !important;
background-color: var(--emoji-bg-secondary) !important;
font-weight: 700 !important;
padding: 6px 15px !important;
font-size: 13px !important;
border-bottom: 1px solid var(--emoji-border-subtle) !important;
}

/* Emoji List */
.fg-emoji-list,
.fg-emoji-picker-category-wrapper {
background-color: var(--emoji-bg-secondary) !important;
}

.fg-emoji-list {
border-radius: 0 0 var(--emoji-border-radius) var(--emoji-border-radius) !important;
}

.fg-emoji-list li a {
background-color: transparent !important;
transition: background 0.2s ease;
}

.fg-emoji-list li a:hover {
background-color: var(--emoji-hover-bg) !important;
border-radius: var(--emoji-border-radius-sm) !important;
}