theme.dart 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. import 'package:flutter/material.dart';
  2. import 'package:google_fonts/google_fonts.dart';
  3. class AppTheme {
  4. static ThemeData get light {
  5. return _buildTheme(_lightColorScheme, Brightness.light);
  6. }
  7. static ThemeData get dark {
  8. return _buildTheme(_darkColorScheme, Brightness.dark);
  9. }
  10. static const ColorScheme _lightColorScheme = ColorScheme(
  11. brightness: Brightness.light,
  12. primary: Color(0xFF000000),
  13. onPrimary: Color(0xFFFFFFFF),
  14. primaryContainer: Color(0xFF131B2E),
  15. onPrimaryContainer: Color(0xFF7C839B),
  16. secondary: Color(0xFF0058BE),
  17. onSecondary: Color(0xFFFFFFFF),
  18. secondaryContainer: Color(0xFF2170E4),
  19. onSecondaryContainer: Color(0xFFFEFCFF),
  20. tertiary: Color(0xFF000000),
  21. onTertiary: Color(0xFFFFFFFF),
  22. tertiaryContainer: Color(0xFF191C1E),
  23. onTertiaryContainer: Color(0xFF818486),
  24. error: Color(0xFFBA1A1A),
  25. onError: Color(0xFFFFFFFF),
  26. errorContainer: Color(0xFFFFDAD6),
  27. onErrorContainer: Color(0xFF93000A),
  28. background: Color(0xFFF8F9FF),
  29. onBackground: Color(0xFF0B1C30),
  30. surface: Color(0xFFF8F9FF),
  31. onSurface: Color(0xFF0B1C30),
  32. surfaceVariant: Color(0xFFD3E4FE),
  33. onSurfaceVariant: Color(0xFF45464D),
  34. outline: Color(0xFF76777D),
  35. outlineVariant: Color(0xFFC6C6CD),
  36. inverseSurface: Color(0xFF213145),
  37. //inverseOnSurface: Color(0xFFEAF1FF),
  38. inversePrimary: Color(0xFFBEC6E0),
  39. surfaceTint: Color(0xFF565E74),
  40. );
  41. static const ColorScheme _darkColorScheme = ColorScheme(
  42. brightness: Brightness.dark,
  43. primary: Color(0xFFBEC6E0),
  44. onPrimary: Color(0xFF131B2E),
  45. primaryContainer: Color(0xFF3F465C),
  46. onPrimaryContainer: Color(0xFFDAE2FD),
  47. secondary: Color(0xFFADC6FF),
  48. onSecondary: Color(0xFF001A42),
  49. secondaryContainer: Color(0xFF004395),
  50. onSecondaryContainer: Color(0xFFD8E2FF),
  51. tertiary: Color(0xFFC4C7C9),
  52. onTertiary: Color(0xFF191C1E),
  53. tertiaryContainer: Color(0xFF444749),
  54. onTertiaryContainer: Color(0xFFE0E3E5),
  55. error: Color(0xFFFFB4AB),
  56. onError: Color(0xFF690005),
  57. errorContainer: Color(0xFF93000A),
  58. onErrorContainer: Color(0xFFFFDAD6),
  59. background: Color(0xFF111318),
  60. onBackground: Color(0xFFEAF1FF),
  61. surface: Color(0xFF111318),
  62. onSurface: Color(0xFFEAF1FF),
  63. surfaceVariant: Color(0xFF2D3138),
  64. onSurfaceVariant: Color(0xFFC6C6CD),
  65. outline: Color(0xFF8E9099),
  66. outlineVariant: Color(0xFF45464D),
  67. inverseSurface: Color(0xFFEAF1FF),
  68. //inverseOnSurface: Color(0xFF213145),
  69. inversePrimary: Color(0xFF000000),
  70. surfaceTint: Color(0xFF565E74),
  71. );
  72. static ThemeData _buildTheme(ColorScheme colorScheme, Brightness brightness) {
  73. final textTheme = GoogleFonts.interTextTheme(
  74. brightness == Brightness.dark
  75. ? ThemeData.dark().textTheme
  76. : ThemeData.light().textTheme,
  77. );
  78. return ThemeData(
  79. useMaterial3: true,
  80. colorScheme: colorScheme,
  81. textTheme: textTheme.copyWith(
  82. displayLarge: textTheme.displayLarge?.copyWith(
  83. fontSize: 48,
  84. height: 56 / 48,
  85. letterSpacing: -0.02,
  86. fontWeight: FontWeight.w700,
  87. ),
  88. headlineLarge: textTheme.headlineLarge?.copyWith(
  89. fontSize: 32,
  90. height: 40 / 32,
  91. letterSpacing: -0.02,
  92. fontWeight: FontWeight.w700,
  93. ),
  94. headlineMedium: textTheme.headlineMedium?.copyWith(
  95. fontSize: 24,
  96. height: 32 / 24,
  97. fontWeight: FontWeight.w600,
  98. ),
  99. titleLarge: textTheme.titleLarge?.copyWith(
  100. fontSize: 20,
  101. height: 28 / 20,
  102. fontWeight: FontWeight.w600,
  103. ),
  104. bodyLarge: textTheme.bodyLarge?.copyWith(
  105. fontSize: 16,
  106. height: 24 / 16,
  107. fontWeight: FontWeight.w400,
  108. ),
  109. bodyMedium: textTheme.bodyMedium?.copyWith(
  110. fontSize: 14,
  111. height: 20 / 14,
  112. fontWeight: FontWeight.w400,
  113. ),
  114. labelMedium: textTheme.labelMedium?.copyWith(
  115. fontSize: 12,
  116. height: 16 / 12,
  117. fontWeight: FontWeight.w600,
  118. ),
  119. ),
  120. appBarTheme: AppBarTheme(
  121. centerTitle: false,
  122. elevation: 0,
  123. scrolledUnderElevation: 1,
  124. backgroundColor: colorScheme.surface,
  125. foregroundColor: colorScheme.onSurface,
  126. ),
  127. cardTheme: CardThemeData(
  128. elevation: 0,
  129. shape: RoundedRectangleBorder(
  130. borderRadius: BorderRadius.circular(12),
  131. side: BorderSide(color: colorScheme.outlineVariant, width: 0.5),
  132. ),
  133. ),
  134. inputDecorationTheme: InputDecorationTheme(
  135. filled: true,
  136. fillColor: colorScheme.surface,
  137. border: OutlineInputBorder(
  138. borderRadius: BorderRadius.circular(8),
  139. borderSide: BorderSide(color: colorScheme.outlineVariant),
  140. ),
  141. enabledBorder: OutlineInputBorder(
  142. borderRadius: BorderRadius.circular(8),
  143. borderSide: BorderSide(color: colorScheme.outlineVariant),
  144. ),
  145. focusedBorder: OutlineInputBorder(
  146. borderRadius: BorderRadius.circular(8),
  147. borderSide: BorderSide(color: colorScheme.secondary, width: 1),
  148. ),
  149. errorBorder: OutlineInputBorder(
  150. borderRadius: BorderRadius.circular(8),
  151. borderSide: BorderSide(color: colorScheme.error),
  152. ),
  153. contentPadding: const EdgeInsets.symmetric(
  154. horizontal: 16,
  155. vertical: 14,
  156. ),
  157. prefixIconColor: colorScheme.onSurfaceVariant,
  158. labelStyle: TextStyle(color: colorScheme.onSurfaceVariant),
  159. ),
  160. filledButtonTheme: FilledButtonThemeData(
  161. style: FilledButton.styleFrom(
  162. backgroundColor: colorScheme.primary,
  163. foregroundColor: colorScheme.onPrimary,
  164. shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
  165. padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 14),
  166. textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
  167. ),
  168. ),
  169. outlinedButtonTheme: OutlinedButtonThemeData(
  170. style: OutlinedButton.styleFrom(
  171. foregroundColor: colorScheme.secondary,
  172. side: BorderSide(color: colorScheme.secondary.withValues(alpha: 0.2)),
  173. shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
  174. padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
  175. ),
  176. ),
  177. floatingActionButtonTheme: FloatingActionButtonThemeData(
  178. elevation: 2,
  179. shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
  180. ),
  181. navigationBarTheme: NavigationBarThemeData(
  182. elevation: 1,
  183. indicatorShape: RoundedRectangleBorder(
  184. borderRadius: BorderRadius.circular(12),
  185. ),
  186. ),
  187. navigationRailTheme: NavigationRailThemeData(
  188. elevation: 1,
  189. indicatorShape: RoundedRectangleBorder(
  190. borderRadius: BorderRadius.circular(12),
  191. ),
  192. ),
  193. dividerTheme: DividerThemeData(
  194. color: colorScheme.outlineVariant,
  195. thickness: 1,
  196. ),
  197. checkboxTheme: CheckboxThemeData(
  198. fillColor: WidgetStateProperty.resolveWith((states) {
  199. if (states.contains(WidgetState.selected)) {
  200. return colorScheme.secondary;
  201. }
  202. return Colors.transparent;
  203. }),
  204. checkColor: WidgetStateProperty.all(Colors.white),
  205. shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
  206. side: BorderSide(color: colorScheme.outlineVariant),
  207. ),
  208. );
  209. }
  210. }