feat: add warm sand theme colors and light / dark mode toggle (#302)

js/desktop/src/features/compose/text-editor.tsx

@@ -112,7 +112,7 @@ export function TextEditor({
   );
 
   const keyboardHints = (
-    <div className="absolute bottom-4 flex items-center gap-4 text-sm text-white/50">
+    <div className="text-muted-foreground absolute bottom-4 flex items-center gap-4 text-sm">
       <KeyHint keys="Esc" onClick={onCancel} title="Cancel (or press Esc)">
         cancel
       </KeyHint>
@@ -161,8 +161,8 @@ export function TextEditor({
     return (
       <div
         className={cn(
-          'absolute inset-0 z-50 flex items-center justify-center bg-black/90',
-          isDragging && 'ring-2 ring-inset ring-white/30',
+          'bg-background/95 absolute inset-0 z-50 flex items-center justify-center backdrop-blur-sm',
+          isDragging && 'ring-primary/40 ring-2 ring-inset',
         )}
         {...dropZoneProps}
       >
@@ -174,7 +174,7 @@ export function TextEditor({
             onKeyDown={handleKeyDown}
             placeholder="Type a message..."
             className={cn(
-              'w-full resize-none border-none bg-transparent p-8 text-center text-white placeholder-white/40 outline-none',
+              'text-foreground placeholder-muted-foreground w-full resize-none border-none bg-transparent p-8 text-center outline-none',
               style.size,
               style.weight,
             )}
@@ -189,13 +189,13 @@ export function TextEditor({
   return (
     <div
       className={cn(
-        'absolute inset-0 z-50 flex items-center justify-center bg-black/90',
-        isDragging && 'ring-2 ring-inset ring-white/30',
+        'bg-background/95 absolute inset-0 z-50 flex items-center justify-center backdrop-blur-sm',
+        isDragging && 'ring-primary/40 ring-2 ring-inset',
       )}
       {...dropZoneProps}
       onKeyDownCapture={handleKeyDown}
     >
-      <div className="mx-8 flex h-[calc(100%-8rem)] w-full min-w-0 max-w-[calc(var(--message-content-width)_+_var(--message-editor-gutter)*2)] flex-col overflow-hidden rounded border border-white/10 bg-white/5 backdrop-blur-xl animate-in fade-in zoom-in-95 duration-200">
+      <div className="bg-card text-card-foreground border-border animate-in fade-in zoom-in-95 mx-8 flex h-[calc(100%-8rem)] w-full min-w-0 max-w-[calc(var(--message-content-width)_+_var(--message-editor-gutter)*2)] flex-col overflow-hidden rounded border duration-200">
         {/* No padding here: the editor's own scroll box hosts the slash menu,
             so we pad inside the editor (ProseMirror) instead. That keeps the
             menu's clipping bounds the full card rather than the inset box. */}
@@ -208,7 +208,7 @@ export function TextEditor({
         </div>
 
         {hasEnrichments && strip && (
-          <div className="shrink-0 border-t border-white/10 px-5 py-3">
+          <div className="border-border shrink-0 border-t px-5 py-3">
             {strip}
           </div>
         )}