Skip to content

Commit 1940f61

Browse files
amaury901130amaury901130
committed
improve theme colors
1 parent 073c78c commit 1940f61

File tree

2 files changed

+168
-176
lines changed

2 files changed

+168
-176
lines changed

‎app/lib/presentation/themes/resources/dark_theme_colors.dart‎

Lines changed: 88 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -5,132 +5,128 @@ import 'package:app/presentation/themes/resources/app_theme_data.dart';
55
class DarkThemeColors implements ThemeColors {
66
/// 10: onPrimaryContainer
77
/// 40: primary
8+
/// 80: inversePrimary
89
/// 90: primaryContainer
910
/// 100: onPrimary
1011
@override
11-
// TODO: implement primary
12-
MaterialColor get primary => const MaterialColor(0xFFFFFFDE, {
13-
0: Color(0xFFFFFFDE),
14-
10: Color(0xFFFFFFDE),
15-
20: Color(0xFFFFFFDE),
16-
30: Color(0xFFFFFFDE),
17-
40: Color(0xFFFFFFDE),
18-
50: Color(0xFFFFFFDE),
19-
60: Color(0xFFFFFFDE),
20-
70: Color(0xFFFFFFDE),
21-
80: Color(0xFFFFFFDE),
22-
90: Color(0xFF6750A4),
23-
95: Color(0xFFFFFFDE),
24-
99: Color(0xFF6750A4),
25-
100: Color(0xFF6750A4),
12+
MaterialColor get primary => const MaterialColor(0xFFD0BCFF, {
13+
0: Color(0xFF000000),
14+
10: Color(0xFF21005D), // onPrimaryContainer
15+
20: Color(0xFF381E72),
16+
30: Color(0xFF4F378B),
17+
40: Color(0xFF6750A4), // inversePrimary (light mode primary)
18+
50: Color(0xFF7F67BE),
19+
60: Color(0xFF9A82DB),
20+
70: Color(0xFFB69DF8),
21+
80: Color(0xFFD0BCFF), // primary - Main brand color in dark
22+
90: Color(0xFFEADDFF), // primaryContainer
23+
95: Color(0xFFF6EDFF),
24+
99: Color(0xFFFFFBFE),
25+
100: Color(0xFFFFFFFF), // onPrimary
2626
});
2727

2828
/// 10: onSecondaryContainer
2929
/// 40: secondary
3030
/// 90: secondaryContainer
3131
/// 100: onSecondary
3232
@override
33-
// TODO: implement secondary
34-
MaterialColor get secondary => const MaterialColor(0xFFFFFFFD, {
35-
0: Color(0xFFFFFFDE),
36-
10: Color(0xFF1D192B),
37-
20: Color(0xFFFFFFDE),
38-
30: Color(0xFFFFFFDE),
39-
40: Color(0xFFFFFFFD),
40-
50: Color(0xFFFFFFDE),
41-
60: Color(0xFFFFFFDE),
42-
70: Color(0xFFFFFFDE),
43-
80: Color(0xFFFFFFDE),
44-
90: Color(0xFF1D192B),
45-
95: Color(0xFFFFFFDE),
46-
99: Color(0xFF1D192B),
47-
100: Color(0xFF1D192B),
33+
MaterialColor get secondary => const MaterialColor(0xFFCCC2DC, {
34+
0: Color(0xFF000000),
35+
10: Color(0xFF1D192B), // onSecondaryContainer
36+
20: Color(0xFF332D41),
37+
30: Color(0xFF4A4458),
38+
40: Color(0xFF625B71),
39+
50: Color(0xFF7A7289),
40+
60: Color(0xFF958DA5),
41+
70: Color(0xFFB0A7C0),
42+
80: Color(0xFFCCC2DC), // secondary
43+
90: Color(0xFFE8DEF8), // secondaryContainer
44+
95: Color(0xFFF6EDFF),
45+
99: Color(0xFFFFFBFE),
46+
100: Color(0xFFFFFFFF), // onSecondary
4847
});
4948

5049
/// 10: onTertiaryContainer
5150
/// 40: tertiary
5251
/// 90: tertiaryContainer
5352
/// 100: onTertiary
5453
@override
55-
// TODO: implement tertiary
56-
MaterialColor get tertiary => const MaterialColor(0xFFFFFFDE, {
57-
0: Color(0xFFFFFFDE),
58-
10: Color(0xFFFFFFDE),
59-
20: Color(0xFFFFFFDE),
60-
30: Color(0xFFFFFFDE),
61-
40: Color(0xFFFFFFDE),
62-
50: Color(0xFFFFFFDE),
63-
60: Color(0xFFFFFFDE),
64-
70: Color(0xFFFFFFDE),
65-
80: Color(0xFFFFFFDE),
66-
90: Color(0xFFF0524D),
67-
95: Color(0xFFFFFFDE),
68-
99: Color(0xFFFFFFDE),
69-
100: Color(0xFFF0524D),
54+
MaterialColor get tertiary => const MaterialColor(0xFFEFB8C8, {
55+
0: Color(0xFF000000),
56+
10: Color(0xFF31111D), // onTertiaryContainer
57+
20: Color(0xFF492532),
58+
30: Color(0xFF633B48),
59+
40: Color(0xFF7D5260),
60+
50: Color(0xFF986977),
61+
60: Color(0xFFB58392),
62+
70: Color(0xFFD29DAC),
63+
80: Color(0xFFEFB8C8), // tertiary
64+
90: Color(0xFFFFD8E4), // tertiaryContainer
65+
95: Color(0xFFFFECF1),
66+
99: Color(0xFFFFFBFA),
67+
100: Color(0xFFFFFFFF), // onTertiary
7068
});
7169

7270
/// 10: onErrorContainer
7371
/// 40: error
7472
/// 90: errorContainer
7573
/// 100: onError
7674
@override
77-
// TODO: implement error
78-
MaterialColor get error => const MaterialColor(0xFFB3261E, {
79-
0: Color(0xFFFFFFDE),
80-
10: Color(0xFF410E0B),
81-
20: Color(0xFFF0524D),
82-
30: Color(0xFFF0524D),
75+
MaterialColor get error => const MaterialColor(0xFFF2B8B5, {
76+
0: Color(0xFF000000),
77+
10: Color(0xFF410E0B), // onErrorContainer
78+
20: Color(0xFF601410),
79+
30: Color(0xFF8C1D18),
8380
40: Color(0xFFB3261E),
84-
50: Color(0xFFF0524D),
85-
60: Color(0xFFF0524D),
86-
70: Color(0xFFF0524D),
87-
80: Color(0xFFF0524D),
88-
90: Color(0xFFF9DEDC),
89-
95: Color(0xFFF0524D),
90-
99: Color(0xFFFFD8E4),
91-
100: Color(0xFFFFFFFF),
81+
50: Color(0xFFDC362E),
82+
60: Color(0xFFE46962),
83+
70: Color(0xFFEC928E),
84+
80: Color(0xFFF2B8B5), // error
85+
90: Color(0xFFF9DEDC), // errorContainer
86+
95: Color(0xFFFCEEEE),
87+
99: Color(0xFFFFFBF9),
88+
100: Color(0xFFFFFFFF), // onError
9289
});
9390

94-
/// 0: shadow
95-
/// 10: onBackground / onSurface
96-
/// 99: background / surface
91+
/// 0: shadow / scrim
92+
/// 10: onSurface
93+
/// 20: inverseSurface
94+
/// 99: surface
9795
@override
98-
// TODO: implement neutral
99-
MaterialColor get neutral => const MaterialColor(0xFF410E0B, {
100-
0: Color(0xFF410E0B),
101-
10: Color(0xFF410E0B),
102-
20: Color(0xFF410E0B),
103-
30: Color(0xFF410E0B),
104-
40: Color(0xFF410E0B),
105-
50: Color(0xFF410E0B),
106-
60: Color(0xFF410E0B),
107-
70: Color(0xFF410E0B),
108-
80: Color(0xFF410E0B),
109-
90: Color(0xFF410E0B),
110-
95: Color(0xFF410E0B),
111-
99: Color(0xFF410E0B),
112-
100: Color(0xFF410E0B),
96+
MaterialColor get neutral => const MaterialColor(0xFF1C1B1F, {
97+
0: Color(0xFF000000), // shadow / scrim
98+
10: Color(0xFFE6E1E5), // onSurface - Main text color in dark (light color)
99+
20: Color(0xFFF4EFF4), // inverseSurface (light color)
100+
30: Color(0xFFAEAAAE),
101+
40: Color(0xFF939094),
102+
50: Color(0xFF787579),
103+
60: Color(0xFF605D62),
104+
70: Color(0xFF484649),
105+
80: Color(0xFF313033),
106+
90: Color(0xFF1C1B1F),
107+
95: Color(0xFF141316),
108+
99: Color(0xFF141316), // surface - Main background in dark (dark color)
109+
100: Color(0xFF000000),
113110
});
114111

115112
/// 30: onSurfaceVariant
116113
/// 50: outline
117114
/// 80: outlineVariant
118-
/// 90: surfaceVariant
115+
/// 90: surfaceContainerHighest
119116
@override
120-
// TODO: implement neutralVariant
121-
MaterialColor get neutralVariant => const MaterialColor(0xFFFDDDDE, {
117+
MaterialColor get neutralVariant => const MaterialColor(0xFF49454F, {
122118
0: Color(0xFF000000),
123-
10: Color(0xFF49454F),
124-
20: Color(0xFFF0524D),
125-
30: Color(0xFFF0524D),
126-
40: Color(0xFFFDDDDE),
127-
50: Color(0xFFF0524D),
128-
60: Color(0xFFF0524D),
129-
70: Color(0xFFF0524D),
130-
80: Color(0xFFF0524D),
131-
90: Color(0xFFF0524D),
132-
95: Color(0xFFFDDDDE),
133-
99: Color(0xFFF0524D),
134-
100: Color(0xFFF0524D),
119+
10: Color(0xFFF5EEFA),
120+
20: Color(0xFFE7E0EC),
121+
30: Color(0xFFC9C5D0), // onSurfaceVariant - Secondary text (lighter in dark)
122+
40: Color(0xFFAEA9B4),
123+
50: Color(0xFF938F99), // outline - Borders, dividers
124+
60: Color(0xFF79747E),
125+
70: Color(0xFF605D66),
126+
80: Color(0xFF49454F), // outlineVariant - Subtle borders
127+
90: Color(0xFF322F37), // surfaceContainerHighest
128+
95: Color(0xFF1D1A22),
129+
99: Color(0xFF000000),
130+
100: Color(0xFF000000),
135131
});
136132
}

0 commit comments

Comments
 (0)