Add support for high contrast theme (ubuntu#682)

* 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`
d-loose · Mar 24, 2023 · 7fb794e · 7fb794e
1 parent d28f06b
commit 7fb794e
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 7 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -33,6 +33,8 @@ class Home extends StatelessWidget {
           debugShowCheckedModeBanner: false,
           theme: yaru.theme,
           darkTheme: yaru.darkTheme,
+          highContrastTheme: yaruHighContrastLight,
+          highContrastDarkTheme: yaruHighContrastDark,
           home: Example.create(context),
         );
       },

diff --git a/example/pubspec.yaml b/example/pubspec.yaml
@@ -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: ../

diff --git a/lib/src/widgets/master_detail/yaru_master_tile.dart b/lib/src/widgets/master_detail/yaru_master_tile.dart
@@ -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;
@@ -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),

diff --git a/lib/src/widgets/yaru_title_bar.dart b/lib/src/widgets/yaru_title_bar.dart
@@ -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';
@@ -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,
     };
@@ -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);

diff --git a/lib/src/widgets/yaru_window_control.dart b/lib/src/widgets/yaru_window_control.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:yaru/yaru.dart';
 
 /// The size of [YaruWindowControl].
 const kYaruWindowControlSize = 24.0;
@@ -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(

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -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