lingo.dev icon indicating copy to clipboard operation
lingo.dev copied to clipboard

fix: make theme toggle visible on mobile devices

Open Aditya-Prakash14 opened this issue 2 months ago • 0 comments

Screenshot 2025-10-30 at 11 37 54 AM Screenshot 2025-10-30 at 11 38 01 AM This pull request adds a theme toggle feature to the demo app, allowing users to switch between light and dark modes. It introduces a new `ThemeToggle` component, updates global and button styling for theme support, and improves accessibility and mobile responsiveness. Additionally, it enhances internationalization metadata and updates the Vite config to use specific language models for each locale.

Theme Toggle Feature

  • Added a new ThemeToggle component (ThemeToggle.tsx) that enables users to switch between light and dark themes. The component saves user preference in localStorage and applies the theme using a data-theme attribute 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 ThemeToggle component into the main app by importing and rendering it in App.tsx. [1] [2]

Global and Button Styling Updates

  • Refactored global styles in index.css to use the data-theme attribute 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.json to support better labeling and accessibility for logos and content.

Vite Configuration

  • Updated the Vite config to specify the groq:llama-3.3-70b-versatile model for each target locale, improving translation quality and consistency.

Aditya-Prakash14 avatar Oct 30 '25 06:10 Aditya-Prakash14