Skip to content

Commit

Permalink
ui: Adjust app bar and scaffold-background to align with new Figma de…
Browse files Browse the repository at this point in the history
…sign

From discussion:
  https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/design.3A.20colors/near/1801938

and the Figma linked there:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=2074%3A26325&t=rjuqcQaHMiGBUReF-1

Now, the app-bar bottom border is colored by the new Figma's
`border-bar`, and the main background color is `bg-main`. The app
bar background is unchanged because it already matches `bg-top-bar`.
I've labeled these values with comments in the code.

And all these color variables have dark-theme variants! (See
discussion for what those are.) That'll help when we implement dark
theme, zulip#95.
  • Loading branch information
chrisbobbe committed May 20, 2024
1 parent 1439b8d commit 00c031a
Showing 1 changed file with 6 additions and 3 deletions.
9 changes: 6 additions & 3 deletions lib/widgets/theme.dart
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,12 @@ ThemeData zulipThemeData(BuildContext context) {
// ColorScheme.surfaceContainer for the scrolled-under state and
// ColorScheme.surface otherwise, and those are different colors.
scrolledUnderElevation: 0,
backgroundColor: Color(0xfff5f5f5),
backgroundColor: Color(0xfff5f5f5), // `bg-top-bar` in Figma

shape: Border(bottom: BorderSide(color: Color(0xffcccccc))),
shape: Border(bottom: BorderSide(
color: Color(0x33000000), // `border-bar` in Figma
strokeAlign: BorderSide.strokeAlignInside, // (default restated for explicitness)
)),
),
// This applies Material 3's color system to produce a palette of
// appropriately matching and contrasting colors for use in a UI.
Expand All @@ -27,7 +30,7 @@ ThemeData zulipThemeData(BuildContext context) {
colorScheme: ColorScheme.fromSeed(
seedColor: kZulipBrandColor,
),
scaffoldBackgroundColor: const Color(0xfff6f6f6),
scaffoldBackgroundColor: const Color(0xfff0f0f0), // `bg-main` in Figma
tooltipTheme: const TooltipThemeData(preferBelow: false),
);
}
Expand Down

0 comments on commit 00c031a

Please sign in to comment.