diff --git a/lib/widgets/code_block.dart b/lib/widgets/code_block.dart index f650a21cc8..fe15eca8c3 100644 --- a/lib/widgets/code_block.dart +++ b/lib/widgets/code_block.dart @@ -5,6 +5,8 @@ import '../model/code_block.dart'; // Highlighted code block styles adapted from: // https://github.com/zulip/zulip/blob/213387249e7ba7772084411b22d8cef64b135dd0/web/styles/pygments.css +// TODO(#95) follow web for dark-theme colors + // .hll { background-color: hsl(60deg 100% 90%); } final _kCodeBlockStyleHll = TextStyle(backgroundColor: const HSLColor.fromAHSL(1, 60, 1, 0.90).toColor()); diff --git a/lib/widgets/inbox.dart b/lib/widgets/inbox.dart index c2e0d776b0..cbc9d3b24f 100644 --- a/lib/widgets/inbox.dart +++ b/lib/widgets/inbox.dart @@ -245,6 +245,7 @@ abstract class _HeaderItem extends StatelessWidget { @override Widget build(BuildContext context) { return Material( + // TODO(#95) need dark-theme color color: collapsed ? Colors.white : uncollapsedBackgroundColor, child: InkWell( // TODO use onRowTap to handle taps that are not on the collapse button. @@ -256,6 +257,7 @@ abstract class _HeaderItem extends StatelessWidget { onTap: onCollapseButtonTap, child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [ Padding(padding: const EdgeInsets.all(10), + // TODO(#95) need dark-theme color child: Icon(size: 20, color: const Color(0x7F1D2E48), collapsed ? ZulipIcons.arrow_right : ZulipIcons.arrow_down)), Icon(size: 18, color: collapsed ? collapsedIconColor : uncollapsedIconColor, @@ -267,6 +269,7 @@ abstract class _HeaderItem extends StatelessWidget { style: const TextStyle( fontSize: 17, height: (20 / 17), + // TODO(#95) need dark-theme color color: Color(0xFF222222), ).merge(weightVariableTextStyle(context, wght: 600)), maxLines: 1, @@ -292,9 +295,12 @@ class _AllDmsHeaderItem extends _HeaderItem { @override get title => 'Direct messages'; // TODO(i18n) @override get icon => ZulipIcons.user; + + // TODO(#95) need dark-theme colors @override get collapsedIconColor => const Color(0xFF222222); @override get uncollapsedIconColor => const Color(0xFF222222); - @override get uncollapsedBackgroundColor => const Color(0xFFF3F0E7); + + @override get uncollapsedBackgroundColor => const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(); @override get unreadCountBadgeBackgroundColor => null; @override get onCollapseButtonTap => () async { @@ -367,6 +373,7 @@ class _DmItem extends StatelessWidget { }; return Material( + // TODO(#95) need dark-theme color color: Colors.white, child: InkWell( onTap: () { @@ -382,6 +389,7 @@ class _DmItem extends StatelessWidget { style: const TextStyle( fontSize: 17, height: (20 / 17), + // TODO(#95) need dark-theme color color: Color(0xFF222222), ), maxLines: 2, @@ -486,6 +494,7 @@ class _TopicItem extends StatelessWidget { final subscription = store.subscriptions[streamId]!; return Material( + // TODO(#95) need dark-theme color color: Colors.white, child: InkWell( onTap: () { @@ -502,6 +511,7 @@ class _TopicItem extends StatelessWidget { style: const TextStyle( fontSize: 17, height: (20 / 17), + // TODO(#95) need dark-theme color color: Color(0xFF222222), ), maxLines: 2, @@ -519,6 +529,7 @@ class _TopicItem extends StatelessWidget { class _AtMentionMarker extends StatelessWidget { const _AtMentionMarker(); + // TODO(#95) need dark-theme color static final markerColor = const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor(); @override diff --git a/lib/widgets/login.dart b/lib/widgets/login.dart index 6aed1f44f5..3f018ff9d9 100644 --- a/lib/widgets/login.dart +++ b/lib/widgets/login.dart @@ -621,6 +621,7 @@ class _UsernamePasswordFormState extends State<_UsernamePasswordForm> { } // Loosely based on the corresponding element in the web app. +// TODO(#95) need dark-theme colors class OrDivider extends StatelessWidget { const OrDivider({super.key}); diff --git a/lib/widgets/recent_dm_conversations.dart b/lib/widgets/recent_dm_conversations.dart index 27bf2a7560..c5c63b6f01 100644 --- a/lib/widgets/recent_dm_conversations.dart +++ b/lib/widgets/recent_dm_conversations.dart @@ -109,12 +109,15 @@ class RecentDmConversationsItem extends StatelessWidget { // new Intl.ListFormat('ja').format(['Chris', 'Greg', 'Alya']) // // 'Chris、Greg、Alya' title = narrow.otherRecipientIds.map((id) => store.users[id]?.fullName ?? '(unknown user)').join(', '); + // TODO(#95) need dark-theme color avatar = ColoredBox(color: const Color(0x33808080), child: Center( + // TODO(#95) need dark-theme color child: Icon(ZulipIcons.group_dm, color: Colors.black.withOpacity(0.5)))); } return Material( + // TODO(#95) need dark-theme color color: Colors.white, child: InkWell( onTap: () { @@ -132,6 +135,7 @@ class RecentDmConversationsItem extends StatelessWidget { style: const TextStyle( fontSize: 17, height: (20 / 17), + // TODO(#95) need dark-theme color color: Color(0xFF222222), ), maxLines: 2, diff --git a/lib/widgets/subscription_list.dart b/lib/widgets/subscription_list.dart index df6d3d1e68..81a529056b 100644 --- a/lib/widgets/subscription_list.dart +++ b/lib/widgets/subscription_list.dart @@ -118,6 +118,7 @@ class _NoSubscriptionsItem extends StatelessWidget { child: Text("No streams found", textAlign: TextAlign.center, style: TextStyle( + // TODO(#95) need dark-theme color color: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(), fontSize: 18, height: (20 / 18), @@ -130,30 +131,34 @@ class _SubscriptionListHeader extends StatelessWidget { final String label; + static final _line = Expanded(child: Divider( + // TODO(#95) need dark-theme color + color: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor())); + @override Widget build(BuildContext context) { return SliverToBoxAdapter( child: ColoredBox( + // TODO(#95) need dark-theme color color: Colors.white, child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [ const SizedBox(width: 16), - Expanded(child: Divider( - color: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor())), + _line, const SizedBox(width: 8), Padding( padding: const EdgeInsets.symmetric(vertical: 7), child: Text(label, textAlign: TextAlign.center, style: TextStyle( + // TODO(#95) need dark-theme color color: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(), fontSize: 14, letterSpacing: proportionalLetterSpacing(context, 0.04, baseFontSize: 14), height: (16 / 14), ))), const SizedBox(width: 8), - Expanded(child: Divider( - color: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor())), + _line, const SizedBox(width: 16), ]))); } @@ -197,6 +202,7 @@ class SubscriptionItem extends StatelessWidget { final swatch = subscription.colorSwatch(); final hasUnreads = (unreadCount > 0); return Material( + // TODO(#95) need dark-theme color color: Colors.white, child: InkWell( onTap: () { @@ -221,6 +227,7 @@ class SubscriptionItem extends StatelessWidget { style: const TextStyle( fontSize: 18, height: (20 / 18), + // TODO(#95) need dark-theme color color: Color(0xFF262626), ).merge(weightVariableTextStyle(context, wght: hasUnreads ? 600 : null)), diff --git a/lib/widgets/unread_count_badge.dart b/lib/widgets/unread_count_badge.dart index 412ab5541c..d800cc2f96 100644 --- a/lib/widgets/unread_count_badge.dart +++ b/lib/widgets/unread_count_badge.dart @@ -32,6 +32,7 @@ class UnreadCountBadge extends StatelessWidget { final effectiveBackgroundColor = switch (backgroundColor) { StreamColorSwatch(unreadCountBadgeBackground: var color) => color, Color() => backgroundColor, + // TODO(#95) need dark-theme color null => const Color.fromRGBO(102, 102, 153, 0.15), }; @@ -57,6 +58,7 @@ class UnreadCountBadge extends StatelessWidget { // - in dark mode use `Color.fromRGBO(255, 255, 255, 0.9)` // The web app doesn't (yet?) use stream-colored unread markers // so we can't take direction from there. + // TODO(#95) need dark-theme color color: Color(0xFF222222), ).merge(weightVariableTextStyle(context, wght: bold ? 600 : null)),