From 949b28c726b0a645a2f3a5be67f568d40fc25b73 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Tue, 7 Oct 2025 21:57:03 +0200
Subject: [PATCH] Improve dark mode

---
 ui/src/App.tsx                                | 10 +----
 ui/src/components/AvailabilityCard.tsx        | 18 ++++++---
 .../components/AvailabilityVisualization.tsx  |  8 ++--
 ui/src/main.css                               | 27 ++++++++++---
 ui/src/pages/PublicBookingPage.tsx            |  6 +--
 ui/src/pages/availabilities.tsx               | 22 ++++++-----
 ui/src/pages/bookings.tsx                     | 24 ++++++------
 ui/src/pages/chat.tsx                         |  6 +--
 ui/src/pages/event-types-page.tsx             | 39 ++++++++++++-------
 ui/src/pages/planning.tsx                     | 31 +++++++--------
 ui/src/pages/tablo.tsx                        | 20 ++++------
 ui/src/ui-library/theme/index.css             |  4 +-
 12 files changed, 116 insertions(+), 99 deletions(-)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 62de770..d155c79 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -1,10 +1,8 @@
 import { BrowserRouter as Router, useRoutes } from "react-router-dom";
 import { ThemeProvider } from "@ui/contexts/ThemeContext";
-import { twMerge } from "tailwind-merge";
 import { SessionProvider } from "@ui/contexts/SessionContext";
 import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";
 import { UserStoreProvider } from "@ui/providers/UserStoreProvider";
-import { isProd } from "@ui/utils/helpers";
 import { DatadogRumProvider } from "@ui/providers/DatadogRumProvider";
 import { routes } from "@ui/lib/routes";
 
@@ -23,13 +21,7 @@ export const App = () => {
         <UserStoreProvider>
           <Router>
             <DatadogRumProvider>
-              <div
-                className={twMerge(
-                  "min-h-screen",
-                  !isProd ? "bg-orange-50" : "bg-white",
-                  "dark:bg-gray-900"
-                )}
-              >
+              <div className="min-h-screen bg-background">
                 <AppRoutes />
                 <style>
                   {`
diff --git a/ui/src/components/AvailabilityCard.tsx b/ui/src/components/AvailabilityCard.tsx
index f069e3b..1c45b08 100644
--- a/ui/src/components/AvailabilityCard.tsx
+++ b/ui/src/components/AvailabilityCard.tsx
@@ -159,7 +159,7 @@ export function AvailabilityCard({
             size="sm"
             variant="outline"
             onPress={() => onCopyToOtherDays(day, enabled, timeRanges)}
-            className="h-6 px-2 text-xs border-gray-300 hover:border-primary hover:bg-primary/5 text-gray-600 hover:text-primary"
+            className="h-6 px-2 text-xs border-gray-300 dark:border-gray-600 hover:border-primary hover:bg-primary/5 dark:hover:bg-primary/10 text-gray-600 dark:text-gray-300 hover:text-primary"
           >
             <CopyIcon className="size-3 mr-1" />
             Copier
@@ -174,7 +174,9 @@ export function AvailabilityCard({
         >
           <Text
             className={`font-medium text-sm ${
-              enabled ? "text-gray-900" : "text-gray-500"
+              enabled
+                ? "text-gray-900 dark:text-gray-100"
+                : "text-gray-500 dark:text-gray-400"
             }`}
           >
             {enabled ? "Disponible" : "Indisponible"}
@@ -191,7 +193,7 @@ export function AvailabilityCard({
             className={`flex items-center gap-1 rounded-md px-1.5 py-1 cursor-pointer transition-all duration-200 ${
               selectedRangeIndex === index
                 ? "bg-primary/10 dark:bg-primary/20"
-                : "bg-gray-50/80 dark:bg-gray-900/80 hover:bg-gray-100 dark:hover:bg-gray-800/80"
+                : "bg-gray-50/80 dark:bg-gray-800/60 hover:bg-gray-100 dark:hover:bg-gray-700/60"
             }`}
           >
             <div className="flex items-center text-xs w-fit">
@@ -223,7 +225,9 @@ export function AvailabilityCard({
                       </SelectListBox>
                     </SelectPopover>
                   </Select>
-                  <Text className="text-gray-500 text-[10px] mx-2">-</Text>
+                  <Text className="text-gray-500 dark:text-gray-400 text-[10px] mx-2">
+                    -
+                  </Text>
                   <Select
                     aria-label="Heure de fin"
                     selectedKey={range.end}
@@ -256,7 +260,9 @@ export function AvailabilityCard({
                   <Text className="font-medium text-xs px-1">
                     {range.start}
                   </Text>
-                  <Text className="text-gray-500 text-[10px]">→</Text>
+                  <Text className="text-gray-500 dark:text-gray-400 text-[10px]">
+                    →
+                  </Text>
                   <Text className="font-medium text-xs px-1">{range.end}</Text>
                 </>
               )}
@@ -281,7 +287,7 @@ export function AvailabilityCard({
             isDisabled={!enabled}
             variant="outline"
             size="sm"
-            className="h-5 px-1.5 flex items-center text-xs border-0 bg-gray-100/50 dark:bg-gray-800/50 hover:bg-gray-200/50 dark:hover:bg-gray-700/50"
+            className="h-5 px-1.5 flex items-center text-xs border-0 bg-gray-100/50 dark:bg-gray-700/50 hover:bg-gray-200/50 dark:hover:bg-gray-600/50"
           >
             <PlusIcon className="size-2.5" />
           </Button>
diff --git a/ui/src/components/AvailabilityVisualization.tsx b/ui/src/components/AvailabilityVisualization.tsx
index ce1ef46..da1c4c8 100644
--- a/ui/src/components/AvailabilityVisualization.tsx
+++ b/ui/src/components/AvailabilityVisualization.tsx
@@ -64,10 +64,10 @@ export const AvailabilityVisualization = ({
 }) => {
   const timeSlots = generateTimeSlots(slotDurationMinutes);
   return (
-    <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+    <div className="bg-white dark:bg-gray-700/40 rounded-xl shadow-sm dark:shadow-gray-900/20 border border-gray-200 dark:border-gray-600/50 overflow-hidden">
       {/* Weekly Calendar Header */}
       <div className="grid grid-cols-8 border-b-2 border-gray-200 dark:border-gray-600">
-        <div className="p-4 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-900 border-r border-gray-200 dark:border-gray-600">
+        <div className="p-4 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-700/60 dark:to-slate-800/60 border-r border-gray-200 dark:border-gray-600">
           <Text className="font-bold text-sm text-slate-700 dark:text-slate-300">
             Heure
           </Text>
@@ -75,7 +75,7 @@ export const AvailabilityVisualization = ({
         {DAYS_OF_WEEK.map((day) => (
           <div
             key={day}
-            className="p-4 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-900 border-r border-gray-200 dark:border-gray-600 last:border-r-0 text-center"
+            className="p-4 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-700/60 dark:to-slate-800/60 border-r border-gray-200 dark:border-gray-600 last:border-r-0 text-center"
           >
             <Text className="font-bold text-sm text-slate-700 dark:text-slate-300">
               {DAYS_OF_WEEK_DISPLAY[day]}
@@ -105,7 +105,7 @@ export const AvailabilityVisualization = ({
               {DAYS_OF_WEEK.map((day) => (
                 <div
                   key={`${day}-${timeSlot}`}
-                  className="p-3 border-r border-gray-200 dark:border-gray-600 last:border-r-0 min-h-[3rem] flex items-center justify-center bg-gradient-to-br from-white to-slate-50/30 dark:from-gray-800 dark:to-slate-900/30"
+                  className="p-3 border-r border-gray-200 dark:border-gray-600 last:border-r-0 min-h-[3rem] flex items-center justify-center bg-gradient-to-br from-white to-slate-50/30 dark:from-gray-700/40 dark:to-slate-800/40"
                 >
                   {isTimeSlotAvailable(day, timeSlot, draftAvailabilities) ? (
                     <div className="w-full h-8 bg-gradient-to-r from-emerald-400 via-emerald-500 to-emerald-600 dark:from-emerald-500 dark:via-emerald-600 dark:to-emerald-700 rounded-lg shadow-sm border border-emerald-300 dark:border-emerald-600 flex items-center justify-center group hover:shadow-md transition-all duration-200 hover:scale-105">
diff --git a/ui/src/main.css b/ui/src/main.css
index b3cdb65..b92b187 100644
--- a/ui/src/main.css
+++ b/ui/src/main.css
@@ -1,9 +1,24 @@
 .str-chat {
-  --str-chat__primary-color: #3b82f6;
-  --str-chat__active-primary-color: #2563eb;
-  --str-chat__surface-color: #f1f5f9;
-  --str-chat__secondary-surface-color: #e2e8f0;
-  --str-chat__primary-surface-color: #dbeafe;
-  --str-chat__primary-surface-color-low-emphasis: #eff6ff;
+  --str-chat__primary-color: #8b7396;
+  --str-chat__active-primary-color: #6e5c7d;
+  --str-chat__surface-color: #f5f3f7;
+  --str-chat__secondary-surface-color: #e8e4ec;
+  --str-chat__primary-surface-color: #ebe7f0;
+  --str-chat__primary-surface-color-low-emphasis: #f2f0f5;
   --str-chat__border-radius-circle: 6px;
 }
+
+.dark .str-chat {
+  --str-chat__primary-color: #a68bb5;
+  --str-chat__active-primary-color: #8b7396;
+  --str-chat__surface-color: rgba(120, 107, 130, 0.25);
+  --str-chat__secondary-surface-color: rgba(140, 130, 150, 0.18);
+  --str-chat__primary-surface-color: rgba(166, 139, 181, 0.12);
+  --str-chat__primary-surface-color-low-emphasis: rgba(166, 139, 181, 0.06);
+  --str-chat__background-color: rgba(110, 100, 120, 0.2);
+  --str-chat__secondary-background-color: rgba(80, 72, 88, 0.35);
+  --str-chat__border-color: rgba(120, 107, 130, 0.28);
+  --str-chat__text-color: #f5f3f7;
+  --str-chat__text-low-emphasis-color: #b8b0c0;
+  --str-chat__disabled-color: rgba(155, 143, 165, 0.35);
+}
diff --git a/ui/src/pages/PublicBookingPage.tsx b/ui/src/pages/PublicBookingPage.tsx
index d7b22bd..528df7c 100644
--- a/ui/src/pages/PublicBookingPage.tsx
+++ b/ui/src/pages/PublicBookingPage.tsx
@@ -405,7 +405,7 @@ export function PublicBookingPage() {
                 )}
                 {eventType?.location && (
                   <div className="flex items-center gap-3">
-                    <MapPinIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
+                    <MapPinIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
                     <div>
                       <Text className="text-gray-600 dark:text-gray-400 text-sm">
                         {eventType.location}
@@ -485,11 +485,11 @@ export function PublicBookingPage() {
                             ? "text-gray-300 dark:text-gray-600 cursor-not-allowed"
                             : selectedDate?.toDateString() ===
                               date.toDateString()
-                            ? "bg-blue-600 text-white"
+                            ? "bg-purple-600 text-white"
                             : isToday(date)
                             ? "bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 font-semibold"
                             : hasAvailableSlots(date)
-                            ? "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border-2 border-green-200 dark:border-green-800"
+                            ? "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border-2 border-purple-200 dark:border-purple-800"
                             : "text-gray-400 dark:text-gray-500 cursor-not-allowed"
                         }`}
                       >
diff --git a/ui/src/pages/availabilities.tsx b/ui/src/pages/availabilities.tsx
index fb32070..fa30313 100644
--- a/ui/src/pages/availabilities.tsx
+++ b/ui/src/pages/availabilities.tsx
@@ -146,9 +146,10 @@ export function AvailabilitiesPage() {
               variant="solid"
               size="lg"
               onPress={() => setExceptionModalOpen(true)}
-              className="[--btn-bg:var(--color-blue-800)]"
+              className="bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity"
             >
-              <PlusIcon /> Ajouter une exception
+              <PlusIcon className="text-[#1a1a1a] dark:text-white" /> Ajouter
+              une exception
             </Button>
             <Button
               size="lg"
@@ -226,7 +227,7 @@ export function AvailabilitiesPage() {
                 {DAYS_OF_WEEK.map((day) => (
                   <div
                     key={day}
-                    className="bg-white dark:bg-gray-800 rounded-lg shadow p-2"
+                    className="bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 p-2 dark:border dark:border-gray-600/30"
                   >
                     <div className="space-y-2">
                       <AvailabilityCard
@@ -269,7 +270,7 @@ export function AvailabilitiesPage() {
                   </Text>
                 </div>
 
-                <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
+                <div className="bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 p-4 dark:border dark:border-gray-600/30">
                   <Strong className="block mb-2">Votre fuseau horaire</Strong>
                   <Text className="text-gray-500">
                     {Intl.DateTimeFormat().resolvedOptions().timeZone}
@@ -283,7 +284,7 @@ export function AvailabilitiesPage() {
                   </Text>
                 </div>
 
-                <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
+                <div className="bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 p-4 dark:border dark:border-gray-600/30">
                   <Strong className="block mb-2">Information</Strong>
                   <Text className="text-gray-500 text-sm">
                     Les créneaux horaires seront automatiquement convertis dans
@@ -317,15 +318,16 @@ export function AvailabilitiesPage() {
                 variant="solid"
                 size="lg"
                 onPress={() => setExceptionModalOpen(true)}
-                className="[--btn-bg:var(--color-blue-800)]"
+                className="bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity"
               >
-                <PlusIcon /> Ajouter une exception
+                <PlusIcon className="text-[#1a1a1a] dark:text-white" /> Ajouter
+                une exception
               </Button>
             </div>
 
             {exceptions.length === 0 ? (
               <div className="text-center py-12">
-                <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-8">
+                <div className="bg-gray-50 dark:bg-gray-700/30 rounded-lg p-8 dark:border dark:border-gray-600/20">
                   <Text className="text-gray-500 dark:text-gray-400 text-lg mb-4">
                     Aucune exception définie
                   </Text>
@@ -340,7 +342,7 @@ export function AvailabilitiesPage() {
                 {exceptions.map((exception, index) => (
                   <div
                     key={`${exception.date}-${index}`}
-                    className="bg-white dark:bg-gray-800 rounded-lg shadow p-4 border border-gray-200 dark:border-gray-700"
+                    className="bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 p-4 border border-gray-200 dark:border-gray-600/50"
                   >
                     <div className="flex justify-between items-start">
                       <div className="flex-1">
@@ -598,7 +600,7 @@ export function AvailabilitiesPage() {
                     ]);
                   }}
                 >
-                  <PlusIcon className="w-4 h-4 mr-1" />
+                  <PlusIcon className="w-4 h-4 mr-1 text-[#1a1a1a] dark:text-white" />
                   Ajouter un créneau
                 </Button>
               </div>
diff --git a/ui/src/pages/bookings.tsx b/ui/src/pages/bookings.tsx
index 1729bdf..28b3295 100644
--- a/ui/src/pages/bookings.tsx
+++ b/ui/src/pages/bookings.tsx
@@ -159,19 +159,19 @@ export const BookingsPage = () => {
 
     if (eventDate.getTime() === today.getTime()) {
       return (
-        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/60 dark:text-blue-200">
           Aujourd&apos;hui
         </span>
       );
     } else if (eventDate > today) {
       return (
-        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/60 dark:text-purple-200">
           À venir
         </span>
       );
     } else {
       return (
-        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
+        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-800/60 dark:text-gray-200">
           Passé
         </span>
       );
@@ -209,7 +209,7 @@ export const BookingsPage = () => {
   return (
     <div className="min-h-screen">
       {/* Header */}
-      <header className="bg-white dark:bg-gray-800 shadow">
+      <header className="bg-white dark:bg-gray-700/40 shadow-sm dark:shadow-gray-900/20 dark:border-b dark:border-gray-600/30">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
           <div className="flex items-center justify-between">
             <div>
@@ -222,10 +222,10 @@ export const BookingsPage = () => {
             </div>
             <div className="flex items-center space-x-3">
               <Button
-                className="bg-emerald-700 text-white hover:bg-emerald-600"
+                className="bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity"
                 onPress={handleCreateEvent}
               >
-                <CalendarIcon className="w-4 h-4 mr-2" />
+                <CalendarIcon className="w-4 h-4 mr-2 text-[#1a1a1a] dark:text-white" />
                 Nouvel événement
               </Button>
             </div>
@@ -236,12 +236,12 @@ export const BookingsPage = () => {
       {/* Main Content */}
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
         {/* Filters */}
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
+        <div className="bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 dark:border dark:border-gray-600/30 p-6 mb-6">
           <div className="flex flex-col lg:flex-row gap-4 items-start lg:items-center">
             {/* Search */}
             <div className="flex-1 w-full">
               <div className="relative">
-                <SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                <SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-300 w-4 h-4" />
                 <Input
                   type="text"
                   placeholder="Rechercher un événement..."
@@ -312,7 +312,7 @@ export const BookingsPage = () => {
         </div>
 
         {/* Events List */}
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
+        <div className="bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 dark:border dark:border-gray-600/30">
           {tablosLoading || eventsLoading ? (
             <div className="flex items-center justify-center h-screen">
               <LoadingSpinner />
@@ -334,7 +334,7 @@ export const BookingsPage = () => {
               {paginatedEvents.map((event) => (
                 <div
                   key={event.event_id}
-                  className="p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer"
+                  className="p-6 hover:bg-gray-50 dark:hover:bg-gray-600/40 transition-colors cursor-pointer"
                 >
                   <div className="flex items-start justify-between">
                     <div className="flex-1 min-w-0">
@@ -388,7 +388,7 @@ export const BookingsPage = () => {
 
         {/* Pagination Controls */}
         {totalItems > 0 && (
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow mt-4 px-6 py-4">
+          <div className="bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 dark:border dark:border-gray-600/30 mt-4 px-6 py-4">
             <div className="flex items-center justify-between">
               <div className="flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
                 <span>
@@ -486,7 +486,7 @@ export const BookingsPage = () => {
 
         {/* Stats Summary */}
         {filteredEvents.length > 0 && (
-          <div className="mt-6 bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+          <div className="mt-6 bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 dark:border dark:border-gray-600/30 p-6">
             <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
               <div className="text-center">
                 <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">
diff --git a/ui/src/pages/chat.tsx b/ui/src/pages/chat.tsx
index d9d7d26..3345035 100644
--- a/ui/src/pages/chat.tsx
+++ b/ui/src/pages/chat.tsx
@@ -36,9 +36,9 @@ export function ChatPage() {
   }, [channelFromUrl]);
 
   return (
-    <div className="flex h-screen bg-gray-50 dark:bg-gray-900">
+    <div className="flex h-screen bg-gray-50 dark:bg-background">
       <div
-        className={`border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 transition-all duration-300 ease-in-out overflow-hidden ${
+        className={`border-r border-gray-200 dark:border-gray-600/50 bg-white dark:bg-gray-700/40 transition-all duration-300 ease-in-out overflow-hidden ${
           isChannelListExpanded ? "w-80" : "w-0"
         }`}
       >
@@ -65,7 +65,7 @@ export function ChatPage() {
           )}
         />
       </div>
-      <div className="flex-1 bg-white dark:bg-gray-800">
+      <div className="flex-1 bg-white dark:bg-gray-700/40">
         <Channel channel={channel}>
           <Window>
             <CustomChannelHeader
diff --git a/ui/src/pages/event-types-page.tsx b/ui/src/pages/event-types-page.tsx
index 841f792..781b0aa 100644
--- a/ui/src/pages/event-types-page.tsx
+++ b/ui/src/pages/event-types-page.tsx
@@ -109,10 +109,10 @@ export function EventTypesPage() {
         <Button
           size="lg"
           variant="solid"
-          className="[--btn-bg:var(--color-blue-800)]"
+          className="bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity"
           onPress={handleCreateEventType}
         >
-          <PlusIcon /> Nouveau type
+          <PlusIcon className="text-[#1a1a1a] dark:text-white" /> Nouveau type
         </Button>
       </div>
 
@@ -121,7 +121,7 @@ export function EventTypesPage() {
           {eventTypesData?.map((eventType) => (
             <div
               key={eventType.id}
-              className={`bg-white dark:bg-gray-800 rounded-lg shadow p-6 border ${
+              className={`bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 dark:border-gray-600/50 p-6 border ${
                 eventType.isActive ? "opacity-100" : "opacity-60"
               }`}
             >
@@ -139,7 +139,7 @@ export function EventTypesPage() {
                         "_blank"
                       )
                     }
-                    className="text-gray-500 hover:text-blue-600"
+                    className="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
                     tooltip="Aperçu"
                   >
                     <ExternalLinkIcon className="w-4 h-4" />
@@ -148,7 +148,7 @@ export function EventTypesPage() {
                     copyValue={getPublicLink(eventType.standardName)}
                     label="Copier le lien"
                     labelAfterCopied="Lien copié"
-                    className="text-gray-500 hover:text-blue-600"
+                    className="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
                   ></CopyButton>
                   <Button
                     variant="plain"
@@ -159,7 +159,7 @@ export function EventTypesPage() {
                         eventType as EventTypeConfig
                       )
                     }
-                    className="text-gray-500 hover:text-blue-600"
+                    className="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
                   >
                     <EditIcon className="w-4 h-4" />
                   </Button>
@@ -167,7 +167,7 @@ export function EventTypesPage() {
                     variant="plain"
                     isIconOnly
                     onPress={() => deleteEventType({ id: eventType.id })}
-                    className="text-gray-500 hover:text-red-600"
+                    className="text-gray-500 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400"
                   >
                     <TrashIcon className="w-4 h-4" />
                   </Button>
@@ -180,12 +180,16 @@ export function EventTypesPage() {
 
               <div className="space-y-2 text-sm">
                 <div className="flex justify-between">
-                  <span className="text-gray-500">Durée:</span>
+                  <span className="text-gray-500 dark:text-gray-400">
+                    Durée:
+                  </span>
                   <span className="font-medium">{eventType.duration} min</span>
                 </div>
                 {eventType.bufferTime && (
                   <div className="flex justify-between">
-                    <span className="text-gray-500">Temps de battement:</span>
+                    <span className="text-gray-500 dark:text-gray-400">
+                      Temps de battement:
+                    </span>
                     <span className="font-medium">
                       {eventType.bufferTime} min
                     </span>
@@ -193,7 +197,9 @@ export function EventTypesPage() {
                 )}
                 {eventType.maxBookingsPerDay && (
                   <div className="flex justify-between">
-                    <span className="text-gray-500">Max par jour:</span>
+                    <span className="text-gray-500 dark:text-gray-400">
+                      Max par jour:
+                    </span>
                     <span className="font-medium">
                       {eventType.maxBookingsPerDay}
                     </span>
@@ -201,7 +207,7 @@ export function EventTypesPage() {
                 )}
                 {eventType.minAdvanceBooking && (
                   <div className="flex justify-between">
-                    <span className="text-gray-500">
+                    <span className="text-gray-500 dark:text-gray-400">
                       Réservation à l&apos;avance:
                     </span>
                     <span className="font-medium">
@@ -215,7 +221,9 @@ export function EventTypesPage() {
                   </div>
                 )}
                 <div className="flex justify-between items-center pt-2 border-t border-gray-200 dark:border-gray-700">
-                  <span className="text-gray-500">Statut:</span>
+                  <span className="text-gray-500 dark:text-gray-400">
+                    Statut:
+                  </span>
                   <ToggleButton
                     isSelected={eventType.isActive}
                     onChange={() =>
@@ -237,15 +245,16 @@ export function EventTypesPage() {
 
         {eventTypesData?.length === 0 && (
           <div className="text-center py-12">
-            <Text className="text-gray-500 mb-4">
+            <Text className="text-gray-500 dark:text-gray-400 mb-4">
               Aucun type d&apos;événement configuré
             </Text>
             <Button
               variant="solid"
               onPress={handleCreateEventType}
-              className="[--btn-bg:var(--color-blue-800)]"
+              className="bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity"
             >
-              <PlusIcon /> Créer votre premier type
+              <PlusIcon className="text-[#1a1a1a] dark:text-white" /> Créer
+              votre premier type
             </Button>
           </div>
         )}
diff --git a/ui/src/pages/planning.tsx b/ui/src/pages/planning.tsx
index 9f148d4..472435a 100644
--- a/ui/src/pages/planning.tsx
+++ b/ui/src/pages/planning.tsx
@@ -324,7 +324,7 @@ export const PlanningPage = () => {
   );
 
   const renderMonthView = () => (
-    <div className="flex-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+    <div className="flex-1 bg-white dark:bg-gray-700/40 border border-gray-200 dark:border-gray-600/50">
       {/* Days header */}
       <div className="grid grid-cols-7 border-b border-gray-200 dark:border-gray-700">
         {dayNamesShort.map((day) => (
@@ -348,8 +348,8 @@ export const PlanningPage = () => {
                 : ""
             } ${
               day
-                ? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
-                : "bg-gray-50 dark:bg-gray-900"
+                ? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-600/40"
+                : "bg-gray-50 dark:bg-gray-800/60"
             } ${
               day && formatDate(day) === formatDate(new Date())
                 ? "bg-blue-50 dark:bg-blue-900/20"
@@ -443,7 +443,7 @@ export const PlanningPage = () => {
   );
 
   const renderWeekView = () => (
-    <div className="flex-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex flex-col">
+    <div className="flex-1 bg-white dark:bg-gray-700/40 border border-gray-200 dark:border-gray-600/50 flex flex-col">
       {/* Week header */}
       <div className="flex border-b border-gray-200 dark:border-gray-700">
         <div className="w-20 p-4 border-r border-gray-200 dark:border-gray-700 flex-shrink-0"></div>
@@ -483,7 +483,7 @@ export const PlanningPage = () => {
             {getWeekDays().map((day, index) => (
               <div
                 key={`${day.toISOString()}-${time}`}
-                className={`flex-1 min-h-[60px] border-r border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer relative ${
+                className={`flex-1 min-h-[60px] border-r border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600/40 cursor-pointer relative ${
                   index === 6 ? "border-r-0" : ""
                 }`}
                 onClick={() => {
@@ -587,7 +587,7 @@ export const PlanningPage = () => {
   );
 
   const renderDayView = () => (
-    <div className="flex-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+    <div className="flex-1 bg-white dark:bg-gray-700/40 border border-gray-200 dark:border-gray-600/50">
       {/* Day header */}
       <div className="p-4 border-b border-gray-200 dark:border-gray-700 text-center">
         <div className="text-sm text-gray-500 dark:text-gray-400 uppercase">
@@ -603,7 +603,7 @@ export const PlanningPage = () => {
         {timeSlots.map((time) => (
           <div
             key={time}
-            className="flex border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer relative min-h-[60px]"
+            className="flex border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600/40 cursor-pointer relative min-h-[60px]"
             onClick={() => {
               const [hour] = time.split(":").map(Number);
               const dateWithTime = new Date(currentDate);
@@ -713,16 +713,13 @@ export const PlanningPage = () => {
   );
 
   return (
-    <div className="min-h-screen bg-gray-100 dark:bg-gray-900">
+    <div className="min-h-screen bg-gray-100 dark:bg-background">
       <div className="flex">
         {/* Sidebar */}
-        <div className="w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 min-h-screen">
+        <div className="w-64 bg-white dark:bg-gray-700/40 border-r border-gray-200 dark:border-gray-600/50 min-h-screen">
           <div className="p-4">
             {/* Tablo Selector */}
             <div className="mb-4">
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Tablo
-              </label>
               <Select
                 placeholder={
                   tablosLoading ? "Chargement..." : "Sélectionner un tablo"
@@ -761,15 +758,15 @@ export const PlanningPage = () => {
                   );
                 }
               }}
-              className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium shadow-sm disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2"
+              className="w-full px-4 py-2 bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity font-medium shadow-sm disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 rounded-lg"
             >
-              <PlusIcon className="w-5 h-5 mr-2" />
+              <PlusIcon className="w-5 h-5 mr-2 text-[#1a1a1a] dark:text-white" />
               <span className="text-sm">Créer un événement</span>
             </button>
 
             <button
               onClick={() => setIsImportModalOpen(true)}
-              className="w-full px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium shadow-sm mt-2 flex items-center justify-center space-x-2"
+              className="w-full px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium shadow-sm mt-2 flex items-center justify-center space-x-2"
             >
               <FolderInputIcon className="w-5 h-5 mr-2" />
               <span className="text-sm">Importer un planning</span>
@@ -794,7 +791,7 @@ export const PlanningPage = () => {
                 <div
                   key={index}
                   className={`text-center p-1 cursor-pointer rounded ${
-                    day ? "hover:bg-gray-100 dark:hover:bg-gray-700" : ""
+                    day ? "hover:bg-gray-100 dark:hover:bg-gray-600/40" : ""
                   } ${
                     day && formatDate(day) === formatDate(new Date())
                       ? "bg-blue-600 text-white"
@@ -818,7 +815,7 @@ export const PlanningPage = () => {
         {/* Main Content */}
         <div className="flex-1 flex flex-col">
           {/* Header */}
-          <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-4">
+          <div className="bg-white dark:bg-gray-700/40 border-b border-gray-200 dark:border-gray-600/50 p-4">
             <div className="flex items-center justify-between">
               <div className="flex items-center space-x-4">
                 <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
diff --git a/ui/src/pages/tablo.tsx b/ui/src/pages/tablo.tsx
index 5ad744c..92dfc35 100644
--- a/ui/src/pages/tablo.tsx
+++ b/ui/src/pages/tablo.tsx
@@ -1,4 +1,3 @@
-import { SignOutButton } from "@ui/components/SignOutButton";
 import { CreateTabloModal } from "@ui/components/CreateTabloModal";
 import { TabloModal } from "@ui/components/TabloModal";
 import { DeleteTabloModal } from "@ui/components/DeleteTabloModal";
@@ -239,11 +238,11 @@ export const TabloPage = () => {
           <div className="flex items-center gap-3">
             <button
               type="button"
-              className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700 hover:shadow-lg hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-md"
+              className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity rounded-md shadow-md"
               onClick={openCreateModal}
             >
               <svg
-                className="w-4 h-4"
+                className="w-4 h-4 text-[#1a1a1a] dark:text-white"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -258,7 +257,6 @@ export const TabloPage = () => {
               </svg>
               <span>Nouveau tablo</span>
             </button>
-            <SignOutButton />
           </div>
         </div>
         <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
@@ -281,11 +279,11 @@ export const TabloPage = () => {
           <div className="flex items-center gap-3">
             <button
               type="button"
-              className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700 hover:shadow-lg hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-md"
+              className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity rounded-md shadow-md"
               onClick={openCreateModal}
             >
               <svg
-                className="w-4 h-4"
+                className="w-4 h-4 text-[#1a1a1a] dark:text-white"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -300,7 +298,6 @@ export const TabloPage = () => {
               </svg>
               <span>Nouveau tablo</span>
             </button>
-            <SignOutButton />
           </div>
         </div>
         <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
@@ -645,12 +642,12 @@ export const TabloPage = () => {
           <button
             id="create-tablo-button"
             type="button"
-            className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700 hover:shadow-lg hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-md"
+            className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity rounded-md shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
             onClick={openCreateModal}
             disabled={createTabloMutation.isPending}
           >
             <svg
-              className="w-4 h-4"
+              className="w-4 h-4 text-[#1a1a1a] dark:text-white"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -667,7 +664,6 @@ export const TabloPage = () => {
               {createTabloMutation.isPending ? "Création..." : "Nouveau tablo"}
             </span>
           </button>
-          <SignOutButton />
         </div>
       </div>
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
@@ -693,11 +689,11 @@ export const TabloPage = () => {
                   <div className="flex justify-center">
                     <button
                       type="button"
-                      className="flex items-center gap-1.5 px-4 py-2 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200"
+                      className="flex items-center gap-1.5 px-4 py-2 text-sm bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity rounded-md shadow-md"
                       onClick={openCreateModal}
                     >
                       <svg
-                        className="w-4 h-4"
+                        className="w-4 h-4 text-[#1a1a1a] dark:text-white"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24"
diff --git a/ui/src/ui-library/theme/index.css b/ui/src/ui-library/theme/index.css
index 2a48f87..ade4799 100644
--- a/ui/src/ui-library/theme/index.css
+++ b/ui/src/ui-library/theme/index.css
@@ -40,7 +40,7 @@
 
 @layer base {
   :root {
-    --background: oklch(1 0 0);
+    --background: #f4f4f4;
     --foreground: oklch(0.141 0.005 285.823);
     --accent: oklch(0.21 0.006 285.885);
     --input: oklch(0.871 0.006 286.286);
@@ -53,7 +53,7 @@
   }
 
   .dark {
-    --background: oklch(0.141 0.005 285.823);
+    --background: #1c1b1f;
     --foreground: oklch(1 0 0);
     --accent: oklch(1 0 0);
     --input: oklch(0.37 0.013 285.805);