Skip to content

Commit

Permalink
theme [nfc]: Pull zulipThemeData out from app.dart to new theme.dar…
Browse files Browse the repository at this point in the history
…t file
  • Loading branch information
chrisbobbe committed Apr 30, 2024
1 parent 74aa25d commit af20651
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 36 deletions.
1 change: 1 addition & 0 deletions lib/notifications/display.dart
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import '../widgets/app.dart';
import '../widgets/message_list.dart';
import '../widgets/page.dart';
import '../widgets/store.dart';
import '../widgets/theme.dart';

/// Service for configuring our Android "notification channel".
class NotificationChannelManager {
Expand Down
39 changes: 3 additions & 36 deletions lib/widgets/app.dart
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import 'page.dart';
import 'recent_dm_conversations.dart';
import 'store.dart';
import 'subscription_list.dart';
import 'text.dart';
import 'theme.dart';

class ZulipApp extends StatefulWidget {
const ZulipApp({super.key, this.navigatorObservers});
Expand Down Expand Up @@ -109,34 +109,7 @@ class _ZulipAppState extends State<ZulipApp> with WidgetsBindingObserver {

@override
Widget build(BuildContext context) {
final theme = ThemeData(
typography: zulipTypography(context),
appBarTheme: const 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),

shape: Border(bottom: BorderSide(color: Color(0xffcccccc))),
),
// This applies Material 3's color system to produce a palette of
// appropriately matching and contrasting colors for use in a UI.
// The Zulip brand color is a starting point, but doesn't end up as
// one that's directly used. (After all, we didn't design it for that
// purpose; we designed a logo.) See docs:
// https://api.flutter.dev/flutter/material/ColorScheme/ColorScheme.fromSeed.html
// Or try this tool to see the whole palette:
// https://m3.material.io/theme-builder#/custom
colorScheme: ColorScheme.fromSeed(
seedColor: kZulipBrandColor,
),
scaffoldBackgroundColor: const Color(0xfff6f6f6),
tooltipTheme: const TooltipThemeData(preferBelow: false),
);

final themeData = zulipThemeData(context);
return GlobalStoreWidget(
child: Builder(builder: (context) {
final globalStore = GlobalStoreWidget.of(context);
Expand All @@ -146,7 +119,7 @@ class _ZulipAppState extends State<ZulipApp> with WidgetsBindingObserver {
title: 'Zulip',
localizationsDelegates: ZulipLocalizations.localizationsDelegates,
supportedLocales: ZulipLocalizations.supportedLocales,
theme: theme,
theme: themeData,

navigatorKey: ZulipApp.navigatorKey,
navigatorObservers: widget.navigatorObservers ?? const [],
Expand Down Expand Up @@ -181,12 +154,6 @@ class _ZulipAppState extends State<ZulipApp> with WidgetsBindingObserver {
}
}

/// The Zulip "brand color", a purplish blue.
///
/// This is chosen as the sRGB midpoint of the Zulip logo's gradient.
// As computed by Anders: https://github.com/zulip/zulip-mobile/pull/4467
const kZulipBrandColor = Color.fromRGBO(0x64, 0x92, 0xfe, 1);

class ChooseAccountPage extends StatelessWidget {
const ChooseAccountPage({super.key});

Expand Down
39 changes: 39 additions & 0 deletions lib/widgets/theme.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import 'package:flutter/material.dart';

import 'text.dart';

ThemeData zulipThemeData(BuildContext context) {
return ThemeData(
typography: zulipTypography(context),
appBarTheme: const 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),

shape: Border(bottom: BorderSide(color: Color(0xffcccccc))),
),
// This applies Material 3's color system to produce a palette of
// appropriately matching and contrasting colors for use in a UI.
// The Zulip brand color is a starting point, but doesn't end up as
// one that's directly used. (After all, we didn't design it for that
// purpose; we designed a logo.) See docs:
// https://api.flutter.dev/flutter/material/ColorScheme/ColorScheme.fromSeed.html
// Or try this tool to see the whole palette:
// https://m3.material.io/theme-builder#/custom
colorScheme: ColorScheme.fromSeed(
seedColor: kZulipBrandColor,
),
scaffoldBackgroundColor: const Color(0xfff6f6f6),
tooltipTheme: const TooltipThemeData(preferBelow: false),
);
}

/// The Zulip "brand color", a purplish blue.
///
/// This is chosen as the sRGB midpoint of the Zulip logo's gradient.
// As computed by Anders: https://github.com/zulip/zulip-mobile/pull/4467
const kZulipBrandColor = Color.fromRGBO(0x64, 0x92, 0xfe, 1);
1 change: 1 addition & 0 deletions test/notifications/display_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import 'package:zulip/widgets/app.dart';
import 'package:zulip/widgets/inbox.dart';
import 'package:zulip/widgets/message_list.dart';
import 'package:zulip/widgets/page.dart';
import 'package:zulip/widgets/theme.dart';

import '../fake_async.dart';
import '../model/binding.dart';
Expand Down

0 comments on commit af20651

Please sign in to comment.