diff --git a/lib/widgets/compose_box.dart b/lib/widgets/compose_box.dart
index 114e392bc7..cc666e4642 100644
--- a/lib/widgets/compose_box.dart
+++ b/lib/widgets/compose_box.dart
@@ -22,6 +22,63 @@ import 'store.dart';
 import 'text.dart';
 import 'theme.dart';
 
+/// Compose-box styles that differ between light and dark theme.
+///
+/// These styles will animate on theme changes (with help from [lerp]).
+class ComposeBoxTheme extends ThemeExtension<ComposeBoxTheme> {
+  factory ComposeBoxTheme.light(BuildContext context) {
+    return ComposeBoxTheme._(
+      boxShadow: null,
+    );
+  }
+
+  factory ComposeBoxTheme.dark(BuildContext context) {
+    return ComposeBoxTheme._(
+      boxShadow: [BoxShadow(
+        color: DesignVariables.dark().bgTopBar,
+        offset: const Offset(0, -4),
+        blurRadius: 16,
+        spreadRadius: 0,
+      )],
+    );
+  }
+
+  ComposeBoxTheme._({
+    required this.boxShadow,
+  });
+
+  /// The [ComposeBoxTheme] from the context's active theme.
+  ///
+  /// The [ThemeData] must include [ComposeBoxTheme] in [ThemeData.extensions].
+  static ComposeBoxTheme of(BuildContext context) {
+    final theme = Theme.of(context);
+    final extension = theme.extension<ComposeBoxTheme>();
+    assert(extension != null);
+    return extension!;
+  }
+
+  final List<BoxShadow>? boxShadow;
+
+  @override
+  ComposeBoxTheme copyWith({
+    List<BoxShadow>? boxShadow,
+  }) {
+    return ComposeBoxTheme._(
+      boxShadow: boxShadow ?? this.boxShadow,
+    );
+  }
+
+  @override
+  ComposeBoxTheme lerp(ComposeBoxTheme other, double t) {
+    if (identical(this, other)) {
+      return this;
+    }
+    return ComposeBoxTheme._(
+      boxShadow: BoxShadow.lerpList(boxShadow, other.boxShadow, t)!,
+    );
+  }
+}
+
 const double _composeButtonSize = 44;
 
 /// A [TextEditingController] for use in the compose box.
@@ -1051,7 +1108,9 @@ class _ComposeBoxContainer extends StatelessWidget {
     //   the message list itself
     return Container(width: double.infinity,
       decoration: BoxDecoration(
-        border: Border(top: BorderSide(color: designVariables.borderBar))),
+        border: Border(top: BorderSide(color: designVariables.borderBar)),
+        boxShadow: ComposeBoxTheme.of(context).boxShadow,
+      ),
       // TODO(#720) try a Stack for the overlaid linear progress indicator
       child: Material(
         color: designVariables.composeBoxBg,
diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart
index ec6cd81ce0..4d4b07b947 100644
--- a/lib/widgets/theme.dart
+++ b/lib/widgets/theme.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 
 import '../api/model/model.dart';
 import 'content.dart';
+import 'compose_box.dart';
 import 'emoji_reaction.dart';
 import 'message_list.dart';
 import 'channel_colors.dart';
@@ -32,6 +33,7 @@ ThemeData zulipThemeData(BuildContext context) {
         designVariables,
         EmojiReactionTheme.light(),
         MessageListTheme.light(),
+        ComposeBoxTheme.light(context),
       ];
     }
     case Brightness.dark: {
@@ -41,6 +43,7 @@ ThemeData zulipThemeData(BuildContext context) {
         designVariables,
         EmojiReactionTheme.dark(),
         MessageListTheme.dark(),
+        ComposeBoxTheme.dark(context),
       ];
     }
   }
@@ -177,7 +180,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       bgMenuButtonActive: Colors.black.withValues(alpha: 0.2),
       bgMenuButtonSelected: Colors.black.withValues(alpha: 0.25),
       bgTopBar: const Color(0xff242424),
-      borderBar: Colors.black.withValues(alpha: 0.5),
+      borderBar: const Color(0xffffffff).withValues(alpha: 0.1),
       borderMenuButtonSelected: Colors.white.withValues(alpha: 0.1),
       btnLabelAttLowIntDanger: const Color(0xffff8b7c),
       btnLabelAttMediumIntDanger: const Color(0xffff8b7c),