Skip to content
This repository has been archived by the owner on Feb 25, 2024. It is now read-only.

Let Flutter help with high-contrast colors #148

Merged
merged 2 commits into from
Apr 20, 2022
Merged

Let Flutter help with high-contrast colors #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1f5dff9
Lift unnecessary restrictions on color type
jpnurmi Apr 20, 2022
24c8a44
Let Flutter help with high-contrast colors
jpnurmi Apr 20, 2022
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
26 changes: 12 additions & 14 deletions lib/src/themes/common_themes.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,17 +112,16 @@ final _dialogThemeLight = DialogTheme(

// Switches

SwitchThemeData _getSwitchThemeData(
MaterialColor primaryColor, Brightness brightness) {
SwitchThemeData _getSwitchThemeData(Color primaryColor, Brightness brightness) {
return SwitchThemeData(
thumbColor: MaterialStateProperty.resolveWith(
(states) => _getSwitchThumbColor(states, primaryColor, brightness)),
trackColor: MaterialStateProperty.resolveWith(
(states) => _getSwitchTrackColor(states, primaryColor, brightness)));
}

Color _getSwitchThumbColor(Set<MaterialState> states,
MaterialColor selectedColor, Brightness brightness) {
Color _getSwitchThumbColor(
Set<MaterialState> states, Color selectedColor, Brightness brightness) {
if (states.contains(MaterialState.disabled)) {
return brightness == Brightness.dark
? YaruColors.disabledGreyDark
Expand All @@ -136,8 +135,8 @@ Color _getSwitchThumbColor(Set<MaterialState> states,
}
}

Color _getSwitchTrackColor(Set<MaterialState> states,
MaterialColor selectedColor, Brightness brightness) {
Color _getSwitchTrackColor(
Set<MaterialState> states, Color selectedColor, Brightness brightness) {
if (states.contains(MaterialState.disabled)) {
return brightness == Brightness.dark
? YaruColors.disabledGreyDark.withAlpha(120)
Expand All @@ -157,8 +156,8 @@ Color _getSwitchTrackColor(Set<MaterialState> states,

// Checks & Radios

Color _getCheckFillColor(Set<MaterialState> states, MaterialColor selectedColor,
Brightness brightness) {
Color _getCheckFillColor(
Set<MaterialState> states, Color selectedColor, Brightness brightness) {
if (!states.contains(MaterialState.disabled)) {
if (states.contains(MaterialState.selected)) {
return selectedColor;
Expand All @@ -182,20 +181,19 @@ Color _getCheckColor(Set<MaterialState> states, Color color) {
}

CheckboxThemeData _getCheckBoxThemeData(
MaterialColor primaryColor, Brightness brightness) {
Color primaryColor, Brightness brightness) {
return CheckboxThemeData(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(kCheckRadius),
),
fillColor: MaterialStateProperty.resolveWith(
(states) => _getCheckFillColor(states, primaryColor, brightness)),
checkColor: MaterialStateProperty.resolveWith(
(states) => _getCheckColor(states, primaryColor.shade500)),
(states) => _getCheckColor(states, primaryColor)),
);
}

RadioThemeData _getRadioThemeData(
MaterialColor primaryColor, Brightness brightness) {
RadioThemeData _getRadioThemeData(Color primaryColor, Brightness brightness) {
return RadioThemeData(
fillColor: MaterialStateProperty.resolveWith(
(states) => _getCheckFillColor(states, primaryColor, brightness)));
Expand All @@ -204,7 +202,7 @@ RadioThemeData _getRadioThemeData(
/// Helper function to create a new Yaru light theme
ThemeData createYaruLightTheme(
{required ColorScheme colorScheme,
required MaterialColor primaryColor,
required Color primaryColor,
Color? elevatedButtonColor}) {
return ThemeData(
tabBarTheme: TabBarTheme(labelColor: colorScheme.onSurface),
Expand Down Expand Up @@ -247,7 +245,7 @@ ThemeData createYaruLightTheme(
/// Helper function to create a new Yaru dark theme
ThemeData createYaruDarkTheme(
{required ColorScheme colorScheme,
required MaterialColor primaryColor,
required Color primaryColor,
Color? elevatedButtonColor}) {
return ThemeData(
tabBarTheme: TabBarTheme(labelColor: Colors.white.withOpacity(0.8)),
Expand Down
32 changes: 12 additions & 20 deletions lib/src/themes/high_contrast.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,22 @@ import 'package:yaru/src/colors/yaru_colors.dart';

import 'package:yaru/src/themes/common_themes.dart';

final b = YaruColors.createMaterialColor(Colors.black);
final yaruHighContrastLight = createYaruLightTheme(
colorScheme: ColorScheme.fromSwatch(
primarySwatch: b,
primaryColorDark: YaruColors.coolGrey,
accentColor: Colors.black,
cardColor: Colors.white,
backgroundColor: Colors.white,
errorColor: YaruColors.red,
brightness: Brightness.light,
colorScheme: const ColorScheme.highContrastLight(
primary: Colors.black,
secondary: Colors.black,
onSecondary: Colors.white,
error: YaruColors.red,
),
primaryColor: b,
primaryColor: Colors.black,
);

final w = YaruColors.createMaterialColor(Colors.white);
final yaruHighContrastDark = createYaruDarkTheme(
colorScheme: ColorScheme.fromSwatch(
primarySwatch: w,
primaryColorDark: Colors.white,
accentColor: Colors.white,
cardColor: Colors.black,
backgroundColor: Colors.black,
errorColor: YaruColors.red,
brightness: Brightness.dark,
colorScheme: const ColorScheme.highContrastDark(
primary: Colors.white,
secondary: Colors.white,
onSecondary: Colors.black,
error: YaruColors.red,
),
primaryColor: w,
primaryColor: Colors.white,
);