Update style for Mica and Acrylic #121
Conversation
example/lib/main.dart
Outdated
| @@ -85,6 +91,7 @@ class MyApp extends StatelessWidget { | |||
| initialRoute: '/', | |||
| routes: {'/': (_) => const MyHomePage()}, | |||
| theme: ThemeData( | |||
| micaBackgroundColor: Colors.transparent, | |||
There was a problem hiding this comment.
This shouldn't be handled this way. We should check what's the current AppTheme.acrylicEffect to get the best color for each.
When this is transparent, we get a weird effect when it's WindowEffect.disabled
There was a problem hiding this comment.
Do I understand correctly that then it is better to use this option?
micaBackgroundColor: appTheme.acrylicEffect == WindowEffect.acrylic || appTheme.acrylicEffect == WindowEffect.mica ? Colors.transparent : null,
| color = const Color.fromRGBO(249, 249, 249, 0.7); | ||
| } else if (states.isHovering) { | ||
| color = const Color(0xFFF6F6F6); | ||
| color = const Color.fromRGBO(249, 249, 249, 0.8); | ||
| } else { | ||
| color = Colors.white; | ||
| color = const Color.fromRGBO(255, 255, 255, 0.98); | ||
| } | ||
| return color; | ||
| } else { | ||
| if (states.isPressing) { | ||
| color = const Color(0xFF272727); | ||
| color = const Color.fromRGBO(255, 255, 255, 0.0837); | ||
| } else if (states.isHovering) { | ||
| color = const Color(0xFF323232); | ||
| color = const Color.fromRGBO(255, 255, 255, 0.0837); | ||
| } else { | ||
| color = const Color(0xFF2b2b2b); | ||
| color = const Color.fromRGBO(255, 255, 255, 0.0605); |
There was a problem hiding this comment.
I don't feel like these colors are correct. @WinXaito what do you think?
There was a problem hiding this comment.
These colors are taken from Microsoft's Figma guidelines and have been slightly tweaked to better match WinUI.
| @@ -244,8 +244,8 @@ class RadioButtonThemeData with Diagnosticable { | |||
| color: states.isPressing | |||
| ? backgroundColor | |||
| : states.isHovering | |||
| ? backgroundColor.withOpacity(0.8) | |||
| : backgroundColor.withOpacity(0.0), | |||
| ? style.inactiveColor.withOpacity(0.1) | |||
There was a problem hiding this comment.
This doesn't look good on light theme, in my opinion
There was a problem hiding this comment.
I made the same color on hover as Checkbox and ToggleSwitch
Updated styles to fully support Mica and Acrylic. I couldn't transfer the navViewPaneBackgroundColor variable from ThemeData to NavigationPaneThemeData :(
Examples of changes:
Before (Mica):
After (Mica):
Before: (Acrylic):
After (Acrylic):
Pre-launch Checklist
dartfmton all changed filesCHANGELOG.mdwith my changesflutter pub publish --dry-runand addressed any warnings