chore: build

frontend-prep/src/pages/LoginClient/Login.css

@@ -12,6 +12,28 @@
   overflow-y: auto;
 }
 
+.login-theme-btn {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--border);
+  background-color: var(--surface);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.login-theme-btn:hover {
+  color: var(--text);
+  background-color: var(--surface-2);
+}
+
 .login-content {
   width: 100%;
   max-width: 28rem;
@@ -136,7 +158,7 @@
 .error-message {
   margin-top: 0.5rem;
   font-size: 0.875rem;
-  color: #f87171;
+  color: var(--red);
 }
 
 .error-banner {

frontend-prep/src/pages/LoginClient/Login.tsx

@@ -1,12 +1,14 @@
 import { useState } from "react";
-import { Lock, Mail, Eye, EyeOff, User, Shield } from "lucide-react";
+import { Lock, Mail, Eye, EyeOff, User, Shield, Sun, Moon } from "lucide-react";
 import "./Login.css";
 import { loginUser, verify2FA, syncUsernameFromJWT } from "../../api/api";
 import type { LoginRequest } from "../../api/api_types";
 import { useNavigate } from "react-router-dom";
+import { useTheme } from "../../context/ThemeContext";
 
 const LoginClient = () => {
     const navigate = useNavigate();
+    const { theme, toggleTheme } = useTheme();
 
     const [formData, setFormData] = useState<LoginRequest>({
         username: "",
@@ -161,6 +163,9 @@ const LoginClient = () => {
     if (twoFAStep) {
         return (
             <div className="login-container">
+                <button className="login-theme-btn" onClick={toggleTheme} aria-label="Changer le thème">
+                    {theme === "dark" ? <Sun size={18} /> : <Moon size={18} />}
+                </button>
                 <div className="login-content">
                     <div className="login-header">
                         <div className="login-logo">
@@ -220,6 +225,9 @@ const LoginClient = () => {
 
     return (
         <div className="login-container">
+            <button className="login-theme-btn" onClick={toggleTheme} aria-label="Changer le thème">
+                {theme === "dark" ? <Sun size={18} /> : <Moon size={18} />}
+            </button>
             <div className="login-content">
                 <div className="login-header">
                     <div className="login-logo">