From c22c89678b7f7d60ad6426295ee80d8caf898fcd Mon Sep 17 00:00:00 2001 From: Ming Ming Date: Sat, 17 Apr 2021 16:59:16 +0800 Subject: [PATCH] Update app theme --- lib/theme.dart | 53 ++++++++++++++++++++------- lib/widget/account_picker_dialog.dart | 13 +++++-- lib/widget/album_grid_item.dart | 6 ++- lib/widget/album_picker_dialog.dart | 8 +++- lib/widget/album_viewer.dart | 5 ++- lib/widget/connect.dart | 4 +- lib/widget/home_albums.dart | 16 ++++---- lib/widget/home_app_bar.dart | 8 +++- lib/widget/home_photos.dart | 2 +- lib/widget/my_app.dart | 10 ++--- lib/widget/sign_in.dart | 2 +- lib/widget/splash.dart | 2 +- lib/widget/viewer.dart | 26 ++++++++----- lib/widget/viewer_detail_pane.dart | 38 ++++++++++++++----- 14 files changed, 130 insertions(+), 63 deletions(-) diff --git a/lib/theme.dart b/lib/theme.dart index dcca32e4..40662487 100644 --- a/lib/theme.dart +++ b/lib/theme.dart @@ -19,9 +19,9 @@ class AppTheme extends StatelessWidget { final appBarTheme = theme.appBarTheme.copyWith( brightness: Brightness.dark, color: theme.scaffoldBackgroundColor, - actionsIconTheme: theme.primaryIconTheme.copyWith(color: Colors.black), - iconTheme: theme.primaryIconTheme.copyWith(color: Colors.black), - textTheme: theme.primaryTextTheme.apply(bodyColor: Colors.black), + actionsIconTheme: theme.primaryIconTheme.copyWith(color: Colors.black87), + iconTheme: theme.primaryIconTheme.copyWith(color: Colors.black87), + textTheme: theme.primaryTextTheme.apply(bodyColor: Colors.black87), ); return theme.copyWith(appBarTheme: appBarTheme); } @@ -30,9 +30,12 @@ class AppTheme extends StatelessWidget { final appBarTheme = theme.appBarTheme.copyWith( brightness: Brightness.dark, color: theme.scaffoldBackgroundColor, - actionsIconTheme: theme.primaryIconTheme.copyWith(color: Colors.white), - iconTheme: theme.primaryIconTheme.copyWith(color: Colors.white), - textTheme: theme.primaryTextTheme.apply(bodyColor: Colors.white), + actionsIconTheme: + theme.primaryIconTheme.copyWith(color: Colors.white.withOpacity(.87)), + iconTheme: + theme.primaryIconTheme.copyWith(color: Colors.white.withOpacity(.87)), + textTheme: theme.primaryTextTheme + .apply(bodyColor: Colors.white.withOpacity(.87)), ); return theme.copyWith(appBarTheme: appBarTheme); } @@ -43,17 +46,21 @@ class AppTheme extends StatelessWidget { return theme.appBarTheme.copyWith( brightness: Brightness.dark, color: Colors.grey[800], - actionsIconTheme: theme.primaryIconTheme.copyWith(color: Colors.white), - iconTheme: theme.primaryIconTheme.copyWith(color: Colors.white), - textTheme: theme.primaryTextTheme.apply(bodyColor: Colors.white), + actionsIconTheme: theme.primaryIconTheme + .copyWith(color: Colors.white.withOpacity(.87)), + iconTheme: theme.primaryIconTheme + .copyWith(color: Colors.white.withOpacity(.87)), + textTheme: theme.primaryTextTheme + .apply(bodyColor: Colors.white.withOpacity(.87)), ); } else { return theme.appBarTheme.copyWith( brightness: Brightness.dark, color: Colors.grey[200], - actionsIconTheme: theme.primaryIconTheme.copyWith(color: Colors.black), - iconTheme: theme.primaryIconTheme.copyWith(color: Colors.black), - textTheme: theme.primaryTextTheme.apply(bodyColor: Colors.black), + actionsIconTheme: + theme.primaryIconTheme.copyWith(color: Colors.black87), + iconTheme: theme.primaryIconTheme.copyWith(color: Colors.black87), + textTheme: theme.primaryTextTheme.apply(bodyColor: Colors.black87), ); } } @@ -61,13 +68,13 @@ class AppTheme extends StatelessWidget { static Color getSelectionOverlayColor(BuildContext context) { return Theme.of(context).brightness == Brightness.light ? primarySwatchLight[100].withOpacity(0.7) - : primarySwatchDark[100].withOpacity(0.7); + : primarySwatchDark[700].withOpacity(0.7); } static Color getSelectionCheckColor(BuildContext context) { return Theme.of(context).brightness == Brightness.light ? Colors.grey[800] - : Colors.grey[200]; + : Colors.grey[350]; } static Color getOverscrollIndicatorColor(BuildContext context) { @@ -80,6 +87,24 @@ class AppTheme extends StatelessWidget { return Colors.blue[200]; } + static Color getCloudIconColor(BuildContext context) { + return Theme.of(context).brightness == Brightness.light + ? primarySwatchLight + : primarySwatchDark; + } + + static Color getPrimaryTextColor(BuildContext context) { + return Theme.of(context).brightness == Brightness.light + ? Colors.black87 + : Colors.white.withOpacity(.87); + } + + static Color getSecondaryTextColor(BuildContext context) { + return Theme.of(context).brightness == Brightness.light + ? Colors.black.withOpacity(.6) + : Colors.white60; + } + static const primarySwatchLight = Colors.blue; static const primarySwatchDark = Colors.cyan; diff --git a/lib/widget/account_picker_dialog.dart b/lib/widget/account_picker_dialog.dart index 5f5c1071..fbde517a 100644 --- a/lib/widget/account_picker_dialog.dart +++ b/lib/widget/account_picker_dialog.dart @@ -5,6 +5,7 @@ import 'package:nc_photos/account.dart'; import 'package:nc_photos/k.dart' as k; import 'package:nc_photos/pref.dart'; import 'package:nc_photos/snack_bar_manager.dart'; +import 'package:nc_photos/theme.dart'; import 'package:nc_photos/widget/home.dart'; import 'package:nc_photos/widget/sign_in.dart'; @@ -37,7 +38,10 @@ class _AccountPickerDialogState extends State { title: Text(a.url), subtitle: Text(a.username), trailing: IconButton( - icon: const Icon(Icons.close), + icon: Icon( + Icons.close, + color: AppTheme.getSecondaryTextColor(context), + ), onPressed: () => _onRemoveItemPressed(a)), ), )) @@ -51,8 +55,11 @@ class _AccountPickerDialogState extends State { }, child: Tooltip( message: AppLocalizations.of(context).addServerTooltip, - child: const Center( - child: const Icon(Icons.add, color: Colors.black54), + child: Center( + child: Icon( + Icons.add, + color: AppTheme.getSecondaryTextColor(context), + ), ), ), ), diff --git a/lib/widget/album_grid_item.dart b/lib/widget/album_grid_item.dart index 694f1245..6cd387cb 100644 --- a/lib/widget/album_grid_item.dart +++ b/lib/widget/album_grid_item.dart @@ -29,7 +29,9 @@ class AlbumGridItem extends StatelessWidget { const SizedBox(height: 8), Text( title ?? "", - style: Theme.of(context).textTheme.bodyText1, + style: Theme.of(context).textTheme.bodyText1.copyWith( + color: AppTheme.getPrimaryTextColor(context), + ), textAlign: TextAlign.start, maxLines: 1, overflow: TextOverflow.ellipsis, @@ -39,7 +41,7 @@ class AlbumGridItem extends StatelessWidget { subtitle ?? "", style: Theme.of(context).textTheme.bodyText2.copyWith( fontSize: 10, - color: Colors.grey, + color: AppTheme.getSecondaryTextColor(context), ), textAlign: TextAlign.start, maxLines: 1, diff --git a/lib/widget/album_picker_dialog.dart b/lib/widget/album_picker_dialog.dart index a24eec3a..5de67bf4 100644 --- a/lib/widget/album_picker_dialog.dart +++ b/lib/widget/album_picker_dialog.dart @@ -10,6 +10,7 @@ import 'package:nc_photos/entity/album.dart'; import 'package:nc_photos/exception_util.dart' as exception_util; import 'package:nc_photos/k.dart' as k; import 'package:nc_photos/snack_bar_manager.dart'; +import 'package:nc_photos/theme.dart'; import 'package:nc_photos/widget/new_album_dialog.dart'; class AlbumPickerDialog extends StatefulWidget { @@ -74,8 +75,11 @@ class _AlbumPickerDialogState extends State { onPressed: () => _onNewAlbumPressed(context), child: Tooltip( message: AppLocalizations.of(context).createAlbumTooltip, - child: const Center( - child: const Icon(Icons.add, color: Colors.black54), + child: Center( + child: Icon( + Icons.add, + color: AppTheme.getSecondaryTextColor(context), + ), ), ), ), diff --git a/lib/widget/album_viewer.dart b/lib/widget/album_viewer.dart index 40a8dabc..138b0216 100644 --- a/lib/widget/album_viewer.dart +++ b/lib/widget/album_viewer.dart @@ -153,7 +153,8 @@ class _AlbumViewerState extends State try { if (_coverPreviewUrl != null) { cover = Opacity( - opacity: 0.25, + opacity: + Theme.of(context).brightness == Brightness.light ? 0.25 : 0.35, child: FittedBox( clipBehavior: Clip.hardEdge, fit: BoxFit.cover, @@ -179,7 +180,7 @@ class _AlbumViewerState extends State title: Text( _album.name, style: TextStyle( - color: Theme.of(context).textTheme.headline6.color, + color: AppTheme.getPrimaryTextColor(context), ), ), ), diff --git a/lib/widget/connect.dart b/lib/widget/connect.dart index 6fbe6280..23d9acb2 100644 --- a/lib/widget/connect.dart +++ b/lib/widget/connect.dart @@ -71,10 +71,10 @@ class _ConnectState extends State { crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ - const Icon( + Icon( Icons.cloud, size: 128, - color: Colors.blue, + color: AppTheme.getCloudIconColor(context), ), Text( AppLocalizations.of(context) diff --git a/lib/widget/home_albums.dart b/lib/widget/home_albums.dart index b5f4309d..7c723c78 100644 --- a/lib/widget/home_albums.dart +++ b/lib/widget/home_albums.dart @@ -212,9 +212,9 @@ class _HomeAlbumsState extends State { ), ); } catch (_) { - cover = const Icon( + cover = Icon( Icons.panorama, - color: Colors.white, + color: Colors.white.withOpacity(.8), size: 96, ); } @@ -223,8 +223,8 @@ class _HomeAlbumsState extends State { borderRadius: BorderRadius.circular(8), child: Container( color: Theme.of(context).brightness == Brightness.light - ? Colors.black.withAlpha(40) - : Colors.white.withAlpha(40), + ? Colors.black26 + : Colors.white24, constraints: const BoxConstraints.expand(), child: cover, ), @@ -237,12 +237,12 @@ class _HomeAlbumsState extends State { borderRadius: BorderRadius.circular(8), child: Container( color: Theme.of(context).brightness == Brightness.light - ? Colors.black.withAlpha(40) - : Colors.white.withAlpha(40), + ? Colors.black26 + : Colors.white24, constraints: const BoxConstraints.expand(), - child: const Icon( + child: Icon( Icons.add, - color: Colors.white, + color: Colors.white.withOpacity(.8), size: 96, ), ), diff --git a/lib/widget/home_app_bar.dart b/lib/widget/home_app_bar.dart index e0b05293..181d8305 100644 --- a/lib/widget/home_app_bar.dart +++ b/lib/widget/home_app_bar.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; import 'package:nc_photos/account.dart'; +import 'package:nc_photos/theme.dart'; import 'package:nc_photos/widget/account_picker_dialog.dart'; import 'package:nc_photos/widget/settings.dart'; @@ -33,7 +34,7 @@ class HomeSliverAppBar extends StatelessWidget { children: [ Icon( Icons.cloud, - color: Theme.of(context).primaryColor, + color: AppTheme.getCloudIconColor(context), ), const SizedBox(width: 8), Expanded( @@ -46,7 +47,10 @@ class HomeSliverAppBar extends StatelessWidget { ), Text( account.username, - style: const TextStyle(fontSize: 14, color: Colors.grey), + style: TextStyle( + fontSize: 14, + color: AppTheme.getSecondaryTextColor(context), + ), ), ], ), diff --git a/lib/widget/home_photos.dart b/lib/widget/home_photos.dart index 7edc3efd..71f5c8e9 100644 --- a/lib/widget/home_photos.dart +++ b/lib/widget/home_photos.dart @@ -211,7 +211,7 @@ class _HomePhotosState extends State { child: Text( item.subtitle, style: Theme.of(context).textTheme.caption.copyWith( - color: Theme.of(context).textTheme.bodyText1.color, + color: AppTheme.getPrimaryTextColor(context), fontWeight: FontWeight.bold, ), ), diff --git a/lib/widget/my_app.dart b/lib/widget/my_app.dart index 8b05fbdf..852c7467 100644 --- a/lib/widget/my_app.dart +++ b/lib/widget/my_app.dart @@ -24,7 +24,7 @@ class MyApp extends StatelessWidget implements SnackBarHandler { return MaterialApp( onGenerateTitle: (context) => AppLocalizations.of(context).appTitle, theme: _getLightTheme(), - // darkTheme: _getDarkTheme(), + darkTheme: _getDarkTheme(), initialRoute: Splash.routeName, onGenerateRoute: _onGenerateRoute, scaffoldMessengerKey: _scaffoldMessengerKey, @@ -43,10 +43,10 @@ class MyApp extends StatelessWidget implements SnackBarHandler { primarySwatch: AppTheme.primarySwatchLight, ); - // ThemeData _getDarkTheme() => ThemeData( - // brightness: Brightness.dark, - // primarySwatch: AppTheme.primarySwatchDark, - // ); + ThemeData _getDarkTheme() => ThemeData( + brightness: Brightness.dark, + primarySwatch: AppTheme.primarySwatchDark, + ); Map _getRouter() => { Setup.routeName: (context) => Setup(), diff --git a/lib/widget/sign_in.dart b/lib/widget/sign_in.dart index fa21481d..b253206d 100644 --- a/lib/widget/sign_in.dart +++ b/lib/widget/sign_in.dart @@ -110,7 +110,7 @@ class _SignInState extends State { Center( child: Icon( Icons.cloud, - color: Theme.of(context).primaryColor, + color: AppTheme.getCloudIconColor(context), size: 72, ), ), diff --git a/lib/widget/splash.dart b/lib/widget/splash.dart index 14cc11c4..b2137884 100644 --- a/lib/widget/splash.dart +++ b/lib/widget/splash.dart @@ -52,7 +52,7 @@ class _SplashState extends State { Icon( Icons.cloud, size: 96, - color: Theme.of(context).primaryColor, + color: AppTheme.getCloudIconColor(context), ), const SizedBox(height: 8), Text( diff --git a/lib/widget/viewer.dart b/lib/widget/viewer.dart index ec498c25..d2071fa4 100644 --- a/lib/widget/viewer.dart +++ b/lib/widget/viewer.dart @@ -201,10 +201,12 @@ class _ViewerState extends State with TickerProviderStateMixin { backgroundColor: Colors.transparent, shadowColor: Colors.transparent, brightness: Brightness.dark, - iconTheme: - Theme.of(context).iconTheme.copyWith(color: Colors.white), - actionsIconTheme: - Theme.of(context).iconTheme.copyWith(color: Colors.white), + iconTheme: Theme.of(context).iconTheme.copyWith( + color: Colors.white.withOpacity(.87), + ), + actionsIconTheme: Theme.of(context).iconTheme.copyWith( + color: Colors.white.withOpacity(.87), + ), actions: [ if (!_isDetailPaneActive && _canOpenDetailPane()) IconButton( @@ -252,8 +254,10 @@ class _ViewerState extends State with TickerProviderStateMixin { Expanded( flex: 1, child: IconButton( - icon: const Icon(Icons.download_outlined, - color: Colors.white), + icon: Icon( + Icons.download_outlined, + color: Colors.white.withOpacity(.87), + ), tooltip: AppLocalizations.of(context).downloadTooltip, onPressed: () => _onDownloadPressed(context), ), @@ -261,8 +265,10 @@ class _ViewerState extends State with TickerProviderStateMixin { Expanded( flex: 1, child: IconButton( - icon: const Icon(Icons.delete_outlined, - color: Colors.white), + icon: Icon( + Icons.delete_outlined, + color: Colors.white.withOpacity(.87), + ), tooltip: AppLocalizations.of(context).deleteTooltip, onPressed: () => _onDeletePressed(context), ), @@ -316,8 +322,8 @@ class _ViewerState extends State with TickerProviderStateMixin { alignment: Alignment.topLeft, constraints: BoxConstraints( minHeight: MediaQuery.of(context).size.height), - decoration: const BoxDecoration( - color: Colors.white, + decoration: BoxDecoration( + color: Theme.of(context).scaffoldBackgroundColor, borderRadius: const BorderRadius.vertical( top: const Radius.circular(4)), ), diff --git a/lib/widget/viewer_detail_pane.dart b/lib/widget/viewer_detail_pane.dart index 1323ba4d..1e6a608b 100644 --- a/lib/widget/viewer_detail_pane.dart +++ b/lib/widget/viewer_detail_pane.dart @@ -114,28 +114,43 @@ class _ViewerDetailPaneState extends State { child: const Divider(), ), ListTile( - leading: const Icon(Icons.image_outlined), + leading: Icon( + Icons.image_outlined, + color: AppTheme.getSecondaryTextColor(context), + ), title: Text(basenameWithoutExtension(widget.file.path)), subtitle: Text(widget.file.strippedPath), ), ListTile( - leading: const Icon(Icons.calendar_today_outlined), + leading: Icon( + Icons.calendar_today_outlined, + color: AppTheme.getSecondaryTextColor(context), + ), title: Text("$dateStr $timeStr"), ), if (_width != null && _height != null) ListTile( - leading: const Icon(Icons.aspect_ratio), + leading: Icon( + Icons.aspect_ratio, + color: AppTheme.getSecondaryTextColor(context), + ), title: Text("$_width x $_height"), subtitle: Text(sizeSubStr), ) else ListTile( - leading: const Icon(Icons.aspect_ratio), + leading: Icon( + Icons.aspect_ratio, + color: AppTheme.getSecondaryTextColor(context), + ), title: Text(_byteSizeToString(widget.file.contentLength)), ), if (_model != null) ListTile( - leading: const Icon(Icons.camera_outlined), + leading: Icon( + Icons.camera_outlined, + color: AppTheme.getSecondaryTextColor(context), + ), title: Text(_model), subtitle: cameraSubStr.isNotEmpty ? Text(cameraSubStr) : null, ), @@ -369,9 +384,6 @@ class _DetailPaneButton extends StatelessWidget { build(BuildContext context) { return TextButton( onPressed: onPressed, - style: AppTheme.flatButtonStyle.copyWith( - foregroundColor: MaterialStateProperty.all(Colors.grey[700]), - ), child: SizedBox( width: 96, height: 96, @@ -379,12 +391,18 @@ class _DetailPaneButton extends StatelessWidget { padding: const EdgeInsets.all(16), child: Column( children: [ - Icon(icon), + Icon( + icon, + color: AppTheme.getPrimaryTextColor(context), + ), const SizedBox(height: 4), Text( label, textAlign: TextAlign.center, - style: const TextStyle(fontSize: 12), + style: TextStyle( + fontSize: 12, + color: AppTheme.getSecondaryTextColor(context), + ), ), ], ),