Skip to content

Commit

Permalink
Add support for high contrast theme (#682)
Browse files Browse the repository at this point in the history
* bump yaru version

* YaruTitleBar: add high contrast border

* YaruWindowControl: add high contrast border

* YaruMasterTile: add high contrast border

* example: enable high contrast themes

* fix border alignment

* use named constants for `strokeAlign`
  • Loading branch information
d-loose authored Mar 24, 2023
1 parent 3572852 commit fc99c7b
Show file tree
Hide file tree
Showing 6 changed files with 27 additions and 7 deletions.
2 changes: 2 additions & 0 deletions example/lib/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ class Home extends StatelessWidget {
debugShowCheckedModeBanner: false,
theme: yaru.theme,
darkTheme: yaru.darkTheme,
highContrastTheme: yaruHighContrastLight,
highContrastDarkTheme: yaruHighContrastDark,
home: Example.create(context),
);
},
Expand Down
2 changes: 1 addition & 1 deletion example/pubspec.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ dependencies:
provider: ^6.0.2
safe_change_notifier: ^0.2.0
ubuntu_service: ^0.2.0
yaru: ^0.6.0
yaru: ^0.6.1
yaru_icons: ^1.0.0
yaru_widgets:
path: ../
Expand Down
12 changes: 10 additions & 2 deletions lib/src/widgets/master_detail/yaru_master_tile.dart
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:yaru/yaru.dart';
import 'package:yaru_widgets/constants.dart';

const double _kScrollbarThickness = 8.0;
Expand Down Expand Up @@ -59,8 +60,15 @@ class YaruMasterTile extends StatelessWidget {
selectedColor: theme.colorScheme.onSurface,
iconColor: theme.colorScheme.onSurface.withOpacity(0.8),
visualDensity: const VisualDensity(horizontal: -4, vertical: -4),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(kYaruButtonRadius)),
shape: RoundedRectangleBorder(
borderRadius:
const BorderRadius.all(Radius.circular(kYaruButtonRadius)),
side: theme.colorScheme.isHighContrast && isSelected
? BorderSide(
color: theme.colorScheme.outlineVariant,
strokeAlign: BorderSide.strokeAlignOutside,
)
: BorderSide.none,
),
leading: leading,
title: _titleStyle(context, title),
Expand Down
8 changes: 5 additions & 3 deletions lib/src/widgets/yaru_title_bar.dart
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:yaru/yaru.dart';
import 'package:yaru_colors/yaru_colors.dart';
import 'package:yaru_widgets/constants.dart';
import 'package:yaru_window/yaru_window.dart';
Expand Down Expand Up @@ -131,7 +132,8 @@ class YaruTitleBar extends StatelessWidget implements PreferredSizeWidget {
if (style == YaruTitleBarStyle.hidden) return const SizedBox.shrink();

final theme = Theme.of(context);
final light = theme.brightness == Brightness.light;
final light = theme.colorScheme.isLight;
final highContrast = theme.colorScheme.isHighContrast;
final states = <MaterialState>{
if (isActive != false) MaterialState.focused,
};
Expand Down Expand Up @@ -161,8 +163,8 @@ class YaruTitleBar extends StatelessWidget implements PreferredSizeWidget {

final defaultBorder = BorderSide(
color: light
? Colors.black.withOpacity(0.1)
: Colors.white.withOpacity(0.06),
? Colors.black.withOpacity(highContrast ? 1 : 0.1)
: Colors.white.withOpacity(highContrast ? 1 : 0.06),
);
final border =
Border(bottom: this.border ?? titleBarTheme.border ?? defaultBorder);
Expand Down
8 changes: 8 additions & 0 deletions lib/src/widgets/yaru_window_control.dart
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:yaru/yaru.dart';

/// The size of [YaruWindowControl].
const kYaruWindowControlSize = 24.0;
Expand Down Expand Up @@ -141,12 +142,19 @@ class _YaruWindowControlState extends State<YaruWindowControl>

@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
return _buildEventDetectors(
RepaintBoundary(
child: AnimatedContainer(
duration: _kWindowControlBackgroundAnimationDuration,
decoration: BoxDecoration(
color: _getColor(context),
border: colorScheme.isHighContrast
? Border.all(
color: colorScheme.outlineVariant,
strokeAlign: BorderSide.strokeAlignOutside,
)
: null,
shape: BoxShape.circle,
),
child: SizedBox.square(
Expand Down
2 changes: 1 addition & 1 deletion pubspec.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ environment:
dependencies:
flutter:
sdk: flutter
yaru: ^0.6.0
yaru: ^0.6.1
yaru_colors: ^0.1.2
yaru_icons: ^1.0.0
yaru_window: ^0.1.1
Expand Down

0 comments on commit fc99c7b

Please sign in to comment.