From b72ee57b1d86a6ff3bf7269ba1c93f62013a531c Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Wed, 25 Sep 2024 15:01:40 -0700
Subject: [PATCH] Theme emoji picker

---
 src/app.css                           | 23 +++++++++++++++++++++++
 src/app/components/ChatMessage.svelte |  4 ++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index 11d815c5..c4c4b1e8 100644
--- a/src/app.css
+++ b/src/app.css
@@ -42,6 +42,15 @@
   font-family: Lato;
 }
 
+[data-theme] {
+  --base-100: oklch(var(--b1));
+  --base-200: oklch(var(--b2));
+  --base-300: oklch(var(--b3));
+  --base-content: oklch(var(--bc));
+  --primary: oklch(var(--p));
+  --secondary: oklch(var(--s));
+}
+
 .card2 {
   @apply overflow-hidden text-ellipsis rounded-box bg-base-100 p-6 text-base-content;
 }
@@ -142,3 +151,17 @@
 .date-time-field input {
   @apply !h-full !w-full !border-none !bg-inherit !text-inherit;
 }
+
+/* emoji picker */
+
+emoji-picker {
+  --background: var(--base-100);
+  --border-color: var(--base-100);
+  --border-radius: var(--rounded-box);
+  --button-active-background: var(--base-content);
+  --button-hover-background: var(--base-content);
+  --indicator-color: var(--base-content);
+  --input-border-color: var(--base-100);
+  --input-font-color: var(--base-content);
+  --outline-color: var(--base-100);
+}
diff --git a/src/app/components/ChatMessage.svelte b/src/app/components/ChatMessage.svelte
index af266f25..d5b11351 100644
--- a/src/app/components/ChatMessage.svelte
+++ b/src/app/components/ChatMessage.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import type {Emoji} from 'emoji-picker-element/shared'
+  import type {NativeEmoji} from 'emoji-picker-element/shared'
   import twColors from "tailwindcss/colors"
   import type {Readable} from "svelte/store"
   import {readable, derived} from "svelte/store"
@@ -97,7 +97,7 @@
     }
   }
 
-  const onEmoji = (emoji: Emoji) => createReaction(emoji.unicode)
+  const onEmoji = (emoji: NativeEmoji) => createReaction(emoji.unicode)
 
   $: parentPubkey = $parentEvent?.pubkey || replies[0]?.[4]
   $: parentProfile = deriveProfile(parentPubkey || "")