fix: fix font color of category in dark mode

README.md

@@ -163,6 +163,7 @@ Here is a full list of options:
 | `--border-size`              | `1px`      |                | Width of border used in most of the picker    |
 | `--button-active-background` | `#e6e6e6`  | `#555555`      | Background of an active button                |
 | `--button-hover-background`  | `#d9d9d9`  | `#484848`      | Background of a hovered button                |
+| `--category-font-color`      | `#111`     | `#efefef`      | Font color of custom category headings        |
 | `--category-font-size`       | `1rem`     |                | Font size of custom emoji category headings   |
 | `--emoji-padding`            | `0.5rem`   |                |                                               |
 | `--emoji-size`               | `1.375rem` |                |                                               |

src/picker/components/Picker/Picker.scss

@@ -71,6 +71,7 @@ $skintoneZIndex3: 3;
 .category {
   padding: var(--emoji-padding);
   font-size: var(--category-font-size);
+  color: var(--category-font-color);
 }
 
 //

src/picker/styles/variables.scss

@@ -22,7 +22,7 @@
   $input-color: #111;
   $input-placeholder: #999;
   $outline: #999;
-
+  $categoryFontColor: #111;
 
   @if $dark {
     $bg: #222;
@@ -32,6 +32,7 @@
     $input-color: #efefef;
     $input-placeholder: #ccc;
     $outline: #fff;
+    $categoryFontColor: #efefef;
   }
 
   --background: #{$bg}; /* Background of the entire `<emoji-picker>` */
@@ -41,6 +42,7 @@
   --input-font-color: #{$input-color};
   --input-placeholder-color: #{$input-placeholder};
   --outline-color: #{$outline}; /* Focus outline color */
+  --category-font-color: #{$categoryFontColor}; /* Font color of custom emoji category headings */
 
   @if $dark {
     --button-active-background: #{lighten($bg, 20%)};