feat(drawer): improve dark mode toggle UI and placement #339
Conversation
WalkthroughThis update adds new string entries for theme modes in two localization files by introducing "light_mode" and "dark_mode" keys. In addition, a minor formatting adjustment is made in one of the localization files. The user interface component is also modified: a new Changes
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
lib/ui/components/cv_drawer.dart (1)
38-74: The new theme toggle implementation looks great!The ListTile implementation with animated icon transition and switch provides a more intuitive and visually appealing UI for theme toggling. The placement at the top of the drawer improves visibility and accessibility.
A few minor optimizations to consider:
ListTile( leading: AnimatedSwitcher( duration: const Duration(milliseconds: 300), transitionBuilder: (child, animation) { return RotationTransition( turns: Tween(begin: 0.75, end: 1.0).animate(animation), child: FadeTransition(opacity: animation, child: child), ); }, child: Icon( - Theme.of(context).brightness == Brightness.dark + isDarkMode ? Icons.nightlight_round - : Icons.wb_sunny, + : Icons.light_mode, key: ValueKey(Theme.of(context).brightness), color: CVTheme.drawerIcon(context), ), ), title: AnimatedDefaultTextStyle( - duration: const Duration(milliseconds: 100), + duration: const Duration(milliseconds: 300), style: Theme.of(context).textTheme.titleLarge!, child: Text( - Theme.of(context).brightness == Brightness.dark + isDarkMode ? AppLocalizations.of(context)!.dark_mode : AppLocalizations.of(context)!.light_mode, ), ), trailing: Switch( - value: Theme.of(context).brightness == Brightness.dark, + value: isDarkMode, onChanged: (_) => ThemeProvider.controllerOf(context).nextTheme(), activeColor: CVTheme.drawerIcon(context), inactiveThumbColor: CVTheme.drawerIcon(context), activeTrackColor: CVTheme.drawerIcon(context).withAlpha(128), + semanticLabel: isDarkMode ? 'Switch to light mode' : 'Switch to dark mode', ), ),Add this at the start of the build method:
final isDarkMode = Theme.of(context).brightness == Brightness.dark;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
lib/l10n/app_en.arb(1 hunks)lib/l10n/app_hi.arb(1 hunks)lib/ui/components/cv_drawer.dart(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: build (ubuntu-latest)
- GitHub Check: build (windows-latest)
- GitHub Check: build (macos-latest)
🔇 Additional comments (2)
lib/l10n/app_en.arb (1)
119-120: LGTM! The new localization entries are well-structured.The addition of "light_mode" and "dark_mode" entries provides proper localization support for the new theme toggle UI in the drawer.
lib/l10n/app_hi.arb (1)
119-120: LGTM! Translations are appropriately added.The Hindi translations for light and dark modes are properly implemented, maintaining consistency with the English version.
1 participant
Fixes #
Describe the changes you have made in this PR -
This PR improves the dark mode toggle by turning it into a more intuitive switch and placing it at the top of the drawer. The new placement enhances visibility and access, leading to a better overall user experience. The change ensures theme switching feels natural and easily reachable.
Screenshots of the changes (If any) -
Older Light Mode
Newer Light Mode
Older Dark Mode
Newer Dark Mode
Note: Please check Allow edits from maintainers. if you would like us to assist in the PR.
Summary by CodeRabbit