Gestion des Thèmes

frontend/src/pages/TaxReport.jsx

@@ -32,12 +32,12 @@ function YearSelector({ annee, setAnnee, availableYears }) {
         onClick={() => setOpen(v => !v)}
         style={{
           height: '100%', boxSizing: 'border-box',
-          background: 'linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%)',
+          background: 'linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%)',
           borderRadius: 10,
           padding: '12px 16px',
           boxShadow: open
-            ? '0 6px 28px rgba(109,40,217,0.45)'
-            : '0 4px 20px rgba(109,40,217,0.30)',
+            ? '0 6px 28px color-mix(in srgb, var(--primary) 45%, transparent)'
+            : '0 4px 20px color-mix(in srgb, var(--primary) 30%, transparent)',
           cursor: 'pointer',
           display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
           userSelect: 'none',
@@ -76,8 +76,8 @@ function YearSelector({ annee, setAnnee, availableYears }) {
                 onClick={() => { setAnnee(String(yr)); setOpen(false); }}
                 style={{
                   padding: '10px 16px', cursor: 'pointer',
-                  background: isActive ? 'rgba(109,40,217,0.08)' : 'transparent',
-                  color: isActive ? '#7c3aed' : 'var(--text)',
+                  background: isActive ? 'color-mix(in srgb, var(--primary) 8%, transparent)' : 'transparent',
+                  color: isActive ? 'var(--primary)' : 'var(--text)',
                   fontWeight: isActive ? 700 : 400,
                   fontSize: 'var(--fs-sm)',
                   borderBottom: i < availableYears.length - 1 ? '1px solid var(--border)' : 'none',
@@ -90,7 +90,7 @@ function YearSelector({ annee, setAnnee, availableYears }) {
                 <span>{yr}</span>
                 {isActive && (
                   <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
-                    stroke="#7c3aed" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                    stroke="var(--primary)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                     <polyline points="20 6 9 17 4 12"/>
                   </svg>
                 )}