app_theme.dart
3.25 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'app_colors_extension.dart';
/// Class managing the Application ThemeData for both Light and Dark themes.
/// Automatically hooks up our custom Figma colors system as a ThemeExtension.
class AppTheme {
AppTheme._();
static const systemUiOverlayStyle = SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.dark,
statusBarBrightness: Brightness.light,
systemNavigationBarColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.dark,
);
/// The standard light theme configuration.
static ThemeData get lightTheme {
final colors = AppColorsExtension.light();
return ThemeData(
useMaterial3: true,
brightness: Brightness.light,
primaryColor: colors.primary,
scaffoldBackgroundColor: colors.backgroundLight,
// Clean modern AppBar theme using Figma colors
appBarTheme: AppBarTheme(
backgroundColor: colors.backgroundLight,
elevation: 0,
centerTitle: true,
iconTheme: IconThemeData(color: colors.textPrimary),
actionsIconTheme: IconThemeData(color: colors.textPrimary),
titleTextStyle: TextStyle(
color: colors.textPrimary,
fontSize: 18,
fontWeight: FontWeight.w600,
),
systemOverlayStyle: systemUiOverlayStyle,
),
// Configure default ColorScheme using Figma specs
colorScheme: ColorScheme.light(
primary: colors.primary,
secondary: colors.primary,
surface: colors.backgroundLight,
onPrimary: Colors.white,
onSecondary: Colors.white,
onSurface: colors.textPrimary,
outline: colors.border,
),
// Register the custom theme extension
extensions: [
colors,
],
);
}
/// Initial dark theme configuration.
static ThemeData get darkTheme {
final colors = AppColorsExtension.dark();
return ThemeData(
useMaterial3: true,
brightness: Brightness.dark,
primaryColor: colors.primary,
scaffoldBackgroundColor: colors.backgroundLight,
appBarTheme: AppBarTheme(
backgroundColor: colors.backgroundLight,
elevation: 0,
centerTitle: true,
iconTheme: IconThemeData(color: colors.textPrimary),
actionsIconTheme: IconThemeData(color: colors.textPrimary),
titleTextStyle: TextStyle(
color: colors.textPrimary,
fontSize: 18,
fontWeight: FontWeight.w600,
),
systemOverlayStyle: systemUiOverlayStyle,
),
colorScheme: ColorScheme.dark(
primary: colors.primary,
secondary: colors.primary,
surface: colors.backgroundLight,
onPrimary: Colors.white,
onSecondary: Colors.white,
onSurface: colors.textPrimary,
outline: colors.border,
),
extensions: [
colors,
],
);
}
}
/// Helper extension to easily access custom Figma colors inside widgets
/// by using `context.colors.<semanticName>` instead of verbose lookups.
extension AppThemeContextExtension on BuildContext {
AppColorsExtension get colors =>
Theme.of(this).extension<AppColorsExtension>()!;
ThemeData get theme => Theme.of(this);
}