🎨 Palette: Add Alt+T theme toggle keyboard shortcut with dynamic visual hints - #121
🎨 Palette: Add Alt+T theme toggle keyboard shortcut with dynamic visual hints#121google-labs-jules[bot] wants to merge 1 commit into
Conversation
…al hints - Configured a reusable shortcuts registry in `app/config/shortcuts.ts` - Created a robust custom hook `useShortcuts` in `app/hooks/use-shortcuts.ts` with auto-bypassing on input focus - Updated `ThemeToggle` to bind Alt+T to theme toggling and display platform-appropriate (Alt+T or ⌥T) hints in the Tooltip - Added comprehensive unit tests for `useShortcuts` and updated `ThemeToggle` unit tests to achieve 100% test coverage and verify correct keydown dispatch behavior
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
💡 What:
Added a global accessible keyboard shortcut (
Alt+Ton Windows/Linux and⌥Ton macOS) to toggle between light and dark themes. The theme toggle icon button is also updated to dynamically display this keyboard shortcut hint inside its tooltip based on the user's platform.🎯 Why:
Theme toggling is one of the most frequently used visual controls on modern developer-focused starting templates. Providing a keyboard shortcut dramatically improves usability and accessibility for power users, while displaying it in the tooltip makes the shortcut intuitive and discoverable.
📸 Before/After:
♿ Accessibility:
The newly introduced reusable custom hook
useShortcutsincludes robust safeguards to ignore trigger events when the active focus is on text-entry elements (INPUT,TEXTAREA,SELECT, andcontenteditable). This ensures normal text entry is never disrupted. All changes are covered by complete unit test suites.PR created automatically by Jules for task 7010972623816863788 started by @amrabed