feat(NEWS-17): Add dark mode toggle to profile page

- Create ThemeToggle component with sun/moon icons
- Set up ThemeProvider in main.tsx with system preference support
- Integrate theme toggle into ProfileView in settings section
- Add comprehensive unit tests for ThemeToggle component
- Update ProfileView tests to include theme settings section
- Update documentation with theme support details
- Theme preference persists across browser sessions using localStorage
- Smooth transitions between light and dark themes
- Full accessibility support with ARIA labels and keyboard navigation

Resolves NEWS-17

Author: alvarotech

.claude/commands/develop-us.md

@@ -5,7 +5,8 @@ Follow these steps:
 1. Use Jira MCP to get the ticket details, whether it is the ticket id/number, keywords referring to the ticket or indicating status, like "the one in progress"
 2. Understand the problem described in the ticket
 3. Search the codebase for relevant files
-4. Implement the necessary changes to solve the ticket
+4. Start a new branch using the ID of the ticket (for example NEWS-1)
+4. Implement the necessary changes to solve the ticket 
 5. Write and run tests to verify the solution
 6. Ensure code passes linting and type checking
 7. Create a descriptive commit message

.cursor/commands/plan-backend-ticket.md

@@ -16,6 +16,7 @@ Obtain a step-by-step plan for a Jira ticket that is ready to start implementing
 2. Propose a step-by-step plan for the backend part, taking into account everything mentioned in the ticket and applying the project’s best practices and rules.
 3. Apply the best practices of your role to ensure the developer can be fully autonomous and implement the ticket end-to-end using only your plan.
 4. Do not write code yet; provide only the plan in the output format defined below.
+5. If you are asked to start implementing at some point, make sure the first thing you do is to move to a branch named after the ticket id (if you are not yet there)
 
 # Output format
 

README.md

@@ -89,6 +89,7 @@ frontend/
 - **State Management**: React Context + React Query (TanStack Query)
 - **Routing**: React Router v7
 - **Form Validation**: Zod schemas
+- **Theme**: next-themes for dark/light mode with system preference support
 - **Testing**: Vitest + React Testing Library
 
 ## 📦 Installation

backend/.env.backup

@@ -0,0 +1,5 @@
+MONGODB_URL=mongodb://admin:admin123@localhost:27017/react_fastapi_db?authSource=admin
+DATABASE_NAME=react_fastapi_db
+SECRET_KEY=dev-secret-key-change-in-production-12345678901234567890
+ALGORITHM=HS256
+ACCESS_TOKEN_EXPIRE_MINUTES=30

frontend/README.md

@@ -26,6 +26,10 @@ A modern React TypeScript frontend for the News Management system, built with fe
 
 ### User Interface
 - **Dark/Light Mode**: Theme switching with system preference detection
+  - Toggle available in the profile page
+  - Persists preference across browser sessions
+  - Automatically respects system theme by default
+  - Smooth transitions between themes
 - **Responsive Design**: Mobile-first approach with desktop enhancements
 - **Accessibility**: ARIA labels, keyboard navigation, screen reader support
 - **Loading States**: Skeleton loaders and loading indicators
@@ -179,6 +183,33 @@ npm run test:coverage
 npm run test:ui
 ```
 
+## Theme Support
+
+The application includes a complete dark mode implementation using `next-themes`.
+
+### Features
+- **Theme Toggle**: Available in the user profile page
+- **System Preference**: Automatically detects and respects OS theme settings
+- **Persistence**: Theme preference is saved to localStorage
+- **Smooth Transitions**: CSS transitions for a polished experience
+- **Accessibility**: Proper ARIA labels and keyboard navigation
+
+### Usage
+
+The theme toggle is integrated into the profile page. Users can:
+1. Navigate to `/profile`
+2. Use the theme toggle switch in the settings section
+3. Choose between light and dark modes
+
+The theme preference is stored using the localStorage key `theme` and persists across sessions.
+
+### Implementation Details
+
+- **ThemeProvider**: Wraps the entire app in `main.tsx`
+- **ThemeToggle Component**: Reusable component at `src/core/components/ThemeToggle.tsx`
+- **CSS Variables**: Theme colors defined in `src/index.css`
+- **Tailwind Configuration**: Dark mode enabled with `class` strategy
+
 ## Configuration
 
 ### Environment Variables

frontend/src/components/__tests__/DashboardHeader.test.tsx

@@ -12,13 +12,23 @@ vi.mock('@/features/auth/hooks/useAuthContext', () => ({
   useAuthContext: () => mockUseAuthContext()
 }))
 
+// Mock react-router-dom
+vi.mock('react-router-dom', () => ({
+  Link: ({ to, children, ...props }: any) => (
+    <a href={to} {...props}>{children}</a>
+  )
+}))
+
 // Mock Lucide React icons
 vi.mock('lucide-react', () => ({
   LogOut: ({ className }: { className?: string }) => (
     <span data-testid="logout-icon" className={className}>LogOut</span>
   ),
   User: ({ className }: { className?: string }) => (
     <span data-testid="user-icon" className={className}>User</span>
+  ),
+  Settings: ({ className }: { className?: string }) => (
+    <span data-testid="settings-icon" className={className}>Settings</span>
   )
 }))
 

frontend/src/core/components/ThemeToggle.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+import { useTheme } from 'next-themes';
+import { Moon, Sun } from 'lucide-react';
+import { Switch } from '../../components/ui/switch';
+
+/**
+ * ThemeToggle Component
+ * 
+ * A reusable component that provides a toggle switch for switching between
+ * light and dark themes. Uses next-themes for theme management and persists
+ * the user's preference in localStorage.
+ * 
+ * Features:
+ * - Visual feedback with Sun/Moon icons
+ * - Smooth transitions between themes
+ * - Accessibility support (keyboard navigation, ARIA labels)
+ * - Respects system theme preference by default
+ * 
+ * @returns {JSX.Element} The theme toggle switch component
+ */
+export function ThemeToggle(): JSX.Element {
+  const [mounted, setMounted] = useState(false);
+  const { setTheme, resolvedTheme } = useTheme();
+
+  // useEffect only runs on the client, so we can safely show the UI
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Prevent hydration mismatch by not rendering until mounted
+  if (!mounted) {
+    return (
+      <div className="flex items-center gap-2">
+        <Sun className="h-4 w-4 text-gray-400" />
+        <Switch disabled aria-label="Loading theme toggle" />
+        <Moon className="h-4 w-4 text-gray-400" />
+      </div>
+    );
+  }
+
+  const isDark = resolvedTheme === 'dark';
+
+  const handleToggle = (checked: boolean) => {
+    setTheme(checked ? 'dark' : 'light');
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <Sun 
+        className={`h-4 w-4 transition-colors ${
+          isDark ? 'text-gray-400' : 'text-yellow-500'
+        }`}
+        aria-hidden="true"
+      />
+      <Switch
+        checked={isDark}
+        onCheckedChange={handleToggle}
+        aria-label={`Switch to ${isDark ? 'light' : 'dark'} mode`}
+        className="data-[state=checked]:bg-primary"
+      />
+      <Moon 
+        className={`h-4 w-4 transition-colors ${
+          isDark ? 'text-blue-400' : 'text-gray-400'
+        }`}
+        aria-hidden="true"
+      />
+    </div>
+  );
+}
+

frontend/src/core/components/__tests__/ThemeToggle.test.tsx

@@ -0,0 +1,227 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { ThemeToggle } from '../ThemeToggle';
+
+// Mock next-themes
+const mockSetTheme = vi.fn();
+const mockUseTheme = vi.fn();
+
+vi.mock('next-themes', () => ({
+  useTheme: () => mockUseTheme(),
+}));
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  Moon: ({ className, 'aria-hidden': ariaHidden }: any) => (
+    <div data-testid="moon-icon" className={className} aria-hidden={ariaHidden}>🌙</div>
+  ),
+  Sun: ({ className, 'aria-hidden': ariaHidden }: any) => (
+    <div data-testid="sun-icon" className={className} aria-hidden={ariaHidden}>☀️</div>
+  ),
+}));
+
+// Mock Switch component
+vi.mock('../../../components/ui/switch', () => ({
+  Switch: ({ checked, onCheckedChange, disabled, 'aria-label': ariaLabel, className }: any) => (
+    <button
+      data-testid="theme-switch"
+      onClick={() => !disabled && onCheckedChange && onCheckedChange(!checked)}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      className={className}
+      data-checked={checked}
+    >
+      {checked ? 'ON' : 'OFF'}
+    </button>
+  ),
+}));
+
+describe('ThemeToggle', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render with icons', () => {
+    mockUseTheme.mockReturnValue({
+      theme: 'light',
+      setTheme: mockSetTheme,
+      resolvedTheme: 'light',
+    });
+
+    render(<ThemeToggle />);
+
+    // Check icons are rendered
+    expect(screen.getByTestId('sun-icon')).toBeInTheDocument();
+    expect(screen.getByTestId('moon-icon')).toBeInTheDocument();
+  });
+
+  it('should render correctly with light theme', async () => {
+    mockUseTheme.mockReturnValue({
+      theme: 'light',
+      setTheme: mockSetTheme,
+      resolvedTheme: 'light',
+    });
+
+    render(<ThemeToggle />);
+
+    // Wait for component to be mounted
+    await waitFor(() => {
+      const switchButton = screen.getByTestId('theme-switch');
+      expect(switchButton).not.toBeDisabled();
+    });
+
+    const switchButton = screen.getByTestId('theme-switch');
+    expect(switchButton).toHaveAttribute('data-checked', 'false');
+    expect(switchButton).toHaveAttribute('aria-label', 'Switch to dark mode');
+
+    // Check icons are rendered
+    expect(screen.getByTestId('sun-icon')).toBeInTheDocument();
+    expect(screen.getByTestId('moon-icon')).toBeInTheDocument();
+
+    // Check sun icon has active styling
+    const sunIcon = screen.getByTestId('sun-icon');
+    expect(sunIcon.className).toContain('text-yellow-500');
+
+    // Check moon icon has inactive styling
+    const moonIcon = screen.getByTestId('moon-icon');
+    expect(moonIcon.className).toContain('text-gray-400');
+  });
+
+  it('should render correctly with dark theme', async () => {
+    mockUseTheme.mockReturnValue({
+      theme: 'dark',
+      setTheme: mockSetTheme,
+      resolvedTheme: 'dark',
+    });
+
+    render(<ThemeToggle />);
+
+    // Wait for component to be mounted
+    await waitFor(() => {
+      const switchButton = screen.getByTestId('theme-switch');
+      expect(switchButton).not.toBeDisabled();
+    });
+
+    const switchButton = screen.getByTestId('theme-switch');
+    expect(switchButton).toHaveAttribute('data-checked', 'true');
+    expect(switchButton).toHaveAttribute('aria-label', 'Switch to light mode');
+
+    // Check sun icon has inactive styling
+    const sunIcon = screen.getByTestId('sun-icon');
+    expect(sunIcon.className).toContain('text-gray-400');
+
+    // Check moon icon has active styling
+    const moonIcon = screen.getByTestId('moon-icon');
+    expect(moonIcon.className).toContain('text-blue-400');
+  });
+
+  it('should call setTheme with "dark" when switching from light to dark', async () => {
+    mockUseTheme.mockReturnValue({
+      theme: 'light',
+      setTheme: mockSetTheme,
+      resolvedTheme: 'light',
+    });
+
+    render(<ThemeToggle />);
+
+    // Wait for component to be mounted
+    await waitFor(() => {
+      const switchButton = screen.getByTestId('theme-switch');
+      expect(switchButton).not.toBeDisabled();
+    });
+
+    const switchButton = screen.getByTestId('theme-switch');
+    fireEvent.click(switchButton);
+
+    expect(mockSetTheme).toHaveBeenCalledWith('dark');
+    expect(mockSetTheme).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call setTheme with "light" when switching from dark to light', async () => {
+    mockUseTheme.mockReturnValue({
+      theme: 'dark',
+      setTheme: mockSetTheme,
+      resolvedTheme: 'dark',
+    });
+
+    render(<ThemeToggle />);
+
+    // Wait for component to be mounted
+    await waitFor(() => {
+      const switchButton = screen.getByTestId('theme-switch');
+      expect(switchButton).not.toBeDisabled();
+    });
+
+    const switchButton = screen.getByTestId('theme-switch');
+    fireEvent.click(switchButton);
+
+    expect(mockSetTheme).toHaveBeenCalledWith('light');
+    expect(mockSetTheme).toHaveBeenCalledTimes(1);
+  });
+
+  it('should have proper accessibility attributes', async () => {
+    mockUseTheme.mockReturnValue({
+      theme: 'light',
+      setTheme: mockSetTheme,
+      resolvedTheme: 'light',
+    });
+
+    render(<ThemeToggle />);
+
+    // Wait for component to be mounted
+    await waitFor(() => {
+      const switchButton = screen.getByTestId('theme-switch');
+      expect(switchButton).not.toBeDisabled();
+    });
+
+    const switchButton = screen.getByTestId('theme-switch');
+    expect(switchButton).toHaveAttribute('aria-label', 'Switch to dark mode');
+
+    // Icons should have aria-hidden
+    const sunIcon = screen.getByTestId('sun-icon');
+    const moonIcon = screen.getByTestId('moon-icon');
+    expect(sunIcon).toHaveAttribute('aria-hidden', 'true');
+    expect(moonIcon).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('should handle system theme correctly', async () => {
+    mockUseTheme.mockReturnValue({
+      theme: 'system',
+      setTheme: mockSetTheme,
+      resolvedTheme: 'light', // System preference is light
+    });
+
+    render(<ThemeToggle />);
+
+    // Wait for component to be mounted
+    await waitFor(() => {
+      const switchButton = screen.getByTestId('theme-switch');
+      expect(switchButton).not.toBeDisabled();
+    });
+
+    // Should use resolvedTheme, not theme
+    const switchButton = screen.getByTestId('theme-switch');
+    expect(switchButton).toHaveAttribute('data-checked', 'false');
+  });
+
+  it('should handle dark system theme correctly', async () => {
+    mockUseTheme.mockReturnValue({
+      theme: 'system',
+      setTheme: mockSetTheme,
+      resolvedTheme: 'dark', // System preference is dark
+    });
+
+    render(<ThemeToggle />);
+
+    // Wait for component to be mounted
+    await waitFor(() => {
+      const switchButton = screen.getByTestId('theme-switch');
+      expect(switchButton).not.toBeDisabled();
+    });
+
+    // Should use resolvedTheme, not theme
+    const switchButton = screen.getByTestId('theme-switch');
+    expect(switchButton).toHaveAttribute('data-checked', 'true');
+  });
+});
+