Build a Dark and light theme toggle button

[AyabongaQwabi]

Ticket: Implement Dark and Light Theme Toggle Button in Header

Description

The goal of this task is to enhance user experience by implementing a theme toggle button that enables users to switch seamlessly between dark and light themes on the website. This toggle button will be conveniently located in the header for easy access and should function responsively across various devices. Additionally, users' theme preferences will be saved locally to ensure their selection is preserved during subsequent visits.

---

Key Objectives

1. Theme Toggle Button:

   • Design and integrate a toggle button (e.g., switch, checkbox, or icon button) that allows users to effortlessly toggle between dark and light themes.
   • Position the button prominently in the header, ideally in the top right corner for maximum visibility and accessibility.

2. Dark and Light Theme Styles:

   • Establish a cohesive light theme and dark theme for the website.
   • Ensure both themes incorporate comprehensive style changes, including:
     • Background colors
     • Text colors
     • Button styles
     • Card/container designs
     • Links and hover states
   • Consider using CSS-in-JS solutions or CSS variables for effective theme management. Utilizing a library such as next-themes can facilitate smooth theme switching.

3. Persistent User Preference:

   • Implement a mechanism to save the user’s theme preference in localStorage or cookies, allowing the selection to persist across sessions.
   • On initial page load, check for any saved preferences and apply the corresponding theme. If no preference is stored, default to the light theme for user-friendliness.

4. Accessibility:

   • Ensure the toggle button adheres to accessibility standards, being fully keyboard navigable with clear focus styles.
   • Utilize appropriate aria-labels and role attributes to enhance accessibility for screen readers.

5. Responsive Design:

   • Make certain the theme toggle button remains visible and functional on both desktop and mobile devices.
   • Consider implementing media queries to adjust the button’s placement for optimal usability on mobile screens if required.

6. Testing:

   • Conduct thorough testing to verify that the toggle button effectively switches themes and that the preference persists across sessions.
   • Ensure all accessibility features are functional and meet standards.

---

Acceptance Criteria

• The theme toggle button is successfully integrated into the header and operates correctly.
• Users can switch between dark and light modes by clicking the button without issues.
• The user's theme preference is appropriately saved locally and applied during return visits.
• The toggle button meets accessibility and responsiveness criteria.
• All user interface elements appropriately adapt according to the selected theme.

---

Developer Notes

To streamline the implementation process, consider using the next-themes library, which provides a straightforward solution for managing dark and light themes in a Next.js application.

Example Steps to Use next-themes:

1. Install next-themes:

   npm install next-themes

2. Import and configure the ThemeProvider in your _app.js file:

   import { ThemeProvider } from 'next-themes'
   
   function MyApp({ Component, pageProps }) {
     return (
       <ThemeProvider attribute="class">
         <Component {...pageProps} />
       </ThemeProvider>
     )
   }
   
   export default MyApp;

3. In your header component, create the toggle button or switch for theme switching:

   import { useTheme } from 'next-themes'
   
   function ThemeToggle() {
     const { theme, setTheme } = useTheme()
   
     return (
       <button
         onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
         aria-label="Toggle theme"
       >
         {theme === 'dark' ? '🌙' : '🌞'}
       </button>
     )
   }
   
   export default ThemeToggle;

4. Incorporate the ThemeToggle component into your header for user interaction.

---

By implementing these enhancements, we not only improve user engagement through personalized theme options but also foster a user-friendly, responsive, and accessible online experience. Rock on Matt!