lingo.dev
lingo.dev copied to clipboard
fix: make theme toggle visible on mobile devices
Theme Toggle Feature
- Added a new
ThemeTogglecomponent (ThemeToggle.tsx) that enables users to switch between light and dark themes. The component saves user preference inlocalStorageand applies the theme using adata-themeattribute on the root element. - Created comprehensive styles for the theme toggle button in
ThemeToggle.css, including accessibility, responsiveness, hover/active states, high contrast, and reduced motion support. - Integrated the
ThemeTogglecomponent into the main app by importing and rendering it inApp.tsx. [1] [2]
Global and Button Styling Updates
- Refactored global styles in
index.cssto use thedata-themeattribute for light and dark mode, updating background and text colors, as well as link and button styling to match the active theme. [1] [2]
Accessibility and Responsiveness
- Improved positioning and z-index for the locale switcher in
App.css, and added media queries to prevent overlap with the theme toggle on mobile devices.
Internationalization Metadata
- Added new translation keys and attributes to
lingo/meta.jsonto support better labeling and accessibility for logos and content.
Vite Configuration
- Updated the Vite config to specify the
groq:llama-3.3-70b-versatilemodel for each target locale, improving translation quality and consistency.