proxibuy/lib/presentation/ui/theme/theme.dart

209 lines
6.9 KiB
Dart

import 'package:flutter/material.dart';
import 'package:proxibuy/presentation/ui/theme/custom_colors.dart';
import 'colors.dart';
final ThemeData appTheme = ThemeData(
primarySwatch: primarySwatch,
primaryColor: primarySwatch[500],
scaffoldBackgroundColor: lightBackground,
extensions: <ThemeExtension<dynamic>>[
CustomColors(
primarySwatch: primarySwatch,
secondrySwatch: secondarySwatch,
primaryLightSurface: primarySwatch[200]!,
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
),
],
// App Bar Theme
appBarTheme: const AppBarTheme(
surfaceTintColor: lightBackground,
backgroundColor: lightBackground,
toolbarTextStyle: TextStyle(color: fontDark),
centerTitle: true,
elevation: 2,
titleTextStyle: TextStyle(
color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
),
switchTheme: SwitchThemeData(
thumbColor: MaterialStateProperty.resolveWith<Color?>(
(Set<MaterialState> states) {
return Colors.white; // Thumb color when switch is off
},
),
trackColor: MaterialStateProperty.resolveWith<Color?>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.selected)) {
return primarySwatch; // Thumb color when switch is on
}
return Colors.grey[300]!; // Thumb color when switch is off
},
),
),
// Text Theme
textTheme: const TextTheme(
displayLarge:
TextStyle(fontSize: 57, fontWeight: FontWeight.bold, color: fontDark),
displayMedium:
TextStyle(fontSize: 45, fontWeight: FontWeight.bold, color: fontDark),
displaySmall:
TextStyle(fontSize: 36, fontWeight: FontWeight.bold, color: fontDark),
headlineLarge:
TextStyle(fontSize: 32, fontWeight: FontWeight.bold, color: fontDark),
headlineMedium:
TextStyle(fontSize: 28, fontWeight: FontWeight.bold, color: fontDark),
headlineSmall:
TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: fontDark),
titleLarge:
TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: fontDark),
titleMedium:
TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: fontDark),
titleSmall:
TextStyle(fontSize: 14, fontWeight: FontWeight.bold, color: fontDark),
bodyLarge: TextStyle(fontSize: 16, color: fontDark), // Default body text
bodyMedium: TextStyle(fontSize: 14, color: fontDark),
bodySmall: TextStyle(fontSize: 12, color: fontDark),
labelLarge:
TextStyle(fontSize: 14, fontWeight: FontWeight.bold, color: fontDark),
labelMedium:
TextStyle(fontSize: 12, fontWeight: FontWeight.bold, color: fontDark),
labelSmall:
TextStyle(fontSize: 11, fontWeight: FontWeight.bold, color: fontDark),
),
// Button Theme
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: primarySwatch[500],
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
),
),
// Color Scheme
colorScheme: ColorScheme.fromSwatch(
primarySwatch: primarySwatch,
).copyWith(
secondary: secondarySwatch[500],
surface: lightSurface,
error: semanticRed,
onPrimary: Colors.white,
onSecondary: Colors.white,
onSurface: fontDark,
),
);
final ThemeData darkTheme = ThemeData(
brightness: Brightness.dark,
primarySwatch: darkPrimarySwatch,
primaryColor: darkPrimarySwatch[500],
scaffoldBackgroundColor: darkBackground,
extensions: <ThemeExtension<dynamic>>[
CustomColors(
primarySwatch: darkPrimarySwatch,
secondrySwatch: darkSecondarySwatch,
primaryLightSurface: darkPrimarySwatch[600]!,
baseColor: Colors.grey[700]!,
highlightColor: Colors.grey[500]!,
),
],
// App Bar Theme
appBarTheme: const AppBarTheme(
backgroundColor: darkBackground,
surfaceTintColor: darkBackground,
centerTitle: true,
toolbarTextStyle: TextStyle(color: fontLight),
elevation: 2,
titleTextStyle: TextStyle(
color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
),
// Text Theme
textTheme: const TextTheme(
displayLarge:
TextStyle(fontSize: 57, fontWeight: FontWeight.bold, color: fontLight),
displayMedium:
TextStyle(fontSize: 45, fontWeight: FontWeight.bold, color: fontLight),
displaySmall:
TextStyle(fontSize: 36, fontWeight: FontWeight.bold, color: fontLight),
headlineLarge:
TextStyle(fontSize: 32, fontWeight: FontWeight.bold, color: fontLight),
headlineMedium:
TextStyle(fontSize: 28, fontWeight: FontWeight.bold, color: fontLight),
headlineSmall:
TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: fontLight),
titleLarge:
TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: fontLight),
titleMedium:
TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: fontLight),
titleSmall:
TextStyle(fontSize: 14, fontWeight: FontWeight.bold, color: fontLight),
bodyLarge: TextStyle(fontSize: 16, color: fontLight), // Default body text
bodyMedium: TextStyle(fontSize: 14, color: fontLight),
bodySmall: TextStyle(fontSize: 12, color: fontLight),
labelLarge:
TextStyle(fontSize: 14, fontWeight: FontWeight.bold, color: fontLight),
labelMedium:
TextStyle(fontSize: 12, fontWeight: FontWeight.bold, color: fontLight),
labelSmall:
TextStyle(fontSize: 11, fontWeight: FontWeight.bold, color: fontLight),
),
// Button Theme
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: darkPrimarySwatch[500],
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
),
),
// Color Scheme
colorScheme: ColorScheme.fromSwatch(
primarySwatch: darkPrimarySwatch,
brightness: Brightness.dark,
).copyWith(
secondary: darkSecondarySwatch[500],
surface: darkSurface,
error: semanticRed,
onPrimary: Colors.white,
onSecondary: Colors.white,
onSurface: fontLight,
),
);
CustomColors? themeColor(BuildContext context) {
return Theme.of(context).extension<CustomColors>();
}
OutlineInputBorder defaultBorder(BuildContext context) => OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide:
BorderSide(color: Theme.of(context).colorScheme.onSurface, width: 2));
OutlineInputBorder defaultFocusedBorder(
BuildContext context) =>
OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
color: themeColor(context)!.primarySwatch.shade400, width: 2));
InputDecoration defaultInputDecoration(BuildContext context) => InputDecoration(
floatingLabelStyle:
TextStyle(color: themeColor(context)!.primarySwatch.shade400),
enabledBorder: defaultBorder(context),
border: defaultBorder(context),
focusedBorder: defaultFocusedBorder(context));