diff --git a/example/lib/main.dart b/example/lib/main.dart index 6f4562b6..ef281eac 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -52,10 +52,13 @@ class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return StreamChat( + streamChatThemeData: StreamChatThemeData.getDefaultTheme( + ThemeData.dark(), + ), client: client, child: MaterialApp( debugShowCheckedModeBanner: false, - theme: ThemeData.dark(), + theme: ThemeData.light(), darkTheme: ThemeData.dark(), //TODO change to system once dark theme is implemented themeMode: ThemeMode.dark, @@ -426,7 +429,7 @@ class ChannelPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( - backgroundColor: Color.fromRGBO(252, 252, 252, 1), + backgroundColor: StreamChatTheme.of(context).backgroundColor, appBar: ChannelHeader( showTypingIndicator: false, ), diff --git a/lib/src/stream_chat_theme.dart b/lib/src/stream_chat_theme.dart index 573e646b..5e6a0398 100644 --- a/lib/src/stream_chat_theme.dart +++ b/lib/src/stream_chat_theme.dart @@ -247,18 +247,17 @@ class StreamChatThemeData { static StreamChatThemeData getDefaultTheme(ThemeData theme) { final accentColor = Color(0xff006cff); final isDark = theme.brightness == Brightness.dark; - final textTheme = TextTheme(); + final textTheme = isDark ? TextTheme.dark() : TextTheme.light(); final colorTheme = isDark ? ColorTheme.dark() : ColorTheme.light(); return StreamChatThemeData( textTheme: textTheme, colorTheme: colorTheme, secondaryColor: Color(0xffEAEAEA), accentColor: accentColor, - primaryColor: isDark ? colorTheme.black : colorTheme.white, - primaryIconTheme: IconThemeData( - color: isDark ? Colors.white : Colors.black.withOpacity(.5)), + primaryColor: colorTheme.white, + primaryIconTheme: IconThemeData(color: colorTheme.black.withOpacity(.5)), defaultChannelImage: (context, channel) => SizedBox(), - backgroundColor: isDark ? Colors.black : Colors.white, + backgroundColor: colorTheme.white, defaultUserImage: (context, user) => Center( child: CachedNetworkImage( filterQuality: FilterQuality.high, @@ -280,7 +279,7 @@ class StreamChatThemeData { color: Color(0xff7A7A7A), ), lastMessageAt: textTheme.footnote.copyWith( - color: Colors.black.withOpacity(.5), + color: colorTheme.black.withOpacity(.5), ), ), channelTheme: ChannelTheme( @@ -295,20 +294,17 @@ class StreamChatThemeData { width: 40, ), ), - color: isDark ? Colors.black : Colors.white, + color: colorTheme.white, title: TextStyle( fontSize: 14, - color: isDark ? Colors.white : Colors.black, + color: colorTheme.black, ), lastMessageAt: TextStyle( fontSize: 11, - color: isDark - ? Colors.white.withOpacity(.5) - : Colors.black.withOpacity(.5), + color: colorTheme.black.withOpacity(.5), ), ), - inputBackground: - isDark ? Colors.black.withAlpha(12) : Colors.white.withAlpha(12), + inputBackground: colorTheme.white.withAlpha(12), inputGradient: LinearGradient(colors: [ Color(0xFF00AEFF), Color(0xFF0076FF), @@ -317,12 +313,10 @@ class StreamChatThemeData { ownMessageTheme: MessageTheme( messageText: TextStyle( fontSize: 14.5, - color: isDark ? Colors.white : Colors.black, + color: colorTheme.black, ), createdAt: TextStyle( - color: isDark - ? Colors.white.withOpacity(.5) - : Colors.black.withOpacity(.5), + color: colorTheme.black.withOpacity(.5), fontSize: 12, ), replies: TextStyle( @@ -331,7 +325,7 @@ class StreamChatThemeData { fontSize: 12, ), messageBackgroundColor: isDark ? Color(0xff191919) : Color(0xffEAEAEA), - reactionsBackgroundColor: isDark ? Colors.black : Colors.white, + reactionsBackgroundColor: colorTheme.white, reactionsBorderColor: isDark ? Color(0xff191919) : Color(0xffEAEAEA), replyThreadColor: isDark ? Color(0xff191919) : Color(0xffEAEAEA), avatarTheme: AvatarTheme( @@ -348,15 +342,13 @@ class StreamChatThemeData { otherMessageTheme: MessageTheme( reactionsBackgroundColor: isDark ? Color(0xff191919) : Color(0xffEAEAEA), - reactionsBorderColor: isDark ? Colors.black : Colors.white, + reactionsBorderColor: colorTheme.white, messageText: TextStyle( fontSize: 14.5, - color: isDark ? Colors.white : Colors.black, + color: colorTheme.black, ), createdAt: TextStyle( - color: isDark - ? Colors.white.withOpacity(.5) - : Colors.black.withOpacity(.5), + color: colorTheme.black.withOpacity(.5), fontSize: 12, ), replies: TextStyle( @@ -367,9 +359,8 @@ class StreamChatThemeData { messageLinks: TextStyle( color: accentColor, ), - messageBackgroundColor: isDark ? Colors.black : Colors.white, - replyThreadColor: - isDark ? Colors.white.withAlpha(24) : Colors.black.withAlpha(24), + messageBackgroundColor: colorTheme.white, + replyThreadColor: colorTheme.black.withAlpha(24), avatarTheme: AvatarTheme( borderRadius: BorderRadius.circular(20), constraints: BoxConstraints.tightFor( @@ -404,7 +395,13 @@ class StreamChatThemeData { } } +enum TextThemeType { + light, + dark, +} + class TextTheme { + final TextThemeType type; final TextStyle title; final TextStyle headlineBold; final TextStyle headline; @@ -414,7 +411,8 @@ class TextTheme { final TextStyle footnote; final TextStyle captionBold; - TextTheme({ + TextTheme.light({ + this.type = TextThemeType.light, this.title = const TextStyle( fontSize: 22, fontWeight: FontWeight.bold, @@ -448,6 +446,49 @@ class TextTheme { ), }); + TextTheme.dark({ + this.type = TextThemeType.dark, + this.title = const TextStyle( + fontSize: 22, + fontWeight: FontWeight.bold, + color: Colors.white, + ), + this.headlineBold = const TextStyle( + fontSize: 16, + fontWeight: FontWeight.bold, + color: Colors.white, + ), + this.headline = const TextStyle( + fontSize: 16, + fontWeight: FontWeight.w500, + color: Colors.white, + ), + this.bodyBold = const TextStyle( + fontSize: 14, + fontWeight: FontWeight.bold, + color: Colors.white, + ), + this.body = const TextStyle( + fontSize: 14, + fontWeight: FontWeight.w500, + color: Colors.white, + ), + this.footnoteBold = const TextStyle( + fontSize: 12, + fontWeight: FontWeight.w500, + color: Colors.white, + ), + this.footnote = const TextStyle( + fontSize: 12, + color: Colors.white, + ), + this.captionBold = const TextStyle( + fontSize: 10, + fontWeight: FontWeight.bold, + color: Colors.white, + ), + }); + TextTheme copyWith({ TextStyle body, TextStyle title, @@ -458,16 +499,27 @@ class TextTheme { TextStyle footnote, TextStyle captionBold, }) { - return TextTheme( - body: body ?? this.body, - title: title ?? this.title, - headlineBold: headlineBold ?? this.headlineBold, - headline: headline ?? this.headline, - bodyBold: bodyBold ?? this.bodyBold, - footnoteBold: footnoteBold ?? this.footnoteBold, - footnote: footnote ?? this.footnote, - captionBold: captionBold ?? this.captionBold, - ); + return type == TextThemeType.light + ? TextTheme.light( + body: body ?? this.body, + title: title ?? this.title, + headlineBold: headlineBold ?? this.headlineBold, + headline: headline ?? this.headline, + bodyBold: bodyBold ?? this.bodyBold, + footnoteBold: footnoteBold ?? this.footnoteBold, + footnote: footnote ?? this.footnote, + captionBold: captionBold ?? this.captionBold, + ) + : TextTheme.dark( + body: body ?? this.body, + title: title ?? this.title, + headlineBold: headlineBold ?? this.headlineBold, + headline: headline ?? this.headline, + bodyBold: bodyBold ?? this.bodyBold, + footnoteBold: footnoteBold ?? this.footnoteBold, + footnote: footnote ?? this.footnote, + captionBold: captionBold ?? this.captionBold, + ); } }