Update app theme

This commit is contained in:
Ming Ming 2021-04-17 16:59:16 +08:00
parent 5b918b81d4
commit c22c89678b
14 changed files with 130 additions and 63 deletions

View file

@ -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;

View file

@ -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<AccountPickerDialog> {
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<AccountPickerDialog> {
},
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),
),
),
),
),

View file

@ -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,

View file

@ -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<AlbumPickerDialog> {
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),
),
),
),
),

View file

@ -153,7 +153,8 @@ class _AlbumViewerState extends State<AlbumViewer>
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<AlbumViewer>
title: Text(
_album.name,
style: TextStyle(
color: Theme.of(context).textTheme.headline6.color,
color: AppTheme.getPrimaryTextColor(context),
),
),
),

View file

@ -71,10 +71,10 @@ class _ConnectState extends State<Connect> {
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)

View file

@ -212,9 +212,9 @@ class _HomeAlbumsState extends State<HomeAlbums> {
),
);
} 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<HomeAlbums> {
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<HomeAlbums> {
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,
),
),

View file

@ -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),
),
),
],
),

View file

@ -211,7 +211,7 @@ class _HomePhotosState extends State<HomePhotos> {
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,
),
),

View file

@ -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<String, WidgetBuilder> _getRouter() => {
Setup.routeName: (context) => Setup(),

View file

@ -110,7 +110,7 @@ class _SignInState extends State<SignIn> {
Center(
child: Icon(
Icons.cloud,
color: Theme.of(context).primaryColor,
color: AppTheme.getCloudIconColor(context),
size: 72,
),
),

View file

@ -52,7 +52,7 @@ class _SplashState extends State<Splash> {
Icon(
Icons.cloud,
size: 96,
color: Theme.of(context).primaryColor,
color: AppTheme.getCloudIconColor(context),
),
const SizedBox(height: 8),
Text(

View file

@ -201,10 +201,12 @@ class _ViewerState extends State<Viewer> 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<Viewer> 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<Viewer> 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<Viewer> 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)),
),

View file

@ -114,28 +114,43 @@ class _ViewerDetailPaneState extends State<ViewerDetailPane> {
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<Color>(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),
),
),
],
),