Skip to content

Commit 0088486

Browse files
author
Lukas Gundermann
committed
style: Adjust button themes for improved contrast and consistency
This commit refactors the button theme overrides to enhance visual styling, particularly for dark mode. Changes focus on adjusting background colors, border colors, and text/icon colors to improve contrast and create a more consistent look across different button states. ### Key Changes: * **Primary Outlined Button (Dark Mode):** * The default state now has a transparent background (`Colors.gray.withAlpha(0)`) for a ghost-like appearance. * The default border color is now `Colors.gray[200]`. * The hovered background color has been darkened from `gray[300]` to `gray[600]`. * Text and icon colors have been changed from `Colors.black` to `Colors.gray[200]` to ensure readability on the new darker backgrounds. * **Destructive (Red) Button:** * The border color for default and hovered states is now unified to `Colors.red[600]`. * The text and icon colors have been adjusted from `Colors.white` to `Colors.gray[100]` for a slightly softer appearance.
1 parent 31bd0d3 commit 0088486

1 file changed

Lines changed: 24 additions & 12 deletions

File tree

lib/screens/widgets/overrides/button_themes.dart

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,25 +23,31 @@ class ButtonThemes extends StatelessWidget {
2323
);
2424
} else if (states.contains(WidgetState.hovered)) {
2525
return defaultDecoration.copyWithIfBoxDecoration(
26-
color: isDark ? Colors.gray[300] : Colors.gray[200],
26+
color: isDark ? Colors.gray[600] : Colors.gray[200],
2727
border: Border.all(
2828
color: isDark ? Colors.blue[300] : Colors.blue[600],
2929
),
3030
);
3131
} else {
3232
return defaultDecoration.copyWithIfBoxDecoration(
33-
color: isDark ? Colors.gray[400] : Colors.gray[100],
33+
color: isDark
34+
? Colors.gray.withAlpha(0)
35+
: Colors.white.withAlpha(0),
3436
border: Border.all(
35-
color: isDark ? Colors.blue[100] : Colors.blue[900],
37+
color: isDark ? Colors.gray[200] : Colors.blue[900],
3638
),
3739
);
3840
}
3941
},
4042
textStyle: (context, states, defaultTextStyle) {
41-
return defaultTextStyle.copyWith(color: isDark ? Colors.black : Colors.blue[900]);
43+
return defaultTextStyle.copyWith(
44+
color: isDark ? Colors.gray[200] : Colors.blue[900],
45+
);
4246
},
4347
iconTheme: (context, states, defaultIconTheme) {
44-
return defaultIconTheme.copyWith(color: isDark ? Colors.black : Colors.blue[900]);
48+
return defaultIconTheme.copyWith(
49+
color: isDark ? Colors.gray[200] : Colors.blue[900],
50+
);
4551
},
4652
),
4753
child: ComponentTheme(
@@ -56,14 +62,20 @@ class ButtonThemes extends StatelessWidget {
5662
color: isDark ? Colors.gray[300] : Colors.gray[200],
5763
);
5864
} else {
59-
return defaultDecoration.copyWithIfBoxDecoration(color: isDark ? Colors.gray[400] : Colors.gray[100]);
65+
return defaultDecoration.copyWithIfBoxDecoration(
66+
color: isDark ? Colors.gray[400] : Colors.gray[100],
67+
);
6068
}
6169
},
6270
textStyle: (context, states, defaultTextStyle) {
63-
return defaultTextStyle.copyWith(color: isDark ? Colors.black : Colors.blue[900]);
71+
return defaultTextStyle.copyWith(
72+
color: isDark ? Colors.black : Colors.blue[900],
73+
);
6474
},
6575
iconTheme: (context, states, defaultIconTheme) {
66-
return defaultIconTheme.copyWith(color: isDark ? Colors.black : Colors.blue[900]);
76+
return defaultIconTheme.copyWith(
77+
color: isDark ? Colors.black : Colors.blue[900],
78+
);
6779
},
6880
),
6981
child: ComponentTheme(
@@ -109,20 +121,20 @@ class ButtonThemes extends StatelessWidget {
109121
} else if (states.contains(WidgetState.hovered)) {
110122
return defaultDecoration.copyWithIfBoxDecoration(
111123
color: Colors.red[700],
112-
border: Border.all(color: Colors.red[700]),
124+
border: Border.all(color: Colors.red[600]),
113125
);
114126
} else {
115127
return defaultDecoration.copyWithIfBoxDecoration(
116128
color: Colors.red[500],
117-
border: Border.all(color: Colors.red[700]),
129+
border: Border.all(color: Colors.red[600]),
118130
);
119131
}
120132
},
121133
textStyle: (context, states, defaultTextStyle) {
122-
return defaultTextStyle.copyWith(color: Colors.white);
134+
return defaultTextStyle.copyWith(color: Colors.gray[100]);
123135
},
124136
iconTheme: (context, states, defaultIconTheme) {
125-
return defaultIconTheme.copyWith(color: Colors.white);
137+
return defaultIconTheme.copyWith(color: Colors.gray[100]);
126138
},
127139
),
128140
child: ComponentTheme(

0 commit comments

Comments
 (0)