feat(chat): make emoji picker theme-aware and add border

- Inject stylesheet into picker shadow root in dark mode so background,
  search bar, category nav, and dividers use design tokens
- Pass theme from store (light/dark) to picker; guard injection to avoid
  duplicate sheets when toggling theme
- Add border and shadow to picker host (same as Popover/context menu)
- Keep em-emoji host transparent for inline emoji in messages

Made-with: Cursor

Author: HMarzban

packages/webapp/src/components/chatroom/components/EmojiPanel/Picker.tsx

@@ -1,35 +1,103 @@
 import data from '@emoji-mart/data/sets/14/native.json'
 import EmojiPicker from '@emoji-mart/react'
-import { useChatStore } from '@stores'
+import { getEmojiMartTheme, useChatStore, useThemeStore } from '@stores'
+import { useEffect, useRef } from 'react'
 
 import { useEmojiPanelContext } from './context/EmojiPanelContext'
 
+const EMOJI_PICKER_DARK_STYLES = `
+  :host {
+    background-color: var(--color-base-100) !important;
+    color: var(--color-base-content) !important;
+  }
+  section, #root, [id="root"], .root {
+    background-color: var(--color-base-100) !important;
+    color: var(--color-base-content) !important;
+  }
+  input, [role="searchbox"], [type="search"], [class*="search"] input {
+    background-color: var(--color-base-200) !important;
+    color: var(--color-base-content) !important;
+    border-color: var(--color-base-300) !important;
+  }
+  input::placeholder {
+    color: var(--color-base-content);
+    opacity: 0.6;
+  }
+  nav, [role="navigation"], [class*="nav"], [class*="category"] {
+    background-color: var(--color-base-100) !important;
+    border-color: var(--color-base-300) !important;
+    color: var(--color-base-content) !important;
+  }
+  button, [role="button"], [class*="category"] svg, [class*="tab"] {
+    color: var(--color-base-content) !important;
+  }
+  [class*="active"], [aria-selected="true"] {
+    color: var(--color-primary) !important;
+  }
+  hr, [class*="divider"], [class*="separator"] {
+    border-color: var(--color-base-300) !important;
+  }
+`
+
+const THEMED_ATTR = 'data-docsplus-themed'
+
+function useEmojiPickerTheme(ref: React.RefObject<HTMLDivElement | null>, isDark: boolean) {
+  useEffect(() => {
+    if (!isDark || !ref.current) return
+    const inject = () => {
+      const el = ref.current?.querySelector?.('em-emoji-picker') as
+        | (HTMLElement & { shadowRoot?: ShadowRoot })
+        | null
+      if (!el?.shadowRoot || el.hasAttribute(THEMED_ATTR)) return false
+      try {
+        const sheet = new CSSStyleSheet()
+        sheet.replaceSync(EMOJI_PICKER_DARK_STYLES)
+        el.shadowRoot.adoptedStyleSheets = [...el.shadowRoot.adoptedStyleSheets, sheet]
+        el.setAttribute(THEMED_ATTR, 'true')
+        return true
+      } catch {
+        return false
+      }
+    }
+    if (inject()) return
+    const t = setTimeout(() => inject(), 100)
+    return () => clearTimeout(t)
+  }, [isDark, ref])
+}
+
 type Props = {
   emojiSelectHandler: (emoji: any) => void
 }
 export const Picker = ({ emojiSelectHandler }: Props) => {
   const { variant } = useEmojiPanelContext()
   const { closeEmojiPicker, emojiPicker } = useChatStore()
+  const resolvedTheme = useThemeStore((s) => s.resolvedTheme)
+  const isDark = resolvedTheme !== 'docsplus'
+  const wrapperRef = useRef<HTMLDivElement>(null)
+
+  useEmojiPickerTheme(wrapperRef, isDark)
 
   return (
-    <EmojiPicker
-      data={data}
-      dynamicWidth={variant === 'mobile' ? true : false}
-      navPosition="bottom"
-      previewPosition="none"
-      searchPosition="sticky"
-      skinTonePosition="search"
-      {...(variant === 'mobile' && {
-        emojiSize: 34,
-        emojiButtonSize: 42
-      })}
-      emojiVersion="14"
-      set="native"
-      theme="light"
-      onClickOutside={() => {
-        if (emojiPicker.isOpen) closeEmojiPicker()
-      }}
-      onEmojiSelect={emojiSelectHandler}
-    />
+    <div ref={wrapperRef}>
+      <EmojiPicker
+        data={data}
+        dynamicWidth={variant === 'mobile' ? true : false}
+        navPosition="bottom"
+        previewPosition="none"
+        searchPosition="sticky"
+        skinTonePosition="search"
+        {...(variant === 'mobile' && {
+          emojiSize: 34,
+          emojiButtonSize: 42
+        })}
+        emojiVersion="14"
+        set="native"
+        theme={getEmojiMartTheme(resolvedTheme)}
+        onClickOutside={() => {
+          if (emojiPicker.isOpen) closeEmojiPicker()
+        }}
+        onEmojiSelect={emojiSelectHandler}
+      />
+    </div>
   )
 }

packages/webapp/src/stores/themeStore.ts

@@ -41,6 +41,11 @@ export function resolveTheme(preference: ThemePreference): ResolvedTheme {
   return 'docsplus'
 }
 
+/** Map resolved theme to emoji-mart theme (Picker). Single place for this contract. */
+export function getEmojiMartTheme(resolved: ResolvedTheme): 'light' | 'dark' {
+  return resolved === 'docsplus' ? 'light' : 'dark'
+}
+
 /** Apply theme to the DOM (instant swap — see Theme_Light_Dark.md §6.6) */
 function applyTheme(theme: ResolvedTheme) {
   if (typeof document === 'undefined') return

packages/webapp/src/styles/globals.scss

@@ -370,10 +370,6 @@ html:not(.m_mobile) {
       box-shadow: 0 0px 6px color-mix(in oklch, var(--color-base-content) 20%, transparent);
     }
     .media-resize-clamp {
-      // width: 10px;
-      // height: 10px;
-      // background-color: #1a73e8;
-      // border: 1px solid #fff;
       position: relative;
 
       &::after {
@@ -595,7 +591,6 @@ html:not(.m_mobile) {
     }
 
     &--active {
-      // border: 1.5px solid #1a73e8;
       display: block;
       .media-resize-clamp {
         display: block;
@@ -1274,9 +1269,6 @@ ol {
 /* Context menu active state for message cards */
 .msg_card.context-menu-active {
   background-color: color-mix(in oklch, var(--color-primary) 8%, transparent) !important;
-  // border-left: 3px solid #3b82f6 !important;
-  // transform: translateX(2px) !important;
-  // transition: all 0.2s ease-in-out !important;
 }
 
 .overflow-anchor-auto {
@@ -1427,3 +1419,40 @@ ol {
 .scrollbar-dark::-webkit-scrollbar-thumb:hover {
   background: color-mix(in oklch, var(--color-neutral) 70%, transparent);
 }
+
+/* em-emoji-picker (emoji-mart) — border and shadow for separation (same UX as Popover/context menu). */
+/* stylelint-disable-next-line selector-type-no-unknown -- em-emoji-picker is a custom element */
+em-emoji-picker {
+  border: 1px solid var(--color-base-300);
+  border-radius: var(--radius-field);
+  box-shadow: 0 2px 4px color-mix(in oklch, var(--color-base-content) 10%, transparent);
+}
+
+/* em-emoji-picker (emoji-mart) — force our theme tokens in dark mode.
+   Built-in "dark" theme can render light; set CSS vars on host so shadow DOM inherits. */
+/* stylelint-disable-next-line selector-type-no-unknown -- em-emoji-picker is a custom element */
+[data-theme='docsplus-dark'] em-emoji-picker,
+[data-theme='docsplus-dark-hc'] em-emoji-picker {
+  background-color: var(--color-base-100) !important;
+  --background: var(--color-base-100);
+  --color: var(--color-base-content);
+  --border-color: var(--color-base-300);
+  --input-background: var(--color-base-200);
+  --input-border-color: var(--color-base-300);
+  --input-placeholder-color: var(--color-base-content);
+  --category-icon-color: var(--color-base-content);
+  --category-icon-active-color: var(--color-primary);
+  --hover-background: var(--color-base-200);
+  --focus-background: var(--color-base-200);
+  --epr-bg-color: var(--color-base-100);
+  --epr-text-color: var(--color-base-content);
+  --epr-picker-border-color: var(--color-base-300);
+  --epr-category-icon-active-color: var(--color-primary);
+}
+
+/* em-emoji (emoji-mart web component) — theme-aware.
+   Host has no opaque background so parent/base surface shows in dark mode. */
+/* stylelint-disable-next-line selector-type-no-unknown -- em-emoji is a custom element */
+em-emoji {
+  background: transparent !important;
+}