Add dark mode

[nolanlawson]

It may be nice to have an optional dark mode.

[darwin2k]

you can try to overwrite CSS:

.emoji-mart, .emoji-mart-category-label span {
  @include themify($themes) {
    background-color: themed('colorBackground');
    color: themed('colorText');
  }
}

[nolanlawson]

fixed by https://github.com/missive/emoji-mart/pull/391

[santoshnaagula]

you can add darkmode true or false, it will reflect

[darkMode]="false"

[beqacrc]

at the end you can use this solution

@use "../../abstract/palette.scss" as *;

@mixin emoji-mart-on-dark {
  .emoji-mart {
    background-color: $clr-main-primary;

    .emoji-mart-preview-name {
      color: #ccc;
    }

    .emoji-mart-category-label {
      background-color: unset;
    }

    .emoji-mart-category .emoji-mart-emoji:hover:before,
    .emoji-mart-emoji-selected:before {
      background-color: $clr-blue-primary;
    }
  }
}