feat: Adding color themes + .ignore files update

frontend/css/styles.css

@@ -1,5 +1,86 @@
 @charset "UTF-8";
 
+/* ============================================================
+   Thèmes (dark / light / monokai) — variables CSS consommées
+   par des classes Tailwind arbitraires : bg-[var(--kt-bg)] etc.
+   ============================================================ */
+:root,
+html[data-theme="dark"] {
+  --kt-bg: #0f172a;
+  --kt-surface-1: rgba(30, 41, 59, 0.9);
+  --kt-surface-2: rgba(30, 41, 59, 0.6);
+  --kt-surface-3: rgba(2, 6, 23, 0.8);
+  --kt-surface-modal: #1e293b;
+  --kt-btn-bg: #334155;
+  --kt-btn-bg-hover: #475569;
+  --kt-border: #334155;
+  --kt-border-soft: #1e293b;
+  --kt-text-1: #f1f5f9;
+  --kt-text-2: #cbd5e1;
+  --kt-text-3: #94a3b8;
+  --kt-option-bg: #0f172a;
+  --kt-row-alt-1: rgba(15, 23, 42, 0.3);
+  --kt-row-alt-2: rgba(30, 41, 59, 0.3);
+  --kt-scroll-track: rgba(15, 23, 42, 0.6);
+  --kt-scroll-thumb: rgba(51, 65, 85, 0.8);
+  --kt-scroll-thumb-hover: rgba(100, 116, 139, 1);
+  --kt-chart-grid: rgba(51, 65, 85, 0.4);
+  --kt-chart-text: #94a3b8;
+  --kt-chart-legend: #f8fafc;
+}
+
+html[data-theme="light"] {
+  --kt-bg: #f1f5f9;
+  --kt-surface-1: rgba(255, 255, 255, 0.9);
+  --kt-surface-2: #ffffff;
+  --kt-surface-3: #f8fafc;
+  --kt-surface-modal: #ffffff;
+  --kt-btn-bg: #e2e8f0;
+  --kt-btn-bg-hover: #cbd5e1;
+  --kt-border: #cbd5e1;
+  --kt-border-soft: #e2e8f0;
+  --kt-text-1: #0f172a;
+  --kt-text-2: #334155;
+  --kt-text-3: #64748b;
+  --kt-option-bg: #ffffff;
+  --kt-row-alt-1: rgba(226, 232, 240, 0.35);
+  --kt-row-alt-2: rgba(241, 245, 249, 0.6);
+  --kt-scroll-track: #e2e8f0;
+  --kt-scroll-thumb: #94a3b8;
+  --kt-scroll-thumb-hover: #64748b;
+  --kt-chart-grid: rgba(51, 65, 85, 0.4);
+  --kt-chart-text: #334155;
+  --kt-chart-legend: #0f172a;
+}
+
+html[data-theme="monokai"] {
+  --kt-bg: #272822;
+  --kt-surface-1: rgba(39, 40, 34, 0.92);
+  --kt-surface-2: #2d2e27;
+  --kt-surface-3: #1e1f1a;
+  --kt-surface-modal: #2d2e27;
+  --kt-btn-bg: #3e3d32;
+  --kt-btn-bg-hover: #49483e;
+  --kt-border: #49483e;
+  --kt-border-soft: #3e3d32;
+  --kt-text-1: #f8f8f2;
+  --kt-text-2: #cfcfc2;
+  --kt-text-3: #9d9d93;
+  --kt-option-bg: #272822;
+  --kt-row-alt-1: rgba(30, 31, 26, 0.5);
+  --kt-row-alt-2: rgba(45, 46, 39, 0.5);
+  --kt-scroll-track: #1e1f1a;
+  --kt-scroll-thumb: #49483e;
+  --kt-scroll-thumb-hover: #75715e;
+  --kt-chart-grid: rgba(117, 113, 94, 0.35);
+  --kt-chart-text: #a6a599;
+  --kt-chart-legend: #f8f8f2;
+}
+
+html {
+  background-color: var(--kt-bg);
+}
+
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
@@ -15,18 +96,18 @@ input[type="number"] {
 }
 
 #timelineGrid::-webkit-scrollbar-track {
-  background: rgba(15, 23, 42, 0.6);
+  background: var(--kt-scroll-track);
   border-radius: 9999px;
 }
 
 #timelineGrid::-webkit-scrollbar-thumb {
-  background: rgba(51, 65, 85, 0.8);
+  background: var(--kt-scroll-thumb);
   border-radius: 9999px;
-  border: 2px solid rgba(15, 23, 42, 0.6);
+  border: 2px solid var(--kt-scroll-track);
 }
 
 #timelineGrid::-webkit-scrollbar-thumb:hover {
-  background: rgba(100, 116, 139, 1);
+  background: var(--kt-scroll-thumb-hover);
 }
 
 #modalCalc {
@@ -59,38 +140,3 @@ input[type="number"] {
   }
 }
 
-/* Annulation des flèches sur les numéros */
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-input[type="number"] {
-  -moz-appearance: textfield;
-}
-
-/* Scrollbar timeline */
-#timelineGrid::-webkit-scrollbar {
-  height: 8px;
-}
-#timelineGrid::-webkit-scrollbar-track {
-  background: rgba(15, 23, 42, 0.6);
-  border-radius: 9999px;
-}
-#timelineGrid::-webkit-scrollbar-thumb {
-  background: rgba(51, 65, 85, 0.8);
-  border-radius: 9999px;
-}
-
-/* Transitions modale */
-#modalCalc {
-  transition: opacity 0.2s ease-in-out;
-}
-#modalCalc.hidden {
-  opacity: 0;
-  pointer-events: none;
-}
-#modalCalc:not(.hidden) {
-  opacity: 1;
-  pointer-events: auto;
-}