Gestion du dark mode page par page

[maxgfr]

Bonjour,

Récemment je suis tombé sur use-case que je dois gérer qui semble rentrer en conflit avec la gestion du theme light / dark

Contexte

Nous avons des pages que nous transformons en widget intégrable par d'autres sites. Si un utilisateur est en dark mode configuré sur notre site internet via le dsfr et qu'il va sur le site d'un partenaire, automatiquement l'UI sera en dark. Nous souhaitant que certaines pages soit définies dans un theme bien particulier.

Implementation

Aujourd'hui nous utilisons une application en nextjs avec un app router, nous gérons les paramètres dsfr à l'intérieur de celle-ci. Le problème semble venir du defaultSchemeColor qui s'applique sur le theme également :

react-dsfr/src/next-appdir/getHtmlAttributes.tsx

Line 37 in c5353f6

[data_fr_theme]: defaultColorScheme

Ces paramètres (data-fr-theme, data-fr-scheme) figurent dans le html ce qui semble pas super simple comme approche, car la logique de theme se ferait au niveau du server-side au risque d'avoir un clignotement au chargement de la page

Solution

Serait-il intéressant de faire un overrideColorTheme qui est définit de manière exceptionnel pour forcer l'utilisation au niveau du getHtmlAttributes ?

Par défaut nous pouvons laisser la couleur issue du defaultSchemeColor

Si tel est le cas, ça serait intéressant de mettre en place de la doc si telle est le cas, car l'approche de modifier un élément dans le html tag signifie qu'on doit utiliser un tag header et donc possiblement un middleware pour injecter les bons paramètres si on suit cette approche. J'ai le lien d'une PR si vous voulez voir l'approche avec le header : https://github.com/SocialGouv/code-du-travail-numerique/pull/6275/files

Je passe sûrement à côté d'autres éléments, si vous avez des hints ou solutions je suis preneur