@pi-spi/app 1.5.1 → 2.0.0

package/src/core/theme.ts

@@ -3,18 +3,11 @@ import { Appearance, type ColorSchemeName, type TextStyle } from 'react-native';
 
 import type { AppLocalizations } from '../l10n/app_localizations';
 
-/** Thèmes du SDK. La valeur de chaque membre est sa codification (persistée dans les préférences). */
+/** Thème d'affichage du SDK : celui du téléphone, clair ou sombre. La valeur de chaque membre est sa codification (persistée dans les préférences). */
 export enum Themes {
   system = 'System',
   light = 'lightTheme',
   dark = 'darkTheme',
-  yellow = 'yellowTheme',
-  green = 'greenTheme',
-  blue = 'blueTheme',
-  red = 'redTheme',
-  orange = 'orangeTheme',
-  purple = 'purpleTheme',
-  pink = 'pinkTheme',
 }
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -26,18 +19,7 @@ export namespace Themes {
   }
 
   export function list(): Themes[] {
-    return [
-      Themes.system,
-      Themes.light,
-      Themes.dark,
-      Themes.yellow,
-      Themes.green,
-      Themes.blue,
-      Themes.red,
-      Themes.orange,
-      Themes.purple,
-      Themes.pink,
-    ];
+    return [Themes.system, Themes.light, Themes.dark];
   }
 
   /** Libellé traduit du thème. */
@@ -47,26 +29,173 @@ export namespace Themes {
         return traductions.appSettingPageMenuThemeLight;
       case Themes.dark:
         return traductions.appSettingPageMenuThemeDark;
-      case Themes.yellow:
-        return traductions.appSettingPageMenuThemeYellow;
-      case Themes.green:
-        return traductions.appSettingPageMenuThemeGreen;
-      case Themes.blue:
-        return traductions.appSettingPageMenuThemeBlue;
-      case Themes.red:
-        return traductions.appSettingPageMenuThemeRed;
-      case Themes.orange:
-        return traductions.appSettingPageMenuThemeOrange;
-      case Themes.purple:
-        return traductions.appSettingPageMenuThemePurple;
-      case Themes.pink:
-        return traductions.appSettingPageMenuThemePink;
       default:
         return traductions.appSettingPageMenuThemeDefault;
     }
   }
 }
 
+/** Teintes d'une couleur d'accentuation pour un thème clair ou sombre. */
+export type AccentTeintes = {
+  /** Boutons, interrupteurs, champ actif */
+  accent: string;
+  /** Texte et icônes posés sur [accent] (noir ou blanc selon le contraste) */
+  surAccent: string;
+  /** [accent] quand le bouton est pressé */
+  appui: string;
+  /** Liens et textes en couleur sur le fond de page */
+  texte: string;
+  /** Fonds teintés : pastilles, puces choisies */
+  conteneur: string;
+  /** Texte et icônes posés sur [conteneur] */
+  surConteneur: string;
+  /** Boutons secondaires (feuilles d'erreur, de succès…) */
+  tertiaire: string;
+};
+
+/**
+ * Couleur d'accentuation, indépendante du thème clair ou sombre. Chaque
+ * couleur a une teinte pour le clair et une, plus lumineuse, pour le
+ * sombre ; contrastes vérifiés (texte ≥ 4,5:1, bouton ≥ 3:1).
+ */
+export enum Accents {
+  pispi = 'pispi',
+  vert = 'vert',
+  bleu = 'bleu',
+  rouge = 'rouge',
+  orange = 'orange',
+  violet = 'violet',
+  rose = 'rose',
+  turquoise = 'turquoise',
+  terracotta = 'terracotta',
+  bordeaux = 'bordeaux',
+  ardoise = 'ardoise',
+}
+
+const teintes = (
+  accent: string,
+  surAccent: string,
+  appui: string,
+  texte: string,
+  conteneur: string,
+  surConteneur: string,
+  tertiaire: string,
+): AccentTeintes => ({ accent, surAccent, appui, texte, conteneur, surConteneur, tertiaire });
+
+const ACCENTS: Record<Accents, { clair: AccentTeintes; sombre: AccentTeintes }> = {
+  [Accents.pispi]: {
+    clair: teintes('#F2A900', '#000000', '#E1A009', '#9A6B00', '#F9EBC2', '#000000', '#FFD573'),
+    sombre: teintes('#F2A900', '#1B1916', '#D99A06', '#F2A900', '#4A3B1C', '#FFDE9A', '#4A3B1C'),
+  },
+  [Accents.vert]: {
+    clair: teintes('#43A047', '#000000', '#388E3C', '#2E7D32', '#D9F2D6', '#1B4D1E', '#A5D6A7'),
+    sombre: teintes('#66BB6A', '#1B1916', '#57A85B', '#66BB6A', '#1F3A20', '#B4E6B1', '#1F3A20'),
+  },
+  [Accents.bleu]: {
+    clair: teintes('#3B63DB', '#FFFFFF', '#3254BA', '#3B63DB', '#DCE4FB', '#1C3378', '#7390E6'),
+    sombre: teintes('#7B9BFF', '#1B1916', '#6A88E6', '#7B9BFF', '#1F2A4D', '#C7D3FF', '#1F2A4D'),
+  },
+  [Accents.rouge]: {
+    clair: teintes('#C62828', '#FFFFFF', '#A82222', '#C62828', '#F9D3D3', '#6E1414', '#E57373'),
+    sombre: teintes('#EF6F6C', '#1B1916', '#D96260', '#EF6F6C', '#4A1F1E', '#FFC9C7', '#4A1F1E'),
+  },
+  [Accents.orange]: {
+    clair: teintes('#EF6C00', '#000000', '#D45F00', '#B85300', '#FFE0B2', '#6B3300', '#FFB74D'),
+    sombre: teintes('#FF9A3D', '#1B1916', '#E6893A', '#FF9A3D', '#4A2E14', '#FFD3A8', '#4A2E14'),
+  },
+  [Accents.violet]: {
+    clair: teintes('#6A1B9A', '#FFFFFF', '#5A1783', '#6A1B9A', '#EBD7F3', '#3D0E5A', '#BA68C8'),
+    sombre: teintes('#C08BE0', '#1B1916', '#AD7BCB', '#C08BE0', '#37224A', '#EAD2FA', '#37224A'),
+  },
+  [Accents.rose]: {
+    clair: teintes('#AD1457', '#FFFFFF', '#93114A', '#AD1457', '#F8D3E1', '#5E0B2F', '#F06292'),
+    sombre: teintes('#F06C9B', '#1B1916', '#D85F8A', '#F06C9B', '#4A1E30', '#FFC8DB', '#4A1E30'),
+  },
+  [Accents.turquoise]: {
+    clair: teintes('#00897B', '#000000', '#00796B', '#00796B', '#D2EEEB', '#004D45', '#80CBC4'),
+    sombre: teintes('#4DB6AC', '#1B1916', '#42A39A', '#4DB6AC', '#173A37', '#B2E8E2', '#173A37'),
+  },
+  [Accents.terracotta]: {
+    clair: teintes('#C2562E', '#000000', '#A8461F', '#A8461F', '#F8DDD2', '#6B2A12', '#F4A585'),
+    sombre: teintes('#F08A62', '#1B1916', '#D97A55', '#F08A62', '#4A2A1E', '#FFD2C0', '#4A2A1E'),
+  },
+  [Accents.bordeaux]: {
+    clair: teintes('#8E2440', '#FFFFFF', '#761E35', '#8E2440', '#F3D3DC', '#4F1022', '#D98EA2'),
+    sombre: teintes('#E57A95', '#1B1916', '#CE6D85', '#E57A95', '#47212B', '#FFCCD9', '#47212B'),
+  },
+  [Accents.ardoise]: {
+    clair: teintes('#546E7A', '#FFFFFF', '#455A64', '#546E7A', '#DDE5E9', '#263238', '#B0BEC5'),
+    sombre: teintes('#90A4AE', '#1B1916', '#7F929B', '#90A4AE', '#2C3438', '#D6E2E8', '#2C3438'),
+  },
+};
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace Accents {
+  /** Couleur de base de PI-SPI */
+  export const parDefaut = Accents.pispi;
+
+  /** Couleur correspondant à [code] (`Accents.pispi` si inconnu ou absent). */
+  export function fromCode(code: string | null | undefined): Accents {
+    if (code == null) return parDefaut;
+    return (list() as string[]).includes(code) ? (code as Accents) : parDefaut;
+  }
+
+  export function list(): Accents[] {
+    return [
+      Accents.pispi,
+      Accents.vert,
+      Accents.bleu,
+      Accents.rouge,
+      Accents.orange,
+      Accents.violet,
+      Accents.rose,
+      Accents.turquoise,
+      Accents.terracotta,
+      Accents.bordeaux,
+      Accents.ardoise,
+    ];
+  }
+
+  /** Teintes en thème clair */
+  export function clair(accent: Accents): AccentTeintes {
+    return ACCENTS[accent].clair;
+  }
+
+  /** Teintes en thème sombre */
+  export function sombre(accent: Accents): AccentTeintes {
+    return ACCENTS[accent].sombre;
+  }
+
+  /** Libellé traduit de la couleur. */
+  export function label(accent: Accents, traductions: AppLocalizations): string {
+    switch (accent) {
+      case Accents.vert:
+        return traductions.appSettingPageAccentVert;
+      case Accents.bleu:
+        return traductions.appSettingPageAccentBleu;
+      case Accents.rouge:
+        return traductions.appSettingPageAccentRouge;
+      case Accents.orange:
+        return traductions.appSettingPageAccentOrange;
+      case Accents.violet:
+        return traductions.appSettingPageAccentViolet;
+      case Accents.rose:
+        return traductions.appSettingPageAccentRose;
+      case Accents.turquoise:
+        return traductions.appSettingPageAccentTurquoise;
+      case Accents.terracotta:
+        return traductions.appSettingPageAccentTerracotta;
+      case Accents.bordeaux:
+        return traductions.appSettingPageAccentBordeaux;
+      case Accents.ardoise:
+        return traductions.appSettingPageAccentArdoise;
+      default:
+        // Couleur de base de PI-SPI, proposée comme « Défaut »
+        return traductions.appSettingPageAccentDefaut;
+    }
+  }
+}
+
 export type Brightness = 'light' | 'dark';
 
 export interface ColorScheme {
@@ -172,26 +301,6 @@ export interface ThemeData {
   chipTheme: { borderRadius: number; labelStyle: TextStyle };
 }
 
-/** Valeurs qui varient d'un thème à l'autre (le reste est commun, comme dans theme.dart). */
-type ThemeSpec = {
-  dark: boolean;
-  primaryColor: string;
-  primaryColorDark: string;
-  secondaryHeaderColor: string;
-  schemePrimary: string;
-  schemeOnPrimary: string;
-  schemeSecondary: string;
-  schemeTertiary: string;
-  iconColor: string;
-  focusedBorderColor: string;
-  buttonPressed: string;
-  buttonBackground: string;
-  buttonForeground: string;
-  textButtonColor: string;
-  textButtonOverlay: string;
-  switchActiveTrack: string;
-};
-
 const fontSize = (size: number, weight: TextStyle['fontWeight'], height?: number): TextStyle => ({
   fontSize: size,
   fontWeight: weight,
@@ -214,20 +323,53 @@ export class Themer {
   /** Couleur jaune */
   static readonly amberColor = '#F2A900';
 
-  /** Couleur neural 01 */
-  static readonly neural01Color = '#E6E4E2';
+  // Nuances neutres du thème clair (du plus clair au plus foncé)
+  private static readonly neural01Light = '#E6E4E2';
+  private static readonly neural02Light = '#BDBDBB';
+  private static readonly neural03Light = '#8B887E';
+  private static readonly neural04Light = '#615D52';
+  private static readonly neural05Light = '#5C5451';
+
+  // Les mêmes nuances en thème sombre, inversées : 01 reste la nuance
+  // discrète (traits, fonds), 03 et 04 les textes secondaires
+  private static readonly neural01Dark = '#4A453E';
+  private static readonly neural02Dark = '#6F6A60';
+  private static readonly neural03Dark = '#A8A297';
+  private static readonly neural04Dark = '#BDB7AC';
+  private static readonly neural05Dark = '#C4BDB2';
+
+  /** Luminosité du thème affiché, mise à jour par {@link suivreLuminosite} */
+  private static luminosite: Brightness = 'light';
+
+  /** À appeler avec la luminosité du thème affiché : adapte les couleurs neutres ci-dessous. */
+  static suivreLuminosite(luminosite: Brightness): void {
+    Themer.luminosite = luminosite;
+  }
+
+  /** Couleur neural 01 : traits et fonds discrets */
+  static get neural01Color(): string {
+    return Themer.luminosite === 'dark' ? Themer.neural01Dark : Themer.neural01Light;
+  }
 
-  /** Couleur neural 02 */
-  static readonly neural02Color = '#BDBDBB';
+  /** Couleur neural 02 : textes désactivés, indications */
+  static get neural02Color(): string {
+    return Themer.luminosite === 'dark' ? Themer.neural02Dark : Themer.neural02Light;
+  }
 
-  /** Couleur neural 03 */
-  static readonly neural03Color = '#8B887E';
+  /** Couleur neural 03 : textes secondaires */
+  static get neural03Color(): string {
+    return Themer.luminosite === 'dark' ? Themer.neural03Dark : Themer.neural03Light;
+  }
 
-  /** Couleur neural 04 */
-  static readonly neural04Color = '#615D52';
+  /** Couleur neural 04 : textes secondaires plus marqués */
+  static get neural04Color(): string {
+    return Themer.luminosite === 'dark' ? Themer.neural04Dark : Themer.neural04Light;
+  }
 
   /** Couleur neural 05 */
-  static readonly neural05Color = '#5C5451';
+  static get neural05Color(): string {
+    return Themer.luminosite === 'dark' ? Themer.neural05Dark : Themer.neural05Light;
+  }
 
   /** Primary */
   static readonly primary = '#F2A900';
@@ -257,41 +399,52 @@ export class Themer {
   /** primary small btn height */
   static readonly btnSmallHeight = 38;
 
-  private static build(spec: ThemeSpec): ThemeData {
+  // Thème sombre « soft » : fonds brun-gris chauds qui s'éclaircissent avec
+  // l'élévation (page < feuille < carte < champ), texte blanc cassé
+  private static readonly darkBackground = '#1B1916';
+  private static readonly darkSurface = '#24211E';
+  private static readonly darkCard = '#2C2925';
+  private static readonly darkInput = '#35312C';
+  private static readonly darkOutline = '#4A453E';
+  private static readonly darkText = '#ECE8E1';
+  private static readonly darkTextSecondary = '#A8A297';
+  private static readonly darkTextDisabled = '#6F6A60';
+
+  /** Thème clair ou sombre teinté par la couleur d'accentuation [a]. */
+  private static build(dark: boolean, a: AccentTeintes): ThemeData {
     const T = Themer;
-    const dark = spec.dark;
-    const textColor = dark ? T.whiteColor : T.blackColor;
-    const onColor = dark ? T.whiteColor : T.blackColor;
-    const surface = dark ? '#181612' : T.whiteColor;
-    const card = dark ? '#23211D' : '#FAF8F6';
+    const textColor = dark ? T.darkText : T.blackColor;
+    const surface = dark ? T.darkSurface : T.whiteColor;
+    const card = dark ? T.darkCard : '#FAF8F6';
+    const background = dark ? T.darkBackground : T.whiteColor;
     const text = (style: TextStyle): TextStyle => ({ color: textColor, ...style });
 
     return {
       brightness: dark ? 'dark' : 'light',
-      primaryColor: spec.primaryColor,
-      primaryColorDark: spec.primaryColorDark,
-      secondaryHeaderColor: spec.secondaryHeaderColor,
+      primaryColor: a.accent,
+      primaryColorDark: a.texte,
+      secondaryHeaderColor: a.conteneur,
       cardColor: card,
-      scaffoldBackgroundColor: dark ? '#2E2B26' : T.whiteColor,
-      dialogSurfaceTintColor: dark ? '#2E2B26' : T.whiteColor,
+      scaffoldBackgroundColor: background,
+      dialogSurfaceTintColor: dark ? T.darkSurface : T.whiteColor,
       colorScheme: {
         brightness: dark ? 'dark' : 'light',
-        primary: spec.schemePrimary,
-        onPrimary: spec.schemeOnPrimary,
-        secondary: spec.schemeSecondary,
-        onSecondary: onColor,
-        tertiary: spec.schemeTertiary,
-        onTertiary: onColor,
+        primary: a.accent,
+        onPrimary: a.surAccent,
+        secondary: a.conteneur,
+        onSecondary: a.surConteneur,
+        tertiary: a.tertiaire,
+        onTertiary: dark ? a.surConteneur : T.blackColor,
         error: T.systemErrorColor,
-        onError: onColor,
+        onError: dark ? T.darkBackground : T.blackColor,
         surface,
-        onSurface: onColor,
+        onSurface: textColor,
       },
       appBarTheme: {
-        backgroundColor: dark ? '#23211D' : T.whiteColor,
+        backgroundColor: background,
         foregroundColor: textColor,
       },
-      primaryIconColor: spec.iconColor,
+      primaryIconColor: a.accent,
       textTheme: {
         titleLarge: text(fontSize(32, '600')),
         titleMedium: text(fontSize(32, '400')),
@@ -304,7 +457,7 @@ export class Themer {
         bodySmall: text(fontSize(15, '500')),
         displayLarge: text(fontSize(15, '400', 1.4)),
         displayMedium: text(fontSize(13, '500')),
-        displaySmall: { ...text(fontSize(13, '400', 1.4)), color: T.neural04Color },
+        displaySmall: { ...text(fontSize(13, '400', 1.4)), color: dark ? T.darkTextSecondary : T.neural04Light },
         labelLarge: text(fontSize(12, '400')),
         labelMedium: text(fontSize(11, '400')),
       },
@@ -313,232 +466,184 @@ export class Themer {
       inputDecorationTheme: {
         paddingHorizontal: 16,
         paddingVertical: 5,
-        fillColor: dark ? '#333333' : '#FAF8F6',
+        fillColor: dark ? T.darkInput : '#FAF8F6',
         borderRadius: 10,
-        focusedBorderColor: spec.focusedBorderColor,
+        focusedBorderColor: a.accent,
         errorBorderColor: T.systemErrorColor,
-        floatingLabelStyle: { color: dark ? '#9E9E9E' : T.neural04Color, fontSize: 13, fontWeight: '400' },
-        labelStyle: { color: dark ? '#9E9E9E' : T.neural03Color, fontSize: 17 },
-        hintStyle: { color: dark ? '#EEEEEE' : T.neural02Color, fontSize: 17 },
+        floatingLabelStyle: { color: dark ? T.darkTextSecondary : T.neural04Light, fontSize: 13, fontWeight: '400' },
+        labelStyle: { color: dark ? T.darkTextSecondary : T.neural03Light, fontSize: 17 },
+        hintStyle: { color: dark ? T.darkTextDisabled : T.neural02Light, fontSize: 17 },
         errorStyle: { color: T.systemErrorColor, fontSize: 12 },
         errorMaxLines: 3,
-        suffixIconColor: dark ? '#B1ADA0' : '#8B887E',
+        suffixIconColor: dark ? T.darkTextSecondary : '#8B887E',
       },
       elevatedButtonTheme: {
-        backgroundColor: spec.buttonBackground,
-        pressedBackgroundColor: spec.buttonPressed,
-        disabledBackgroundColor: dark ? '#2E2E2E' : '#F5F5F1',
-        foregroundColor: spec.buttonForeground,
-        disabledForegroundColor: dark ? '#B1ADA0' : T.neural03Color,
+        backgroundColor: a.accent,
+        pressedBackgroundColor: a.appui,
+        disabledBackgroundColor: dark ? T.darkCard : '#F5F5F1',
+        foregroundColor: a.surAccent,
+        disabledForegroundColor: dark ? T.darkTextDisabled : T.neural03Light,
         minHeight: T.btnNormalHeight,
         borderRadius: 20,
-        textStyle: { color: spec.buttonForeground, fontSize: 17, fontWeight: '600' },
+        textStyle: { color: a.surAccent, fontSize: 17, fontWeight: '600' },
       },
       textButtonTheme: {
-        foregroundColor: spec.textButtonColor,
-        overlayColor: spec.textButtonOverlay,
-        textStyle: { color: spec.textButtonColor, fontSize: 17, fontWeight: '400' },
+        foregroundColor: a.texte,
+        overlayColor: dark ? `${a.accent}1F` : a.conteneur,
+        textStyle: { color: a.texte, fontSize: 17, fontWeight: '400' },
         minWidth: 55,
         minHeight: 26,
       },
       switchTheme: {
-        thumbColor: dark ? '#23211D' : T.whiteColor,
-        activeTrackColor: spec.switchActiveTrack,
-        inactiveTrackColor: dark ? T.neural04Color : T.neural01Color,
+        thumbColor: dark ? T.darkTextSecondary : T.whiteColor,
+        activeTrackColor: a.accent,
+        inactiveTrackColor: dark ? T.darkOutline : T.neural01Light,
       },
       filledButtonTheme: {
-        foregroundColor: textColor,
-        disabledForegroundColor: dark ? '#B1ADA0' : T.neural03Color,
+        foregroundColor: a.surAccent,
+        disabledForegroundColor: dark ? T.darkTextDisabled : T.neural03Light,
         minHeight: T.btnNormalHeight,
         borderRadius: 20,
-        textStyle: { color: textColor, fontSize: 17, fontWeight: '600' },
+        textStyle: { color: a.surAccent, fontSize: 17, fontWeight: '600' },
       },
       snackBarTheme: { backgroundColor: T.systemErrorColor, margin: 10 },
       checkboxTheme: {
         borderRadius: 6,
-        checkColor: dark ? '#181612' : T.whiteColor,
-        borderColor: T.neural02Color,
+        checkColor: a.surAccent,
+        borderColor: dark ? T.darkTextDisabled : T.neural02Light,
         borderWidth: 2,
       },
       chipTheme: { borderRadius: 16, labelStyle: { color: textColor, fontSize: 14, fontWeight: '500' } },
     };
   }
 
-  /** Thème par défaut : jaune PI-SPI sur fond blanc */
-  private static readonly defaultSpec: ThemeSpec = {
-    dark: false,
-    primaryColor: Themer.primary,
-    primaryColorDark: Themer.primaryDark,
-    secondaryHeaderColor: Themer.primaryLight,
-    schemePrimary: Themer.primary,
-    schemeOnPrimary: Themer.blackColor,
-    schemeSecondary: Themer.primaryLight,
-    schemeTertiary: Themer.primaryStroke,
-    iconColor: Themer.primary,
-    focusedBorderColor: Themer.primary,
-    buttonPressed: '#E1A009',
-    buttonBackground: Themer.primary,
-    buttonForeground: Themer.blackColor,
-    textButtonColor: Themer.primaryDark,
-    textButtonOverlay: Themer.primaryLight,
-    switchActiveTrack: Themer.primary,
-  };
+  /** Thèmes déjà construits, par luminosité et couleur d'accentuation */
+  private static readonly themes = new Map<string, ThemeData>();
 
-  /** Code enregistré comme thème préféré quand l'hôte fournit un thème personnalisé (`PiSpiAppConfig.customTheme`). */
-  static readonly customThemeCode = 'customTheme';
+  /** Thème clair teinté par la couleur d'accentuation [accent] */
+  static clair(accent?: string | null): ThemeData {
+    const a = Accents.fromCode(accent);
+    const cle = `clair-${a}`;
+    if (!Themer.themes.has(cle)) Themer.themes.set(cle, Themer.build(false, Accents.clair(a)));
+    return Themer.themes.get(cle)!;
+  }
 
-  /** Thème personnalisé de l'hôte, construit à l'ouverture du SDK (voir `Di.init`) ; `null` sans thème personnalisé. */
-  static customTheme: ThemeData | null = null;
+  /** Thème sombre teinté par la couleur d'accentuation [accent] */
+  static sombre(accent?: string | null): ThemeData {
+    const a = Accents.fromCode(accent);
+    const cle = `sombre-${a}`;
+    if (!Themer.themes.has(cle)) Themer.themes.set(cle, Themer.build(true, Accents.sombre(a)));
+    return Themer.themes.get(cle)!;
+  }
+
+  /** Code enregistré comme couleur d'accentuation quand l'hôte fournit un thème personnalisé (`PiSpiAppConfig.customTheme`). */
+  static readonly customAccentCode = 'application';
+
+  /** Teintes de la couleur de l'hôte (claire puis sombre), définies à l'ouverture du SDK (voir `Di.init`) ; `null` sans thème personnalisé. */
+  static customAccent: { clair: AccentTeintes; sombre: AccentTeintes } | null = null;
+
+  /** Thème complet fourni par l'hôte (`PiSpiCustomTheme.themeData`) : il remplace alors les thèmes clair et sombre du SDK. */
+  static customThemeData: ThemeData | null = null;
+
+  /** L'hôte a fourni un thème personnalisé */
+  static get hasCustomTheme(): boolean {
+    return Themer.customAccent != null || Themer.customThemeData != null;
+  }
 
   /**
-   * Thème clair construit à partir de couleurs (thème personnalisé de
-   * l'hôte, voir `PiSpiCustomTheme`) : même modèle que les thèmes rouge,
-   * violet ou rose, avec le texte des boutons en blanc ou en noir selon la
-   * luminosité de [primary].
+   * Teintes claire et sombre dérivées des couleurs de l'hôte : texte posé
+   * sur la couleur en noir ou blanc selon son contraste, teinte plus
+   * lumineuse en sombre.
    */
-  static colored(primary: string, secondary: string, tertiary: string, pressed: string): ThemeData {
-    const onPrimary = relativeLuminance(primary) > 0.5 ? Themer.blackColor : Themer.whiteColor;
-    return Themer.build(
-      Themer.coloredSpec(primary, secondary, tertiary, {
-        schemeOnPrimary: onPrimary,
-        buttonPressed: pressed,
-        buttonForeground: onPrimary,
-      }),
-    );
+  static teintesDepuis(
+    primary: string,
+    secondary?: string,
+    tertiary?: string,
+    pressed?: string,
+  ): { clair: AccentTeintes; sombre: AccentTeintes } {
+    const sur = (fond: string, fonce: string) =>
+      contrast(fonce, fond) >= contrast(Themer.whiteColor, fond) ? fonce : Themer.whiteColor;
+    // Lien lisible sur fond blanc (4,5:1), sinon couleur assombrie
+    let texte = primary;
+    for (let i = 1; i <= 6 && contrast(texte, Themer.whiteColor) < 4.5; i++) {
+      texte = lerpColor(primary, Themer.blackColor, i * 0.1);
+    }
+    const clair: AccentTeintes = {
+      accent: primary,
+      surAccent: sur(primary, Themer.blackColor),
+      appui: pressed ?? lerpColor(primary, Themer.blackColor, 0.2),
+      texte,
+      conteneur: secondary ?? lerpColor(primary, Themer.whiteColor, 0.75),
+      surConteneur: Themer.blackColor,
+      tertiaire: tertiary ?? lerpColor(primary, Themer.whiteColor, 0.4),
+    };
+    // En sombre : couleur éclaircie jusqu'à 3:1 sur le fond
+    let fonce = primary;
+    for (let i = 1; i <= 6 && contrast(fonce, Themer.darkBackground) < 3; i++) {
+      fonce = lerpColor(primary, Themer.whiteColor, i * 0.1);
+    }
+    const conteneur = lerpColor(Themer.darkBackground, primary, 0.3);
+    const sombre: AccentTeintes = {
+      accent: fonce,
+      surAccent: sur(fonce, Themer.darkBackground),
+      appui: lerpColor(fonce, Themer.blackColor, 0.1),
+      texte: fonce,
+      conteneur,
+      surConteneur: lerpColor(fonce, Themer.whiteColor, 0.6),
+      tertiaire: conteneur,
+    };
+    return { clair, sombre };
   }
 
-  /** Variante claire monochrome (même structure pour jaune, bleu, vert, rouge, orange, violet). */
-  private static coloredSpec(
-    main: string,
-    secondary: string,
-    tertiary: string,
-    options: Partial<ThemeSpec> = {},
-  ): ThemeSpec {
-    return {
-      ...Themer.defaultSpec,
-      primaryColor: main,
-      primaryColorDark: main,
-      secondaryHeaderColor: secondary,
-      schemePrimary: main,
-      schemeSecondary: secondary,
-      schemeTertiary: tertiary,
-      iconColor: main,
-      focusedBorderColor: main,
-      buttonPressed: main,
-      buttonBackground: main,
-      textButtonColor: main,
-      textButtonOverlay: main,
-      switchActiveTrack: main,
-      ...options,
-    };
+  /** Thème construit sur les teintes [a] (clair, ou sombre si [dark]) */
+  static depuisTeintes(a: AccentTeintes, dark = false): ThemeData {
+    return Themer.build(dark, a);
   }
 
-  /** Light theme data */
-  static readonly lightTheme: ThemeData = Themer.build(Themer.defaultSpec);
-
-  /** Dark theme */
-  static readonly darkTheme: ThemeData = Themer.build({
-    ...Themer.defaultSpec,
-    dark: true,
-    secondaryHeaderColor: Themer.primaryStroke,
-    schemeOnPrimary: Themer.whiteColor,
-    schemeSecondary: Themer.primaryStroke,
-    buttonForeground: Themer.whiteColor,
-  });
+  /** Libellé de la couleur d'accentuation [code], y compris celle de l'hôte */
+  static accentLabel(traductions: AppLocalizations, code: string | null | undefined): string {
+    if (code === Themer.customAccentCode && Themer.hasCustomTheme) return traductions.appSettingPageMenuThemeCustom;
+    return Accents.label(Accents.fromCode(code), traductions);
+  }
+
+  /** Thème clair avec la couleur PI-SPI */
+  static get lightTheme(): ThemeData {
+    return Themer.clair();
+  }
 
-  /** Light Yellow theme data */
-  static readonly lightYellowTheme: ThemeData = Themer.build(
-    Themer.coloredSpec('#F3DC88', '#FAF0C8', '#F6E5A8', { textButtonOverlay: Themer.primaryLight }),
-  );
-
-  /** Light Blue theme data */
-  static readonly lightBlueTheme: ThemeData = Themer.build(
-    Themer.coloredSpec('#3B63DB', '#A5B9F7', '#7390E6', { schemeOnPrimary: Themer.whiteColor }),
-  );
-
-  /** Light Green theme data */
-  static readonly lightGreenTheme: ThemeData = Themer.build(
-    Themer.coloredSpec('#9FF796', '#D9FDD6', '#BAFAB6', {
-      primaryColor: '#7FC077',
-      primaryColorDark: '#7FC077',
-      buttonPressed: '#E1A009',
-      textButtonColor: '#7FC077',
-      textButtonOverlay: '#7FC077',
-    }),
-  );
-
-  /** Light Red theme data */
-  static readonly lightRedTheme: ThemeData = Themer.build(
-    Themer.coloredSpec('#C62828', '#F9CFCF', '#E57373', {
-      schemeOnPrimary: Themer.whiteColor,
-      buttonPressed: '#B71C1C',
-      buttonForeground: Themer.whiteColor,
-    }),
-  );
-
-  /** Light Orange theme data */
-  static readonly lightOrangeTheme: ThemeData = Themer.build(
-    Themer.coloredSpec('#EF6C00', '#FFE0B2', '#FFB74D', {
-      schemeOnPrimary: Themer.whiteColor,
-      buttonPressed: '#E65100',
-      buttonForeground: Themer.whiteColor,
-    }),
-  );
-
-  /** Light Purple theme data */
-  static readonly lightPurpleTheme: ThemeData = Themer.build(
-    Themer.coloredSpec('#6A1B9A', '#E1BEE7', '#BA68C8', {
-      schemeOnPrimary: Themer.whiteColor,
-      buttonPressed: '#4A148C',
-      buttonForeground: Themer.whiteColor,
-    }),
-  );
-
-  /** Light Pink theme data */
-  static readonly lightPinkTheme: ThemeData = Themer.build(
-    Themer.coloredSpec('#AD1457', '#F8BBD0', '#F06292', {
-      schemeOnPrimary: Themer.whiteColor,
-      buttonPressed: '#880E4F',
-      buttonForeground: Themer.whiteColor,
-    }),
-  );
+  /** Thème sombre avec la couleur PI-SPI */
+  static get darkTheme(): ThemeData {
+    return Themer.sombre();
+  }
 
   /**
-   * Méthode qui retourne un thème demandé. Pour `Themes.system`,
-   * [systemScheme] (ex. `useColorScheme()`) prime sur la valeur lue
-   * ponctuellement via `Appearance`.
+   * Thème à afficher : [code] (système, clair ou sombre) teinté par la
+   * couleur d'accentuation [accent]. Pour `Themes.system`, [systemScheme]
+   * (ex. `useColorScheme()`) prime sur la valeur lue ponctuellement via
+   * `Appearance`.
    */
-  static get(code: string | null | undefined, systemScheme?: ColorSchemeName | null): ThemeData {
-    // Thème personnalisé de l'hôte
-    if (code === Themer.customThemeCode && Themer.customTheme != null) return Themer.customTheme;
-    switch (code) {
-      case Themes.light:
-        return Themer.lightTheme;
-      case Themes.dark:
-        return Themer.darkTheme;
-      case Themes.yellow:
-        return Themer.lightYellowTheme;
-      case Themes.green:
-        return Themer.lightGreenTheme;
-      case Themes.blue:
-        return Themer.lightBlueTheme;
-      case Themes.red:
-        return Themer.lightRedTheme;
-      case Themes.orange:
-        return Themer.lightOrangeTheme;
-      case Themes.purple:
-        return Themer.lightPurpleTheme;
-      case Themes.pink:
-        return Themer.lightPinkTheme;
-      // Système
-      case Themes.system: {
-        const brightness = systemScheme === 'light' || systemScheme === 'dark' ? systemScheme : Appearance.getColorScheme();
-        return brightness === 'dark' ? Themer.darkTheme : Themer.lightTheme;
-      }
-      // Default theme
-      default:
-        return Themer.lightTheme;
+  static get(code: string | null | undefined, accent?: string | null, systemScheme?: ColorSchemeName | null): ThemeData {
+    const theme = Themes.fromCode(code);
+    let dark = theme === Themes.dark;
+    if (theme === Themes.system) {
+      const brightness = systemScheme === 'light' || systemScheme === 'dark' ? systemScheme : Appearance.getColorScheme();
+      dark = brightness === 'dark';
+    }
+    // Thème complet ou couleur du thème personnalisé de l'hôte
+    if (accent === Themer.customAccentCode && Themer.customThemeData != null) return Themer.customThemeData;
+    const perso = Themer.customAccent;
+    if (accent === Themer.customAccentCode && perso != null) {
+      const cle = `${dark ? 'sombre' : 'clair'}-${Themer.customAccentCode}`;
+      if (!Themer.themes.has(cle)) Themer.themes.set(cle, Themer.build(dark, dark ? perso.sombre : perso.clair));
+      return Themer.themes.get(cle)!;
     }
+    return dark ? Themer.sombre(accent) : Themer.clair(accent);
+  }
+
+  /** Oublie les thèmes construits avec la couleur de l'hôte (nouvelle ouverture du SDK) */
+  static resetCustomThemes(): void {
+    Themer.themes.delete(`clair-${Themer.customAccentCode}`);
+    Themer.themes.delete(`sombre-${Themer.customAccentCode}`);
   }
 }
 
@@ -576,3 +681,10 @@ export function relativeLuminance(hex: string): number {
   });
   return 0.2126 * r + 0.7152 * g + 0.0722 * b;
 }
+
+/** Ratio de contraste WCAG entre deux couleurs */
+export function contrast(a: string, b: string): number {
+  const la = relativeLuminance(a);
+  const lb = relativeLuminance(b);
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}