mirror of
https://gitlab.com/nkming2/nc-photos.git
synced 2025-02-02 06:46:22 +01:00
Update app theme
This commit is contained in:
parent
5b918b81d4
commit
c22c89678b
14 changed files with 130 additions and 63 deletions
|
@ -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;
|
||||
|
||||
|
|
|
@ -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),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
@ -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),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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,
|
||||
),
|
||||
),
|
||||
|
|
|
@ -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),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
|
|
@ -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,
|
||||
),
|
||||
),
|
||||
|
|
|
@ -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(),
|
||||
|
|
|
@ -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,
|
||||
),
|
||||
),
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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)),
|
||||
),
|
||||
|
|
|
@ -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),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
|
Loading…
Reference in a new issue