Skip to content

Commit

Permalink
ui: Slightly adjust app bar and scaffold-background, to align with web
Browse files Browse the repository at this point in the history
These colors are known in the web app as (in order of appearance):

  --color-background-navbar
  --color-navbar-bottom-border
  --color-background

(The nav-bar border color is unchanged, or changed within a rounding
error.)

The colors we had before this were reasonable, since they were taken
from the Figma. But the Figma is now over a year old, and it seems
at least as reasonable to follow the web app, especially since
they're only slightly different. Moreover, we want to implement dark
theme soon (zulip#95), and it'll be best to take the light and dark
styles from the same source. That currently has to be the web app,
since the Figma doesn't have a dark theme.
  • Loading branch information
chrisbobbe committed May 15, 2024
1 parent 122ac4b commit 88fcb40
Showing 1 changed file with 5 additions and 4 deletions.
9 changes: 5 additions & 4 deletions lib/widgets/theme.dart
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,17 @@ import 'text.dart';
ThemeData zulipThemeData(BuildContext context) {
return ThemeData(
typography: zulipTypography(context),
appBarTheme: const AppBarTheme(
appBarTheme: AppBarTheme(
// Set these two fields to prevent a color change in [AppBar]s when
// there is something scrolled under it. If an app bar hasn't been
// given a backgroundColor directly or by theme, it uses
// ColorScheme.surfaceContainer for the scrolled-under state and
// ColorScheme.surface otherwise, and those are different colors.
scrolledUnderElevation: 0,
backgroundColor: Color(0xfff5f5f5),
backgroundColor: const HSLColor.fromAHSL(1, 0, 0, 0.97).toColor(),

shape: Border(bottom: BorderSide(color: Color(0xffcccccc))),
shape: Border(
bottom: BorderSide(color: const HSLColor.fromAHSL(1, 0, 0, 0.8).toColor())),
),
// 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 +28,7 @@ ThemeData zulipThemeData(BuildContext context) {
colorScheme: ColorScheme.fromSeed(
seedColor: kZulipBrandColor,
),
scaffoldBackgroundColor: const Color(0xfff6f6f6),
scaffoldBackgroundColor: const HSLColor.fromAHSL(1, 0, 0, 0.94).toColor(),
tooltipTheme: const TooltipThemeData(preferBelow: false),
);
}
Expand Down

0 comments on commit 88fcb40

Please sign in to comment.