ordinarthur/rubis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(mail): force light color-scheme pour empêcher l'auto-inversion iOS
All checks were successful
Build & Deploy API / build-and-deploy (push) Successful in 1m7s
Details

Browse Source 
Sur iPhone Mail.app en dark mode, iOS inverse automatiquement les
couleurs de l'email : header rubis-deep (#771328) devenait rose
pâle, fond crème devenait noir, texte sombre devenait blanc.

Fix appliqué dans le _layout.tsx (donc impacte checkin + relance) :
- Ajoute meta `color-scheme: light only` + `supported-color-schemes`
  → signal aux clients mail (iOS Mail, Gmail mobile, Yahoo)
  qu'on ne souhaite PAS d'auto-dark-mode
- Ajoute style block avec :root color-scheme + overrides
  Outlook.com dark mode ([data-ogsc] / [data-ogsb])
- Ajoute className sur Body / Container / header / footer pour
  permettre le ciblage CSS dark-mode-resistant

Couvre : iOS Mail, Apple Mail macOS, Gmail mobile dark, Outlook.com.
Aucun impact sur les clients qui ne font pas d'inversion (Outlook
desktop, Thunderbird, etc.).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
ordinarthur 2026-05-07 22:42:57 +02:00
parent d7148525d0
commit 1bb0c7166b
1 changed files with 41 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
apps/api/app/mails/_layout.tsx
View File

@ -45,12 +45,48 @@ export function EmailLayout({
}: LayoutProps) { }: LayoutProps) {
return ( return (
<Html lang="fr"> <Html lang="fr">
<Head /> <Head>
{/*
* Force le mode clair sur les clients qui auto-invertissent en dark mode
* (iOS Mail, Gmail mobile, Outlook.com web). Sans ces tags, les fonds
* crème/blanc deviennent noirs et le header rubis-deep devient rose pâle.
*/}
<meta name="color-scheme" content="light only" />
<meta name="supported-color-schemes" content="light only" />
<style
// eslint-disable-next-line react/no-danger -- nécessaire dans <style>
dangerouslySetInnerHTML={{
__html: `
:root {
color-scheme: light only;
supported-color-schemes: light only;
}
/* Outlook.com / Hotmail dark mode — force nos couleurs */
[data-ogsc] body,
[data-ogsb] body {
background-color: ${BRAND.cream} !important;
}
[data-ogsc] .rubis-container,
[data-ogsb] .rubis-container {
background-color: ${BRAND.white} !important;
}
[data-ogsc] .rubis-header,
[data-ogsb] .rubis-header {
background-color: ${BRAND.rubisDeep} !important;
}
[data-ogsc] .rubis-footer,
[data-ogsb] .rubis-footer {
background-color: ${BRAND.cream2} !important;
}
`,
}}
/>
</Head>
<Preview>{preview}</Preview> <Preview>{preview}</Preview>
<Body style={bodyStyle}> <Body style={bodyStyle} className="rubis-body">
<Container style={containerStyle}> <Container style={containerStyle} className="rubis-container">
{/* Bandeau rubis-deep avec gem ◆ + brand */} {/* Bandeau rubis-deep avec gem ◆ + brand */}
<Section style={headerStyle}> <Section style={headerStyle} className="rubis-header">
<Row> <Row>
<Column style={{ verticalAlign: 'middle' }}> <Column style={{ verticalAlign: 'middle' }}>
<Text style={headerBrandStyle}> <Text style={headerBrandStyle}>
@ -68,7 +104,7 @@ export function EmailLayout({
<Section style={contentStyle}>{children}</Section> <Section style={contentStyle}>{children}</Section>
{/* Footer Rubis — "Rubis sur l'ongle" cliquable vers la landing */} {/* Footer Rubis — "Rubis sur l'ongle" cliquable vers la landing */}
<Section style={footerStyle}> <Section style={footerStyle} className="rubis-footer">
<Text style={footerTextStyle}> <Text style={footerTextStyle}>
Émis via{' '} Émis via{' '}
{landingUrl ? ( {landingUrl ? (