@pi-spi/app 1.6.0 → 2.0.0

package/src/index.ts

@@ -22,7 +22,7 @@ export {
   type PiSpiLogLevel,
 } from './core/pi_spi_sdk_config';
 export { PiSpiCustomTheme } from './core/pi_spi_custom_theme';
-export { Themes, type ThemeData } from './core/theme';
+export { Accents, Themes, type ThemeData } from './core/theme';
 export {
   type AppLocalizations,
   type SupportedLocaleCode,

package/src/l10n/app_localizations.ts

@@ -915,6 +915,8 @@ export interface AppLocalizations {
   readonly transactionDetailsCancelRejectMessage: string;
   /** Send receipt */
   readonly transactionDetailsRecuTitle: string;
+  /** Issued on: */
+  readonly transactionDetailsRecuPdfEditeLe: string;
   /** You can download or share the PDF file */
   readonly transactionDetailsRecuSubTitle: string;
   /** Identifier */
@@ -1215,6 +1217,32 @@ export interface AppLocalizations {
   readonly appSettingPageMenuThemeDefault: string;
   /** Apparence */
   readonly appSettingPageMenuThemePageTitle: string;
+  /** Theme */
+  readonly appSettingPageThemeSection: string;
+  /** Accent colour */
+  readonly appSettingPageAccentSection: string;
+  /** Default */
+  readonly appSettingPageAccentDefaut: string;
+  /** Green */
+  readonly appSettingPageAccentVert: string;
+  /** Blue */
+  readonly appSettingPageAccentBleu: string;
+  /** Red */
+  readonly appSettingPageAccentRouge: string;
+  /** Orange */
+  readonly appSettingPageAccentOrange: string;
+  /** Purple */
+  readonly appSettingPageAccentViolet: string;
+  /** Pink */
+  readonly appSettingPageAccentRose: string;
+  /** Turquoise */
+  readonly appSettingPageAccentTurquoise: string;
+  /** Terracotta */
+  readonly appSettingPageAccentTerracotta: string;
+  /** Burgundy */
+  readonly appSettingPageAccentBordeaux: string;
+  /** Slate */
+  readonly appSettingPageAccentArdoise: string;
   /** My QR code by default */
   readonly appSettingPageMenuQrCodeTitle: string;
   /** Enable to display your QR Code by default */

package/src/l10n/app_localizations_en.ts

@@ -464,6 +464,7 @@ If this request comes from someone you trust, simply add their alias to your con
   transactionDetailsCancelReasonLabel: `Reason`,
   transactionDetailsCancelRejectMessage: `The cancellation request has been successfully rejected`,
   transactionDetailsRecuTitle: `Send receipt`,
+  transactionDetailsRecuPdfEditeLe: `Issued on:`,
   transactionDetailsRecuSubTitle: `You can download or share the PDF file`,
   transactionDetailsRecuInfoIdentifiant: `Identifier`,
   transactionDetailsRecuInfoReference: `Reference`,
@@ -619,6 +620,19 @@ Scanning will be automatic`,
   appSettingPageMenuThemeCustom: `App theme`,
   appSettingPageMenuThemeDefault: `System`,
   appSettingPageMenuThemePageTitle: `Apparence`,
+  appSettingPageThemeSection: `Theme`,
+  appSettingPageAccentSection: `Accent colour`,
+  appSettingPageAccentDefaut: `Default`,
+  appSettingPageAccentVert: `Green`,
+  appSettingPageAccentBleu: `Blue`,
+  appSettingPageAccentRouge: `Red`,
+  appSettingPageAccentOrange: `Orange`,
+  appSettingPageAccentViolet: `Purple`,
+  appSettingPageAccentRose: `Pink`,
+  appSettingPageAccentTurquoise: `Turquoise`,
+  appSettingPageAccentTerracotta: `Terracotta`,
+  appSettingPageAccentBordeaux: `Burgundy`,
+  appSettingPageAccentArdoise: `Slate`,
   appSettingPageMenuQrCodeTitle: `My QR code by default`,
   appSettingPageMenuQrCodeSelectTitle: `Enable to display your QR Code by default`,
   appSettingPageMenuQrCodeDeselectTitle: `Disable to display the camera by default`,

package/src/l10n/app_localizations_fr.ts

@@ -464,6 +464,7 @@ Si cette demande provient d'une personne de confiance, il vous suffit d'ajouter
   transactionDetailsCancelReasonLabel: `Raison`,
   transactionDetailsCancelRejectMessage: `La demande d’annulation est rejetée avec succès`,
   transactionDetailsRecuTitle: `Reçu de l'envoi`,
+  transactionDetailsRecuPdfEditeLe: `Edité le :`,
   transactionDetailsRecuSubTitle: `Vous pouvez partager ou télécharger le PDF`,
   transactionDetailsRecuInfoIdentifiant: `Identifiant`,
   transactionDetailsRecuInfoReference: `Référence`,
@@ -618,6 +619,19 @@ Le scan se fait automatiquement`,
   appSettingPageMenuThemeCustom: `Thème de l'application`,
   appSettingPageMenuThemeDefault: `Système`,
   appSettingPageMenuThemePageTitle: `Apparence`,
+  appSettingPageThemeSection: `Thème`,
+  appSettingPageAccentSection: `Couleur d'accentuation`,
+  appSettingPageAccentDefaut: `Défaut`,
+  appSettingPageAccentVert: `Vert`,
+  appSettingPageAccentBleu: `Bleu`,
+  appSettingPageAccentRouge: `Rouge`,
+  appSettingPageAccentOrange: `Orange`,
+  appSettingPageAccentViolet: `Violet`,
+  appSettingPageAccentRose: `Rose`,
+  appSettingPageAccentTurquoise: `Turquoise`,
+  appSettingPageAccentTerracotta: `Terracotta`,
+  appSettingPageAccentBordeaux: `Bordeaux`,
+  appSettingPageAccentArdoise: `Ardoise`,
   appSettingPageMenuQrCodeTitle: `Mon QR code par défaut`,
   appSettingPageMenuQrCodeSelectTitle: `Activer pour afficher votre QR Code par défaut`,
   appSettingPageMenuQrCodeDeselectTitle: `Désactiver pour afficher la caméra par défaut`,

package/src/l10n/app_localizations_pt.ts

@@ -464,6 +464,7 @@ Se este pedido for de uma pessoa de confiança, basta adicionar o alias aos seus
   transactionDetailsCancelReasonLabel: `Razão`,
   transactionDetailsCancelRejectMessage: `A demanda de cancelamento foi rejeitada com sucesso`,
   transactionDetailsRecuTitle: `Recebido de envio`,
+  transactionDetailsRecuPdfEditeLe: `Emitido em:`,
   transactionDetailsRecuSubTitle: `Você pode compartilhar ou baixar o PDF`,
   transactionDetailsRecuInfoIdentifiant: `Identificador`,
   transactionDetailsRecuInfoReference: `Referência`,
@@ -619,6 +620,19 @@ O scan é feito automaticamente`,
   appSettingPageMenuThemeCustom: `Tema da aplicação`,
   appSettingPageMenuThemeDefault: `Sistema`,
   appSettingPageMenuThemePageTitle: `Aparência`,
+  appSettingPageThemeSection: `Tema`,
+  appSettingPageAccentSection: `Cor de destaque`,
+  appSettingPageAccentDefaut: `Padrão`,
+  appSettingPageAccentVert: `Verde`,
+  appSettingPageAccentBleu: `Azul`,
+  appSettingPageAccentRouge: `Vermelho`,
+  appSettingPageAccentOrange: `Laranja`,
+  appSettingPageAccentViolet: `Roxo`,
+  appSettingPageAccentRose: `Rosa`,
+  appSettingPageAccentTurquoise: `Turquesa`,
+  appSettingPageAccentTerracotta: `Terracota`,
+  appSettingPageAccentBordeaux: `Bordô`,
+  appSettingPageAccentArdoise: `Ardósia`,
   appSettingPageMenuQrCodeTitle: `Meu QR Code por defeito`,
   appSettingPageMenuQrCodeSelectTitle: `Ativar para exibir o meu QR Code por defeito`,
   appSettingPageMenuQrCodeDeselectTitle: `Desativar para exibir a câmera por defeito`,

package/src/modules/config/domain/models/config_keys.ts

@@ -6,8 +6,10 @@ export enum ConfigKey {
   /** l'utilisateur a passé l'introduction */
   introductionPassed = 'INTRODUCTION_PASSED',
 
-  /** theme de l'utilisateur */
+  /** theme de l'utilisateur : système, clair ou sombre */
   preferedTheme = 'PREFERED_THEME',
+  /** Couleur d'accentuation (PI-SPI par défaut) */
+  preferedAccent = 'PREFERED_ACCENT',
 
   /** Permission notification */
   permissionNotification = 'PERMISSION_NOTIFICATION',

package/src/modules/config/domain/services/config_service.ts

@@ -1,6 +1,6 @@
 import type { ConfigInputPort } from '../../ports/input/config_input_port';
 import type { ConfigOutputPort } from '../../ports/output/config_output_port';
-import { configKeyValues } from '../models/config_keys';
+import { ConfigKey, configKeyValues } from '../models/config_keys';
 import type { ConfigParams } from '../models/config_params';
 
 /** Service contenant la logique de gestion des configurations */
@@ -11,9 +11,38 @@ export class ConfigService implements ConfigInputPort {
    */
   constructor(readonly configOutputPort: ConfigOutputPort) {}
 
+  /**
+   * Anciens thèmes de couleur, remplacés par le thème clair et une couleur
+   * d'accentuation (le jaune, trop proche de l'ambre, devient PI-SPI)
+   */
+  static readonly anciensThemes: Readonly<Record<string, string>> = {
+    yellowTheme: 'pispi',
+    greenTheme: 'vert',
+    blueTheme: 'bleu',
+    redTheme: 'rouge',
+    orangeTheme: 'orange',
+    purpleTheme: 'violet',
+    pinkTheme: 'rose',
+    // Thème personnalisé de l'hôte : sa couleur devient l'accent
+    customTheme: 'application',
+  };
+
   recuperer(): ConfigParams {
     // Récuperer toute la config et Appeler le systeme de stockage
-    return this.configOutputPort.recuperer([...configKeyValues]);
+    const config = this.configOutputPort.recuperer([...configKeyValues]);
+    this.migrerTheme(config);
+    return config;
+  }
+
+  /** Convertit une seule fois un ancien thème de couleur en thème clair et couleur d'accentuation, et l'enregistre */
+  private migrerTheme(config: ConfigParams): void {
+    const ancien = config.params[ConfigKey.preferedTheme];
+    const accent = ancien != null ? ConfigService.anciensThemes[ancien] : undefined;
+    if (accent == null) return;
+    config.params[ConfigKey.preferedTheme] = 'lightTheme';
+    config.params[ConfigKey.preferedAccent] = accent;
+    void this.configOutputPort.modifier(ConfigKey.preferedTheme, 'lightTheme');
+    void this.configOutputPort.modifier(ConfigKey.preferedAccent, accent);
   }
 
   async modifier(key: string, value: string): Promise<void> {

package/src/modules/home/presentation/pages/home_tab_compte.tsx

@@ -75,7 +75,7 @@ export function HomeTabCompte() {
             <CtaWidget
               icon={(color) => <MaterialIcons name="more-horiz" size={30} color={color} />}
               label={traductions.homeActionMore}
-              action={hasAlias ? () => void showModalBottomSheet(router, { themed: true, builder: () => <HomeTabCompteMoreMenu /> }) : null}
+              action={hasAlias ? () => void showModalBottomSheet(router, { builder: () => <HomeTabCompteMoreMenu /> }) : null}
             />
           </View>
           <View style={styles.gap14} />

package/src/modules/home/presentation/pages/home_tab_compte_more_menu.tsx

@@ -1,71 +1,63 @@
-import { ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { StyleSheet, View } from 'react-native';
 
 import { Images } from '../../../../core/assets';
 import { AppRouter, useAppRouter } from '../../../../core/router';
-import { useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
-import { Card } from '../../../../shared/material/card';
-import { MenuActionItem, MenuActionsWidget } from '../../../../shared/widgets/menu_actions_widget';
+import { SelectionSheet } from '../../../../shared/widgets/selection';
+import { ProfileMenuTile, ProfilePageMenu } from '../../../profile/presentation/pages/profile_menu';
 
 /**
  * Menu « Plus » de l'accueil. Le participant peut personnaliser ce menu
  * pour y ajouter des fonctionnalités propres à son système.
+ * Même feuille que celles du profil : à ouvrir avec showModalBottomSheet
+ * sans `themed`, la feuille dessine elle-même son fond.
  */
 export function HomeTabCompteMoreMenu() {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
   const router = useAppRouter();
-  const { height } = useWindowDimensions();
-  const insets = useSafeAreaInsets();
   // Fermer le menu avant d'ouvrir la page : sinon il reste affiché par-dessus
   const open = (location: string) => {
     AppRouter.pop(router);
     void AppRouter.push(router, location);
   };
   return (
-    <View
-      style={[
-        styles.box,
-        { maxHeight: height * 0.7, backgroundColor: theme.colorScheme.surface, paddingBottom: 20 + insets.bottom },
-      ]}
-    >
-      <Card>
-        <ScrollView>
-          <MenuActionsWidget
+    <SelectionSheet
+      contenu={
+        <View style={styles.contenu}>
+          <ProfilePageMenu
             items={[
               // Programmer un paiement
-              new MenuActionItem(
-                Images.homeFooterTransfer,
-                traductions.homeActionMoreSheetProgrammerTitle,
-                traductions.homeActionMoreSheetProgrammerSubTitle,
-                () => open(AppRouter.subscriptionSchedule),
-                { iconSize: 20 },
-              ),
+              <ProfileMenuTile
+                key="programmer"
+                image={Images.homeFooterTransfer}
+                titre={traductions.homeActionMoreSheetProgrammerTitle}
+                sousTitre={traductions.homeActionMoreSheetProgrammerSubTitle}
+                onPress={() => open(AppRouter.subscriptionSchedule)}
+              />,
               // Trouver un abonnement
-              new MenuActionItem(
-                Images.homeMoreFindSubscription,
-                traductions.homeActionMoreSheetAbonnementTitle,
-                traductions.homeActionMoreSheetAbonnementSubTitle,
-                () => open(AppRouter.subscriptionSubscribe),
-                { iconSize: 20 },
-              ),
+              <ProfileMenuTile
+                key="abonnement"
+                image={Images.homeMoreFindSubscription}
+                titre={traductions.homeActionMoreSheetAbonnementTitle}
+                sousTitre={traductions.homeActionMoreSheetAbonnementSubTitle}
+                onPress={() => open(AppRouter.subscriptionSubscribe)}
+              />,
               // Partager dépenses
-              new MenuActionItem(
-                Images.homeMoreSplitPayments,
-                traductions.homeActionMoreSheetPartagerTitle,
-                traductions.homeActionMoreSheetPartagerSubTitle,
-                () => open(AppRouter.transactionSplitPaymentTx),
-                { iconSize: 20 },
-              ),
+              <ProfileMenuTile
+                key="partager"
+                image={Images.homeMoreSplitPayments}
+                titre={traductions.homeActionMoreSheetPartagerTitle}
+                sousTitre={traductions.homeActionMoreSheetPartagerSubTitle}
+                onPress={() => open(AppRouter.transactionSplitPaymentTx)}
+              />,
             ]}
           />
-        </ScrollView>
-      </Card>
-    </View>
+        </View>
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  box: { borderRadius: 20, paddingTop: 20, paddingHorizontal: 20 },
+  contenu: { paddingHorizontal: 16, paddingTop: 8, paddingBottom: 20 },
 });

package/src/modules/profile/presentation/pages/parametre/profile_parametre_page.tsx

@@ -46,10 +46,7 @@ function menuItems(traductions: AppLocalizations, configParams: ConfigParams): P
   if (Di.config.appConfig.canChangeTheme) {
     items.push(
       new ProfileItem(Images.iconsTheme, traductions.appSettingPageMenuThemeTitle, AppRouter.profileParametreTheme, {
-        subtitle:
-          params[ConfigKey.preferedTheme] === Themer.customThemeCode
-            ? traductions.appSettingPageMenuThemeCustom
-            : Themes.label(theme, traductions),
+        subtitle: `${Themes.label(theme, traductions)} · ${Themer.accentLabel(traductions, params[ConfigKey.preferedAccent])}`,
       }),
     );
   }
@@ -76,7 +73,7 @@ export function ProfileParametrePage() {
     (_p, current) =>
       current instanceof ConfigLoadedState &&
       current.updatedKey != null &&
-      [ConfigKey.showQRcode, ConfigKey.preferedTheme, ConfigKey.notificationStatus, ConfigKey.notificationAlertSound].includes(
+      [ConfigKey.showQRcode, ConfigKey.preferedTheme, ConfigKey.preferedAccent, ConfigKey.notificationStatus, ConfigKey.notificationAlertSound].includes(
         current.updatedKey,
       ),
   );

package/src/modules/profile/presentation/pages/parametre/profile_parametre_page_qrcode.tsx

@@ -4,7 +4,7 @@ import { Images } from '../../../../../core/assets';
 import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
 import { Themer, useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
-import { SbSelectionSheet } from '../../../../../shared/widgets/selection';
+import { SelectionSheet } from '../../../../../shared/widgets/selection';
 import { ConfigBloc } from '../../../../config/adapters/ui/bloc/config_bloc';
 import { ConfigChangeEvent } from '../../../../config/adapters/ui/bloc/config_event';
 import { ConfigLoadedState } from '../../../../config/adapters/ui/bloc/config_state';
@@ -25,7 +25,7 @@ export function ProfileParametrePageQRcode() {
   const basculer = () => configBloc.add(new ConfigChangeEvent(ConfigKey.showQRcode, showQRcode ? '0' : '1'));
 
   return (
-    <SbSelectionSheet
+    <SelectionSheet
       titre={traductions.appSettingPageMenuQrCodeTitle}
       entete={
         <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>

package/src/modules/profile/presentation/pages/parametre/profile_parametre_page_theme.tsx

@@ -1,11 +1,11 @@
 import { MaterialIcons } from '@expo/vector-icons';
 import { Image } from 'expo-image';
-import { useState, type ReactNode } from 'react';
+import { useState } from 'react';
 import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import { Images } from '../../../../../core/assets';
 import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
-import { Themer, Themes, useTheme, type ThemeData } from '../../../../../core/theme';
+import { Accents, Themer, Themes, useTheme } from '../../../../../core/theme';
 import type { AppLocalizations } from '../../../../../l10n/app_localizations';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { Card } from '../../../../../shared/material/card';
@@ -24,20 +24,6 @@ function themeIcon(theme: Themes): number {
       return Images.imageThemeLight;
     case Themes.dark:
       return Images.imageThemeDark;
-    case Themes.yellow:
-      return Images.imageThemeLightYellow;
-    case Themes.green:
-      return Images.imageThemeLightGreen;
-    case Themes.blue:
-      return Images.imageThemeLightBlue;
-    case Themes.red:
-      return Images.imageThemeLightRed;
-    case Themes.orange:
-      return Images.imageThemeLightOrange;
-    case Themes.purple:
-      return Images.imageThemeLightPurple;
-    case Themes.pink:
-      return Images.imageThemeLightPink;
     default:
       return Images.imageThemeSystem;
   }
@@ -47,53 +33,119 @@ function themeTitle(traductions: AppLocalizations, theme: Themes): string {
   return theme === Themes.system ? traductions.appSettingPageMenuThemeDefault : Themes.label(theme, traductions);
 }
 
-/** Choix du thème de l'application (route `profileParametreTheme`). */
+/** Choix du thème (système, clair, sombre) et de la couleur d'accentuation (route `profileParametreTheme`). */
 export function ProfileParametrePageTheme() {
   const traductions = useAppLocalizations();
+  const theme = useTheme();
   const configBloc = useBloc(ConfigBloc);
   const state = useBlocBuilder(
     configBloc,
-    (_p, current) => current instanceof ConfigLoadedState && current.updatedKey === ConfigKey.preferedTheme,
+    (_p, current) =>
+      current instanceof ConfigLoadedState &&
+      (current.updatedKey === ConfigKey.preferedTheme || current.updatedKey === ConfigKey.preferedAccent),
   );
-  const currentTheme = state.configParams.params[ConfigKey.preferedTheme];
-
+  const currentTheme = Themes.fromCode(state.configParams.params[ConfigKey.preferedTheme]);
+  const currentAccent = state.configParams.params[ConfigKey.preferedAccent] ?? Accents.parDefaut;
+  const sombre = theme.brightness === 'dark';
   const [largeurGrille, setLargeurGrille] = useState(0);
+
   // Trois aperçus par ligne
+  const espace = 12;
   // Arrondi vers le bas : sinon la troisième colonne peut passer à la ligne
-  const largeur = Math.floor((largeurGrille - 2 * ESPACE) / 3);
+  const largeur = Math.floor((largeurGrille - 2 * espace) / 3);
 
   return (
     <Scaffold appBar={<ProfileAppBar titre={traductions.appSettingPageMenuThemePageTitle} />}>
       <MyPageContainer>
         <ScrollView contentContainerStyle={styles.contenu}>
-          {/* Thème */}
-          <ProfileSectionTitre titre={traductions.appSettingPageMenuThemeTitle} />
+          {/* Thème : système, clair ou sombre */}
+          <ProfileSectionTitre titre={traductions.appSettingPageThemeSection} />
           <Card style={styles.card}>
             <View style={styles.grille} onLayout={(e) => setLargeurGrille(e.nativeEvent.layout.width - 2 * 14)}>
-              {largeurGrille > 0 && (
-                <>
-                  {/* Thème personnalisé de l'hôte, en tête */}
-                  {Themer.customTheme != null && (
-                    <ThemeOption
-                      largeur={largeur}
-                      title={traductions.appSettingPageMenuThemeCustom}
-                      selected={currentTheme === Themer.customThemeCode}
-                      onSelect={() => configBloc.add(new ConfigChangeEvent(ConfigKey.preferedTheme, Themer.customThemeCode))}
-                      preview={<CustomThemePreview theme={Themer.customTheme} />}
-                    />
-                  )}
-                  {Themes.list().map((item) => (
-                    <ThemeOption
+              {largeurGrille > 0 &&
+                Themes.list().map((item) => {
+                  const choisi = currentTheme === item;
+                  return (
+                    <Pressable
                       key={item}
-                      largeur={largeur}
-                      title={themeTitle(traductions, item)}
-                      selected={currentTheme === item}
-                      onSelect={() => configBloc.add(new ConfigChangeEvent(ConfigKey.preferedTheme, item))}
-                      preview={<Image source={themeIcon(item)} style={styles.flex} contentFit="cover" />}
-                    />
-                  ))}
-                </>
-              )}
+                      accessibilityRole="button"
+                      accessibilityState={{ selected: choisi }}
+                      disabled={choisi}
+                      onPress={() => configBloc.add(new ConfigChangeEvent(ConfigKey.preferedTheme, item))}
+                      style={[styles.item, { width: largeur }]}
+                    >
+                      {/* Aperçu, entouré quand il est choisi */}
+                      <View style={[styles.cadre, { borderColor: choisi ? theme.colorScheme.primary : 'transparent' }]}>
+                        <Image
+                          source={themeIcon(item)}
+                          style={[styles.apercu, { backgroundColor: theme.colorScheme.surface }]}
+                          contentFit="cover"
+                        />
+                      </View>
+                      {choisi && (
+                        <View style={[styles.coche, { backgroundColor: theme.colorScheme.primary, borderColor: theme.colorScheme.surface }]}>
+                          <MaterialIcons name="check" size={14} color={theme.colorScheme.onPrimary} />
+                        </View>
+                      )}
+                      <Text
+                        style={[
+                          theme.textTheme.displayMedium,
+                          styles.libelle,
+                          { fontWeight: choisi ? '700' : '500' },
+                          choisi ? null : { color: Themer.neural03Color },
+                        ]}
+                      >
+                        {themeTitle(traductions, item)}
+                      </Text>
+                    </Pressable>
+                  );
+                })}
+            </View>
+          </Card>
+
+          {/* Couleur d'accentuation */}
+          <View style={styles.espace} />
+          <ProfileSectionTitre titre={traductions.appSettingPageAccentSection} />
+          <Card style={styles.card}>
+            <View style={styles.pastilles}>
+              {[
+                // Couleur du thème personnalisé de l'hôte, en tête
+                ...(Themer.hasCustomTheme ? [Themer.customAccentCode] : []),
+                ...Accents.list(),
+              ].map((accent) => {
+                const apercu = Themer.get(sombre ? Themes.dark : Themes.light, accent).colorScheme;
+                const teintes = { accent: apercu.primary, surAccent: apercu.onPrimary };
+                const choisi = currentAccent === accent;
+                return (
+                  <Pressable
+                    key={accent}
+                    accessibilityRole="button"
+                    accessibilityLabel={Themer.accentLabel(traductions, accent)}
+                    accessibilityState={{ selected: choisi }}
+                    disabled={choisi}
+                    onPress={() => configBloc.add(new ConfigChangeEvent(ConfigKey.preferedAccent, accent))}
+                    style={styles.accent}
+                  >
+                    {/* Pastille, cochée quand elle est choisie */}
+                    <View style={[styles.anneau, { borderColor: choisi ? theme.colorScheme.onSurface : 'transparent' }]}>
+                      <View style={[styles.pastille, { backgroundColor: teintes.accent }]}>
+                        {choisi && <MaterialIcons name="check" size={22} color={teintes.surAccent} />}
+                      </View>
+                    </View>
+                    <Text
+                      numberOfLines={1}
+                      style={[
+                        theme.textTheme.displaySmall,
+                        styles.libelle,
+                        { fontWeight: choisi ? '700' : '400' },
+                        { color: choisi ? theme.colorScheme.onSurface : Themer.neural03Color },
+                      ]}
+                    >
+                      {Themer.accentLabel(traductions, accent)}
+                    </Text>
+                  </Pressable>
+                );
+              })}
             </View>
           </Card>
         </ScrollView>
@@ -102,113 +154,18 @@ export function ProfileParametrePageTheme() {
   );
 }
 
-/** Une option de thème : aperçu, entouré et coché quand il est choisi, puis son nom */
-function ThemeOption({
-  largeur,
-  title,
-  selected,
-  onSelect,
-  preview,
-}: {
-  largeur: number;
-  title: string;
-  selected: boolean;
-  onSelect: () => void;
-  preview: ReactNode;
-}) {
-  const theme = useTheme();
-  return (
-    <Pressable
-      accessibilityRole="button"
-      accessibilityState={{ selected }}
-      disabled={selected}
-      onPress={onSelect}
-      style={[styles.item, { width: largeur }]}
-    >
-      {/* Aperçu, entouré quand il est choisi */}
-      <View style={[styles.cadre, { borderColor: selected ? theme.colorScheme.primary : 'transparent' }]}>
-        <View style={[styles.apercu, { backgroundColor: theme.colorScheme.surface }]}>{preview}</View>
-      </View>
-      {selected && (
-        <View style={[styles.coche, { backgroundColor: theme.colorScheme.primary, borderColor: theme.colorScheme.surface }]}>
-          <MaterialIcons name="check" size={14} color={theme.colorScheme.onPrimary} />
-        </View>
-      )}
-      <Text
-        style={[
-          theme.textTheme.displayMedium,
-          styles.libelle,
-          { fontWeight: selected ? '700' : '500' },
-          selected ? null : { color: Themer.neural03Color },
-        ]}
-      >
-        {title}
-      </Text>
-    </Pressable>
-  );
-}
-
-/**
- * Aperçu du thème personnalisé de l'hôte (pas d'image comme pour les
- * thèmes du SDK) : une miniature d'accueil dessinée avec ses couleurs.
- */
-function CustomThemePreview({ theme }: { theme: ThemeData }) {
-  const primary = theme.colorScheme.primary;
-  const secondary = theme.colorScheme.secondary;
-  const bar = (width: number, color: string) => <View style={[styles.bar, { width, backgroundColor: color }]} />;
-  return (
-    <View style={[styles.flex, styles.mock, { backgroundColor: theme.scaffoldBackgroundColor }]}>
-      {/* Avatar et titre */}
-      <View style={styles.mockRow}>
-        <View style={[styles.dot16, { backgroundColor: secondary }]} />
-        {bar(40, Themer.neural02Color)}
-      </View>
-      <View style={styles.gap12} />
-      {/* Carte du compte */}
-      <View style={[styles.mockCard, { backgroundColor: theme.cardColor }]}>
-        {bar(50, Themer.neural02Color)}
-        {bar(30, primary)}
-      </View>
-      <View style={styles.gap12} />
-      {/* Boutons d'action */}
-      <View style={styles.mockActions}>
-        {[0, 1, 2].map((i) => (
-          <View key={i} style={[styles.mockButton, { backgroundColor: primary }]} />
-        ))}
-      </View>
-      <View style={styles.gap14} />
-      {/* Liste */}
-      {[0, 1, 2].map((i) => (
-        <View key={i} style={[styles.mockRow, styles.mockListRow]}>
-          <View style={[styles.dot14, { backgroundColor: secondary }]} />
-          {bar(46, Themer.neural02Color)}
-        </View>
-      ))}
-    </View>
-  );
-}
-
-const ESPACE = 12;
-
 const styles = StyleSheet.create({
-  flex: { flex: 1 },
-  mock: { padding: 10 },
-  mockRow: { flexDirection: 'row', alignItems: 'center', gap: 6 },
-  mockListRow: { marginBottom: 8 },
-  mockCard: { height: 54, padding: 8, borderRadius: 8, justifyContent: 'space-between' },
-  mockActions: { flexDirection: 'row', justifyContent: 'space-between' },
-  mockButton: { width: 26, height: 26, borderRadius: 8 },
-  bar: { height: 6, borderRadius: 3 },
-  dot16: { width: 16, height: 16, borderRadius: 8 },
-  dot14: { width: 14, height: 14, borderRadius: 7 },
-  gap12: { height: 12 },
-  gap14: { height: 14 },
   contenu: { paddingTop: 8, paddingBottom: 16 },
   card: { margin: 0 },
-  grille: { padding: 14, flexDirection: 'row', flexWrap: 'wrap', columnGap: ESPACE, rowGap: 16 },
+  grille: { padding: 14, flexDirection: 'row', flexWrap: 'wrap', columnGap: 12, rowGap: 16 },
   item: { alignItems: 'center' },
   cadre: { alignSelf: 'stretch', padding: 3, borderWidth: 2, borderRadius: 14 },
-  apercu: { width: '100%', aspectRatio: 0.6, borderRadius: 10, overflow: 'hidden' },
+  apercu: { width: '100%', aspectRatio: 0.6, borderRadius: 10 },
   coche: { position: 'absolute', top: 8, right: 8, borderRadius: 12, borderWidth: 2, padding: 1 },
   libelle: { marginTop: 8, textAlign: 'center' },
+  espace: { height: 24 },
+  pastilles: { paddingHorizontal: 10, paddingVertical: 16, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-evenly', rowGap: 16 },
+  accent: { width: 64, alignItems: 'center' },
+  anneau: { padding: 3, borderWidth: 2, borderRadius: 26 },
+  pastille: { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center' },
 });