Skip to content

feat: enhancing contrast in light mode #244

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
richardthe3rd merged 4 commits into from
May 10, 2026
Merged

feat: enhancing contrast in light mode #244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
45eb88b
fix(ui): improve overflow menu contrast in light mode
Copilot May 10, 2026
713035b
fix: raise contrast for muted foreground UI elements
Copilot May 10, 2026
62478f5
test: make drag handle contrast tests robust
Copilot May 10, 2026
1688749
style: fix overflow menu test formatting
Copilot May 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion lib/screens/about_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -455,7 +455,7 @@ class _ThemeSelectorSheet extends StatelessWidget {
width: 32,
height: 4,
decoration: BoxDecoration(
color: theme.colorScheme.onSurfaceVariant.withValues(alpha: 0.4),
color: theme.colorScheme.onSurfaceVariant,
borderRadius: BorderRadius.circular(2),
),
),
Expand Down
6 changes: 3 additions & 3 deletions lib/screens/drinks_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -690,7 +690,7 @@ class _CategoryFilterSheet extends StatelessWidget {
width: 32,
height: 4,
decoration: BoxDecoration(
color: theme.colorScheme.onSurfaceVariant.withValues(alpha: 0.4),
color: theme.colorScheme.onSurfaceVariant,
borderRadius: BorderRadius.circular(2),
),
),
Expand Down Expand Up @@ -774,7 +774,7 @@ class _SortOptionsSheet extends StatelessWidget {
width: 32,
height: 4,
decoration: BoxDecoration(
color: theme.colorScheme.onSurfaceVariant.withValues(alpha: 0.4),
color: theme.colorScheme.onSurfaceVariant,
borderRadius: BorderRadius.circular(2),
),
),
Expand Down Expand Up @@ -873,7 +873,7 @@ class _StyleFilterSheet extends StatelessWidget {
width: 32,
height: 4,
decoration: BoxDecoration(
color: theme.colorScheme.onSurfaceVariant.withValues(alpha: 0.4),
color: theme.colorScheme.onSurfaceVariant,
borderRadius: BorderRadius.circular(2),
),
),
Expand Down
4 changes: 2 additions & 2 deletions lib/widgets/drink_list_section.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,13 +164,13 @@ class _DrinkCardWithSubtitle extends StatelessWidget {
Icon(
Icons.info_outline,
size: 14,
color: theme.colorScheme.onSurfaceVariant.withValues(alpha: 0.6),
color: theme.colorScheme.onSurface,
),
Comment on lines 164 to 168
const SizedBox(width: 4),
Text(
subtitle,
style: theme.textTheme.bodySmall?.copyWith(
color: theme.colorScheme.onSurfaceVariant.withValues(alpha: 0.6),
color: theme.colorScheme.onSurface,
fontStyle: FontStyle.italic,
),
),
Expand Down
9 changes: 6 additions & 3 deletions lib/widgets/festival_menu_sheets.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,11 @@ class FestivalSelectorSheet extends StatelessWidget {
children: [
Center(
child: Container(
key: const Key('festival_selector_drag_handle'),
width: 32,
height: 4,
decoration: BoxDecoration(
color: theme.colorScheme.onSurfaceVariant.withValues(alpha: 0.4),
color: theme.colorScheme.onSurfaceVariant,
borderRadius: BorderRadius.circular(2),
),
),
Expand Down Expand Up @@ -482,10 +483,11 @@ class SettingsSheet extends StatelessWidget {
children: [
Center(
child: Container(
key: const Key('settings_sheet_drag_handle'),
width: 32,
height: 4,
decoration: BoxDecoration(
color: theme.colorScheme.onSurfaceVariant.withValues(alpha: 0.4),
color: theme.colorScheme.onSurfaceVariant,
borderRadius: BorderRadius.circular(2),
),
),
Expand Down Expand Up @@ -542,10 +544,11 @@ class ThemeSelectorSheet extends StatelessWidget {
children: [
Center(
child: Container(
key: const Key('theme_selector_sheet_drag_handle'),
width: 32,
height: 4,
decoration: BoxDecoration(
color: theme.colorScheme.onSurfaceVariant.withValues(alpha: 0.4),
color: theme.colorScheme.onSurfaceVariant,
borderRadius: BorderRadius.circular(2),
),
),
Expand Down
50 changes: 40 additions & 10 deletions lib/widgets/overflow_menu.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import 'festival_menu_sheets.dart';
/// - Settings
/// - About page
Widget buildOverflowMenu(BuildContext context) {
final theme = Theme.of(context);
final menuContentColor = theme.colorScheme.onSurface;

return Semantics(
label: 'Menu',
hint: 'Double tap to open menu',
Expand All @@ -17,34 +20,61 @@ Widget buildOverflowMenu(BuildContext context) {
icon: const Icon(Icons.more_vert),
tooltip: 'Menu',
onSelected: (value) => _handleMenuSelection(context, value),
itemBuilder: (context) => const [
itemBuilder: (context) => [
PopupMenuItem(
value: 'festivals',
child: Row(
children: [
ExcludeSemantics(child: Icon(Icons.festival)),
SizedBox(width: 12),
Expanded(child: Text('Browse Festivals')),
ExcludeSemantics(
child: Icon(Icons.festival, color: menuContentColor),
),
const SizedBox(width: 12),
Expanded(
child: Text(
'Browse Festivals',
style: theme.textTheme.bodyLarge?.copyWith(
color: menuContentColor,
),
),
),
],
),
),
PopupMenuItem(
value: 'settings',
child: Row(
children: [
ExcludeSemantics(child: Icon(Icons.settings)),
SizedBox(width: 12),
Expanded(child: Text('Settings')),
ExcludeSemantics(
child: Icon(Icons.settings, color: menuContentColor),
),
const SizedBox(width: 12),
Expanded(
child: Text(
'Settings',
style: theme.textTheme.bodyLarge?.copyWith(
color: menuContentColor,
),
),
),
],
),
),
PopupMenuItem(
value: 'about',
child: Row(
children: [
ExcludeSemantics(child: Icon(Icons.info_outline)),
SizedBox(width: 12),
Expanded(child: Text('About')),
ExcludeSemantics(
child: Icon(Icons.info_outline, color: menuContentColor),
),
const SizedBox(width: 12),
Expanded(
child: Text(
'About',
style: theme.textTheme.bodyLarge?.copyWith(
color: menuContentColor,
),
),
),
],
),
),
Expand Down
2 changes: 1 addition & 1 deletion lib/widgets/star_rating.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ class StarRating extends StatelessWidget {
Widget build(BuildContext context) {
final theme = Theme.of(context);
final active = activeColor ?? Colors.amber;
final inactive = inactiveColor ?? theme.colorScheme.onSurfaceVariant.withValues(alpha: 0.3);
final inactive = inactiveColor ?? theme.colorScheme.onSurfaceVariant;

final ratingValue = rating ?? 0;
final semanticLabel = isEditable ? 'Rate this drink' : 'Rating';
Expand Down
46 changes: 43 additions & 3 deletions test/widgets/festival_menu_sheets_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import 'package:cambridge_beer_festival/domain/repositories/repositories.dart';
import 'package:cambridge_beer_festival/models/models.dart';
import 'package:cambridge_beer_festival/providers/beer_provider.dart';
import 'package:cambridge_beer_festival/services/services.dart';
import 'package:cambridge_beer_festival/app_theme.dart';
import 'package:cambridge_beer_festival/widgets/widgets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
Expand Down Expand Up @@ -65,8 +66,9 @@ void main() {
await provider.initialize();
});

Widget buildTestWidget() {
Widget buildTestWidget({ThemeData? theme}) {
return MaterialApp(
theme: theme,
home: Scaffold(
body: ChangeNotifierProvider<BeerProvider>.value(
value: provider,
Expand Down Expand Up @@ -124,6 +126,18 @@ void main() {
expect(semantics.properties.label, contains('Test Beer Festival 2024'));
expect(semantics.properties.button, isTrue);
});

testWidgets('uses high-contrast drag handle color in light theme', (tester) async {
final lightTheme = buildAppTheme(Brightness.light);
await tester.pumpWidget(buildTestWidget(theme: lightTheme));

final handleContainer = tester.widget<Container>(
find.byKey(const Key('festival_selector_drag_handle')),
);
final decoration = handleContainer.decoration! as BoxDecoration;

Comment on lines +134 to +138
expect(decoration.color, lightTheme.colorScheme.onSurfaceVariant);
});
});

group('FestivalCard', () {
Expand Down Expand Up @@ -250,8 +264,9 @@ void main() {
await provider.initialize();
});

Widget buildTestWidget() {
Widget buildTestWidget({ThemeData? theme}) {
return MaterialApp(
theme: theme,
home: Scaffold(
body: ChangeNotifierProvider<BeerProvider>.value(
value: provider,
Expand All @@ -274,6 +289,18 @@ void main() {
expect(find.text('System mode'), findsOneWidget);
expect(find.byIcon(Icons.brightness_auto), findsOneWidget);
});

testWidgets('uses high-contrast drag handle color in light theme', (tester) async {
final lightTheme = buildAppTheme(Brightness.light);
await tester.pumpWidget(buildTestWidget(theme: lightTheme));

final handleContainer = tester.widget<Container>(
find.byKey(const Key('settings_sheet_drag_handle')),
);
final decoration = handleContainer.decoration! as BoxDecoration;

expect(decoration.color, lightTheme.colorScheme.onSurfaceVariant);
});
});

Comment on lines +301 to 305
group('ThemeSelectorSheet', () {
Expand Down Expand Up @@ -309,8 +336,9 @@ void main() {
await provider.initialize();
});

Widget buildTestWidget() {
Widget buildTestWidget({ThemeData? theme}) {
return MaterialApp(
theme: theme,
home: Scaffold(
body: ChangeNotifierProvider<BeerProvider>.value(
value: provider,
Expand Down Expand Up @@ -353,5 +381,17 @@ void main() {

expect(provider.themeMode, ThemeMode.dark);
});

testWidgets('uses high-contrast drag handle color in light theme', (tester) async {
final lightTheme = buildAppTheme(Brightness.light);
await tester.pumpWidget(buildTestWidget(theme: lightTheme));

final handleContainer = tester.widget<Container>(
find.byKey(const Key('theme_selector_sheet_drag_handle')),
);
final decoration = handleContainer.decoration! as BoxDecoration;

expect(decoration.color, lightTheme.colorScheme.onSurfaceVariant);
});
});
}
27 changes: 27 additions & 0 deletions test/widgets/overflow_menu_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:cambridge_beer_festival/widgets/widgets.dart';
import 'package:cambridge_beer_festival/app_theme.dart';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

Expand Down Expand Up @@ -115,6 +116,32 @@ void main() {
);
});

testWidgets('uses high-contrast menu item colors in light theme', (tester) async {
await tester.pumpWidget(
MaterialApp(
theme: buildAppTheme(Brightness.light),
home: Builder(
builder: (context) => Scaffold(
body: Center(
child: buildOverflowMenu(context),
),
),
),
),
);

await tester.tap(find.byIcon(Icons.more_vert));
await tester.pumpAndSettle();

final expectedColor = buildAppTheme(Brightness.light).colorScheme.onSurface;

final festivalIcon = tester.widget<Icon>(find.byIcon(Icons.festival));
expect(festivalIcon.color, expectedColor);

final festivalText = tester.widget<Text>(find.text('Browse Festivals'));
expect(festivalText.style?.color, expectedColor);
});


testWidgets('has proper tooltip', (tester) async {
await tester.pumpWidget(buildMenuWidget());
Expand Down
17 changes: 17 additions & 0 deletions test/widgets_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:cambridge_beer_festival/app_theme.dart';
import 'package:cambridge_beer_festival/widgets/widgets.dart';

void main() {
Expand Down Expand Up @@ -195,6 +196,22 @@ void main() {
expect(iconWidget.color, Colors.blue);
});

testWidgets('uses high-contrast default inactive color in light theme', (WidgetTester tester) async {
final lightTheme = buildAppTheme(Brightness.light);
await tester.pumpWidget(
MaterialApp(
theme: lightTheme,
home: const Scaffold(
body: StarRating(rating: 1),
),
),
);

final emptyStar = find.byIcon(Icons.star_border);
final iconWidget = tester.widget<Icon>(emptyStar.first);
expect(iconWidget.color, lightTheme.colorScheme.onSurfaceVariant);
});

testWidgets('tapping same star clears rating', (WidgetTester tester) async {
int? selectedRating;

Expand Down
Loading