From 4f8cc9e4b6037271ec173328b103809c3169ac29 Mon Sep 17 00:00:00 2001 From: Adrian Baumgart Date: Fri, 26 Jul 2024 19:32:25 +0200 Subject: [PATCH] added global theme --- lib/global_theme.dart | 69 +++++++++++++++++++++++ lib/main.dart | 7 ++- lib/views/home_view.dart | 22 +++----- lib/views/login_view.dart | 2 +- lib/views/opensource_licenses_view.dart | 14 ++--- lib/views/redirect_rules_detail_view.dart | 30 +++------- lib/views/settings_view.dart | 48 +++++++--------- lib/views/short_url_edit_view.dart | 11 ++-- lib/views/url_detail_view.dart | 14 ++--- lib/views/url_list_view.dart | 20 ++----- 10 files changed, 130 insertions(+), 107 deletions(-) create mode 100644 lib/global_theme.dart diff --git a/lib/global_theme.dart b/lib/global_theme.dart new file mode 100644 index 0000000..fde5df5 --- /dev/null +++ b/lib/global_theme.dart @@ -0,0 +1,69 @@ +import 'package:dynamic_color/dynamic_color.dart'; +import 'package:flutter/material.dart'; + +class GlobalTheme { + static final Color _lightFocusColor = Colors.black.withOpacity(0.12); + static final Color _darkFocusColor = Colors.white.withOpacity(0.12); + static ThemeData lightThemeData(ColorScheme? dynamicColorScheme) { + return themeData(lightColorScheme, dynamicColorScheme, _lightFocusColor); + } + static ThemeData darkThemeData(ColorScheme? dynamicColorScheme) { + return themeData(darkColorScheme, dynamicColorScheme, _darkFocusColor); + } + + static ThemeData themeData(ColorScheme colorScheme, ColorScheme? dynamic, + Color focusColor) { + return ThemeData( + colorScheme: colorScheme, + canvasColor: colorScheme.surface, + scaffoldBackgroundColor: colorScheme.surface, + highlightColor: Colors.transparent, + dividerColor: colorScheme.outline, + focusColor: focusColor, + useMaterial3: true, + appBarTheme: AppBarTheme( + backgroundColor: colorScheme.surface, + foregroundColor: colorScheme.onSurface, + elevation: 0 + ) + ); + } + + static ColorScheme get lightColorScheme { + return ColorScheme( + primary: Color(0xff747ab5), + onPrimary: Colors.white, + secondary: Color(0x445d63a6),// Color(0xFFDDE0E0), + onSecondary: Color(0xFF322942), + tertiary: Colors.grey[300], + onTertiary: Colors.grey[700], + surfaceContainer: (Colors.grey[100])!, + outline: (Colors.grey[400])!, + error: (Colors.red[400])!, + onError: Colors.white, + surface: Color(0xFFFAFBFB), + onSurface: Color(0xFF241E30), + brightness: Brightness.light, + ).harmonized(); + } + + static ColorScheme get darkColorScheme { + return ColorScheme( + primary: Color(0xff5d63a6), + secondary: Colors.blue.shade500, + secondaryContainer: Color(0xff1c1c1c), + surface: Colors.black, + surfaceContainer: Color(0xff0f0f0f), + onSurfaceVariant: Colors.grey[400], + tertiary: Colors.grey[900], + onTertiary: Colors.grey, + outline: (Colors.grey[800])!, + error: (Colors.red[400])!, + onError: Colors.white, + onPrimary: Colors.white, + onSecondary: (Colors.grey[400])!, + onSurface: Colors.white, + brightness: Brightness.dark, + ); + } +} \ No newline at end of file diff --git a/lib/main.dart b/lib/main.dart index a8c733f..ae57828 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:shlink_app/global_theme.dart'; import 'package:shlink_app/views/login_view.dart'; import 'package:shlink_app/views/navigationbar_view.dart'; import 'globals.dart' as globals; @@ -26,7 +27,9 @@ class MyApp extends StatelessWidget { return MaterialApp( title: 'Shlink', debugShowCheckedModeBanner: false, - theme: ThemeData( + theme: GlobalTheme.lightThemeData(lightColorScheme), + darkTheme: GlobalTheme.darkThemeData(darkColorScheme), + /*theme: ThemeData( appBarTheme: const AppBarTheme( backgroundColor: Color(0xfffafafa), ), @@ -41,7 +44,7 @@ class MyApp extends StatelessWidget { colorScheme: darkColorScheme?.copyWith(surface: Colors.black) ?? _defaultDarkColorScheme, useMaterial3: true, - ), + ),*/ home: const InitialPage()); }); } diff --git a/lib/views/home_view.dart b/lib/views/home_view.dart index 0e3e85d..6270249 100644 --- a/lib/views/home_view.dart +++ b/lib/views/home_view.dart @@ -76,8 +76,8 @@ class _HomeViewState extends State { } final snackBar = SnackBar( - content: Text(text), - backgroundColor: Colors.red[400], + content: Text(text, style: TextStyle(color: Theme.of(context).colorScheme.onError)), + backgroundColor: Theme.of(context).colorScheme.error, behavior: SnackBarBehavior.floating); ScaffoldMessenger.of(context).showSnackBar(snackBar); }); @@ -99,8 +99,8 @@ class _HomeViewState extends State { } final snackBar = SnackBar( - content: Text(text), - backgroundColor: Colors.red[400], + content: Text(text, style: TextStyle(color: Theme.of(context).colorScheme.onError)), + backgroundColor: Theme.of(context).colorScheme.error, behavior: SnackBarBehavior.floating); ScaffoldMessenger.of(context).showSnackBar(snackBar); }); @@ -139,7 +139,7 @@ class _HomeViewState extends State { }, child: Text(globals.serverManager.getServerUrl(), style: TextStyle( - fontSize: 16, color: Colors.grey[600])), + fontSize: 16, color: Theme.of(context).colorScheme.onTertiary)), ) ], )), @@ -189,7 +189,7 @@ class _HomeViewState extends State { 'Create one by tapping the "+" button below', style: TextStyle( fontSize: 16, - color: Colors.grey[600]), + color: Theme.of(context).colorScheme.onSecondary), ), ) ], @@ -251,18 +251,12 @@ class _HomeViewState extends State { eyeStyle: QrEyeStyle( eyeShape: QrEyeShape.square, color: - MediaQuery.of(context).platformBrightness == - Brightness.dark - ? Colors.white - : Colors.black, + Theme.of(context).colorScheme.onPrimary ), dataModuleStyle: QrDataModuleStyle( dataModuleShape: QrDataModuleShape.square, color: - MediaQuery.of(context).platformBrightness == - Brightness.dark - ? Colors.white - : Colors.black, + Theme.of(context).colorScheme.onPrimary ), ))), ), diff --git a/lib/views/login_view.dart b/lib/views/login_view.dart index 0210f39..63a0106 100644 --- a/lib/views/login_view.dart +++ b/lib/views/login_view.dart @@ -135,7 +135,7 @@ class _LoginViewState extends State { children: [ Flexible( child: Text(_errorMessage, - style: const TextStyle(color: Colors.red), + style: TextStyle(color: Theme.of(context).colorScheme.onError), textAlign: TextAlign.center)) ], ), diff --git a/lib/views/opensource_licenses_view.dart b/lib/views/opensource_licenses_view.dart index 6fceca1..2bc83b1 100644 --- a/lib/views/opensource_licenses_view.dart +++ b/lib/views/opensource_licenses_view.dart @@ -40,9 +40,7 @@ class _OpenSourceLicensesViewState extends State { child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(8), - color: Theme.of(context).brightness == Brightness.light - ? Colors.grey[100] - : Colors.grey[900], + color: Theme.of(context).colorScheme.surfaceContainer, ), child: Padding( padding: const EdgeInsets.only( @@ -54,13 +52,13 @@ class _OpenSourceLicensesViewState extends State { style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 18)), Text("Version: ${currentLicense.version ?? "N/A"}", - style: const TextStyle(color: Colors.grey)), + style: TextStyle(color: Theme.of(context).colorScheme.onTertiary)), const SizedBox(height: 8), - const Divider(), + Divider(color: Theme.of(context).dividerColor), const SizedBox(height: 8), Text(currentLicense.license, textAlign: TextAlign.justify, - style: const TextStyle(color: Colors.grey)), + style: TextStyle(color: Theme.of(context).colorScheme.onTertiary)), ], ), ), @@ -69,12 +67,12 @@ class _OpenSourceLicensesViewState extends State { ); }, childCount: LicenseUtil.getLicenses().length), ), - const SliverToBoxAdapter( + SliverToBoxAdapter( child: Padding( padding: EdgeInsets.only(top: 8, bottom: 20), child: Text( "Thank you to all maintainers of these repositories 💝", - style: TextStyle(color: Colors.grey), + style: TextStyle(color: Theme.of(context).colorScheme.onTertiary), textAlign: TextAlign.center, ), )) diff --git a/lib/views/redirect_rules_detail_view.dart b/lib/views/redirect_rules_detail_view.dart index fc39fbe..bdf49f6 100644 --- a/lib/views/redirect_rules_detail_view.dart +++ b/lib/views/redirect_rules_detail_view.dart @@ -49,8 +49,8 @@ class _RedirectRulesDetailViewState extends State { } final snackBar = SnackBar( - content: Text(text), - backgroundColor: Colors.red[400], + content: Text(text, style: TextStyle(color: Theme.of(context).colorScheme.onError)), + backgroundColor: Theme.of(context).colorScheme.error, behavior: SnackBarBehavior.floating); ScaffoldMessenger.of(context).showSnackBar(snackBar); return false; @@ -71,8 +71,8 @@ class _RedirectRulesDetailViewState extends State { } final snackBar = SnackBar( - content: Text(text), - backgroundColor: Colors.red[400], + content: Text(text, style: TextStyle(color: Theme.of(context).colorScheme.onError)), + backgroundColor: Theme.of(context).colorScheme.error, behavior: SnackBarBehavior.floating); ScaffoldMessenger.of(context).showSnackBar(snackBar); return false; @@ -141,7 +141,7 @@ class _RedirectRulesDetailViewState extends State { child: Text( 'Adding redirect rules will be supported soon!', style: TextStyle( - fontSize: 16, color: Colors.grey[600]), + fontSize: 16, color: Theme.of(context).colorScheme.onSecondary), ), ) ], @@ -221,10 +221,7 @@ class _ListCellState extends State<_ListCell> { decoration: BoxDecoration( border: Border( bottom: BorderSide( - color: MediaQuery.of(context).platformBrightness == - Brightness.dark - ? Colors.grey[800]! - : Colors.grey[300]!)), + color: Theme.of(context).dividerColor)), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -252,10 +249,7 @@ class _ListCellState extends State<_ListCell> { decoration: BoxDecoration( borderRadius: BorderRadius.circular(4), color: - MediaQuery.of(context).platformBrightness == - Brightness.dark - ? Colors.grey[900] - : Colors.grey[300], + Theme.of(context).colorScheme.tertiary, ), child: Text(_conditionToTagString(condition)), ), @@ -269,19 +263,13 @@ class _ListCellState extends State<_ListCell> { children: [ IconButton( disabledColor: - MediaQuery.of(context).platformBrightness == - Brightness.dark - ? Colors.grey[700] - : Colors.grey[400], + Theme.of(context).disabledColor, onPressed: widget.moveUp, icon: const Icon(Icons.arrow_upward), ), IconButton( disabledColor: - MediaQuery.of(context).platformBrightness == - Brightness.dark - ? Colors.grey[700] - : Colors.grey[400], + Theme.of(context).disabledColor, onPressed: widget.moveDown, icon: const Icon(Icons.arrow_downward), ), diff --git a/lib/views/settings_view.dart b/lib/views/settings_view.dart index 3695ea2..af18411 100644 --- a/lib/views/settings_view.dart +++ b/lib/views/settings_view.dart @@ -52,8 +52,8 @@ class _SettingsViewState extends State { } final snackBar = SnackBar( - content: Text(text), - backgroundColor: Colors.red[400], + content: Text(text, style: TextStyle(color: Theme.of(context).colorScheme.onError)), + backgroundColor: Theme.of(context).colorScheme.error, behavior: SnackBarBehavior.floating); ScaffoldMessenger.of(context).showSnackBar(snackBar); }); @@ -87,9 +87,7 @@ class _SettingsViewState extends State { child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(8), - color: Theme.of(context).brightness == Brightness.light - ? Colors.grey[100] - : Colors.grey[900], + color: Theme.of(context).colorScheme.surfaceContainer ), child: Padding( padding: const EdgeInsets.all(12.0), @@ -110,29 +108,29 @@ class _SettingsViewState extends State { Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - const Text("Connected to", - style: TextStyle(color: Colors.grey)), + Text("Connected to", + style: TextStyle(color: Theme.of(context).colorScheme.onTertiary)), Text(globals.serverManager.getServerUrl(), style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 16)), Row( children: [ - const Text("API Version: ", + Text("API Version: ", style: TextStyle( - color: Colors.grey, + color: Theme.of(context).colorScheme.onTertiary, fontWeight: FontWeight.w600)), Text(globals.serverManager.getApiVersion(), - style: const TextStyle( - color: Colors.grey)), - const SizedBox(width: 16), - const Text("Server Version: ", style: TextStyle( - color: Colors.grey, + color: Theme.of(context).colorScheme.onTertiary)), + const SizedBox(width: 16), + Text("Server Version: ", + style: TextStyle( + color: Theme.of(context).colorScheme.onTertiary, fontWeight: FontWeight.w600)), Text(_serverVersion, style: - const TextStyle(color: Colors.grey)) + TextStyle(color: Theme.of(context).colorScheme.onTertiary)) ], ), ], @@ -143,7 +141,7 @@ class _SettingsViewState extends State { ), ), const SizedBox(height: 8), - const Divider(), + Divider(color: Theme.of(context).dividerColor), const SizedBox(height: 8), GestureDetector( onTap: () { @@ -154,9 +152,7 @@ class _SettingsViewState extends State { child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(8), - color: Theme.of(context).brightness == Brightness.light - ? Colors.grey[100] - : Colors.grey[900], + color: Theme.of(context).colorScheme.surfaceContainer ), child: const Padding( padding: EdgeInsets.only( @@ -190,9 +186,7 @@ class _SettingsViewState extends State { child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(8), - color: Theme.of(context).brightness == Brightness.light - ? Colors.grey[100] - : Colors.grey[900], + color: Theme.of(context).colorScheme.surfaceContainer ), child: const Padding( padding: EdgeInsets.only( @@ -226,9 +220,7 @@ class _SettingsViewState extends State { child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(8), - color: Theme.of(context).brightness == Brightness.light - ? Colors.grey[100] - : Colors.grey[900], + color: Theme.of(context).colorScheme.surfaceContainer ), child: const Padding( padding: EdgeInsets.only( @@ -261,13 +253,11 @@ class _SettingsViewState extends State { decoration: BoxDecoration( borderRadius: BorderRadius.circular(8), color: - Theme.of(context).brightness == Brightness.light - ? Colors.grey[100] - : Colors.grey[900], + Theme.of(context).colorScheme.surfaceContainer ), child: Text( "${packageInfo.appName}, v${packageInfo.version} (${packageInfo.buildNumber})", - style: const TextStyle(color: Colors.grey), + style: TextStyle(color: Theme.of(context).colorScheme.onSecondary), ), ) ], diff --git a/lib/views/short_url_edit_view.dart b/lib/views/short_url_edit_view.dart index 19a3677..b3dd83c 100644 --- a/lib/views/short_url_edit_view.dart +++ b/lib/views/short_url_edit_view.dart @@ -131,8 +131,8 @@ class _ShortURLEditViewState extends State } final snackBar = SnackBar( - content: Text(text), - backgroundColor: Colors.red[400], + content: Text(text, style: TextStyle(color: Theme.of(context).colorScheme.onError)), + backgroundColor: Theme.of(context).colorScheme.error, behavior: SnackBarBehavior.floating); ScaffoldMessenger.of(context).showSnackBar(snackBar); return false; @@ -175,11 +175,8 @@ class _ShortURLEditViewState extends State controller: customSlugController, style: TextStyle( color: randomSlug - ? Colors.grey - : Theme.of(context).brightness == - Brightness.light - ? Colors.black - : Colors.white), + ? Theme.of(context).colorScheme.onTertiary + : Theme.of(context).colorScheme.onPrimary), onChanged: (_) { if (randomSlug) { setState(() { diff --git a/lib/views/url_detail_view.dart b/lib/views/url_detail_view.dart index 22b291f..7984af9 100644 --- a/lib/views/url_detail_view.dart +++ b/lib/views/url_detail_view.dart @@ -75,8 +75,8 @@ class _URLDetailViewState extends State { } final snackBar = SnackBar( - content: Text(text), - backgroundColor: Colors.red[400], + content: Text(text, style: TextStyle(color: Theme.of(context).colorScheme.onError)), + backgroundColor: Theme.of(context).colorScheme.error, behavior: SnackBarBehavior.floating); ScaffoldMessenger.of(context).showSnackBar(snackBar); return false; @@ -207,10 +207,7 @@ class _ListCellState extends State<_ListCell> { decoration: BoxDecoration( border: Border( top: BorderSide( - color: MediaQuery.of(context).platformBrightness == - Brightness.dark - ? Colors.grey[800]! - : Colors.grey[300]!)), + color: Theme.of(context).dividerColor)), ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, @@ -226,10 +223,7 @@ class _ListCellState extends State<_ListCell> { child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(8), - color: Theme.of(context).brightness == - Brightness.dark - ? Colors.grey[700] - : Colors.grey[300], + color: Theme.of(context).colorScheme.outline, ), ), ), diff --git a/lib/views/url_list_view.dart b/lib/views/url_list_view.dart index a20a964..f015b02 100644 --- a/lib/views/url_list_view.dart +++ b/lib/views/url_list_view.dart @@ -99,7 +99,7 @@ class _URLListViewState extends State { 'Create one by tapping the "+" button below', style: TextStyle( fontSize: 16, - color: Colors.grey[600]), + color: Theme.of(context).colorScheme.onSecondary), ), ) ], @@ -151,18 +151,11 @@ class _URLListViewState extends State { eyeStyle: QrEyeStyle( eyeShape: QrEyeShape.square, color: - MediaQuery.of(context).platformBrightness == - Brightness.dark - ? Colors.white - : Colors.black, + Theme.of(context).colorScheme.onPrimary, ), dataModuleStyle: QrDataModuleStyle( dataModuleShape: QrDataModuleShape.square, - color: - MediaQuery.of(context).platformBrightness == - Brightness.dark - ? Colors.white - : Colors.black, + color: Theme.of(context).colorScheme.onPrimary, ), ))), ), @@ -209,10 +202,7 @@ class _ShortURLCellState extends State { decoration: BoxDecoration( border: Border( bottom: BorderSide( - color: MediaQuery.of(context).platformBrightness == - Brightness.dark - ? Colors.grey[800]! - : Colors.grey[300]!)), + color: Theme.of(context).dividerColor)), ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, @@ -231,7 +221,7 @@ class _ShortURLCellState extends State { maxLines: 1, overflow: TextOverflow.ellipsis, textScaleFactor: 0.9, - style: TextStyle(color: Colors.grey[600]), + style: TextStyle(color: Theme.of(context).colorScheme.onTertiary), ), // List tags in a row UrlTagsListWidget(tags: widget.shortURL.tags)