Behold the raise of the Darth Mode 🌑

[JF-Cozy]

Ajout du theme sombre pour cozy-ui, alias dark mode. Pour l'activer, il faut passer le browser en mode dark.

Fonctionnement

On utilise le provider <CozyTheme /> pour wrapper les app, ainsi qu'une partie précise du DOM à l'intérieur d'une app, afin d'apporter le style de cozy-ui. Ce composant a été modifié :

• il crée une var type dont la valeur peut être light | dark en fonction de la media query prefers-color-scheme: dark (selon la configuration du browser). Cette var type est passé en prop à <MuiCozyTheme /> ainsi qu'au div wrapper qui contient les var css.
• il crée une balise <meta name="color-scheme" content="dark light" /> si elle n'est pas déjà présente
• il y a toujours la prop historique variant qui peut avoir pour valeur normal | inverted.

Override

Si votre app ne supporte pas le thème sombre :

• ajoutez <meta name="color-scheme" content="only light" /> dans index.ejs.

Note

• Concernant la suppression de nombreuses var css, j'ai vérifié, elles ne sont pas utilisé dans nos overrides context actuels (c'était pour un ancien override que nous n'avons plus).
• Concernant les screenshots Argos, on screenshot tous les cas, comme avant (on double donc le nombre de screenshots)

démo : https://jf-cozy.github.io/cozy-ui/react/

Pour tester dans la doc il faut mettre son browser en mode dark, ou changer le mode à gauche dans la barre de navigation (ce qui force le process).
Deux bons candidats : https://jf-cozy.github.io/cozy-ui/react/#/Core/Buttons et https://jf-cozy.github.io/cozy-ui/react/#/Core/Alert

Breaking changes

• if you want to get or override css var, you need to do it on new classes, see below:
  CozyTheme--normal -> CozyTheme--light-normal
CozyTheme--inverted -> CozyTheme--light-inverted

• You can't now longer rely on theme.palette.type to determine normal or inverted theme, you have to use theme.palette.variant instead.

• useCozyTheme() return now an object with type and variant. You must replace const theme = useCozyTheme() by const { variant } = useCozyTheme()

• Remove some css vars. You should use semantic var instead. List of removed css vars :

--invertedBackgroundColor
--invertedContrastTextColor
--spinnerColor
--linkColor
--linkTextDecoration
--linkColorActive
--invertedTabsActiveTextColor
--invertedTabsInactiveTextColor
--invertedTabsIndicatorColor
--invertedTabsBackgroundColor
--regularButtonPrimaryColor
--regularButtonSecondaryColor
--regularButtonActiveColor
--regularButtonConstrastColor
--secondaryButtonPrimaryColor
--secondaryButtonSecondaryColor
--secondaryButtonActiveColor
--secondaryButtonContrastColor
--dividerColor2
--iconColor
--textIconColor
--actionMenuIconColor
--neutralBackground
--buttonTextTransform
--buttonBorderRadius
--alertErrorColor
--alertErrorBackgroundColor
--alertSuccessColor
--alertSuccessBackgroundColor
--alertInfoColor
--alertInfoBackgroundColor

May the dark mode be with us!

Limitation

• La doc cozy-ui (et non les composants) n'est pas (encore) totalement compatible avec le dark mode. Mettre le browser en dark mode ne changera donc pas l'intégralité du style.
• Cozy-bar n'est pas responsive au thème. Il y a un vrai sujet parallèle en soi. Elle n'utilise pas CozyTheme (ni MuiCozyTheme) il faudrait le rajouter parmi les providers https://github.com/cozy/cozy-bar/blob/master/src/index.jsx#L97 et faire une passe sur les variables pour supprimer toutes les var non responsive, typiquement https://github.com/cozy/cozy-bar/blob/master/src/styles/theme.styl#L15

[bundlemon]

BundleMon

Files updated (3)

Status	Path	Size	Limits
✅	dist/cozy-ui.utils.min.css	10.75KB (+266B +2.48%)	+10%
✅	dist/cozy-ui.min.css	19.88KB (+180B +0.89%)	+10%
✅	transpiled/react/stylesheet.css	19.05KB (-137B -0.7%)	+10%

Total files change +309B +0.61%

Groups updated (1)

Status	Path	Size	Limits
✅	transpiled/react/**	653.64KB (+1.72KB +0.26%)	-

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history | Target branch size history

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	👍 Changes approved	38 changes	Jan 10, 2024, 2:58 PM

[zatteo]

🎉🎉🎉🎉🎉🎉

[zatteo]

Régression sur le composant Menu ?

[zatteo]

Différences sur le composant Paper ? Mais liées aux ombres donc je ne sais pas si c'est normal.

[JF-Cozy]

Bien vu merci @zatteo il y a un souci visiblement avec les shadows. Je regarde.

Edit : corrigé dans un commit à part.

En effet plusieurs soucis à ce sujet : suite à un correctif récent qui se basaient sur les var css et non les valeurs brutes, les shadows n'étaient plus responsive au thème car pour que les var css fonctionnent il faut être wrappé dans un div avec la bonne classe. Or dans le cas du Menu, ça passe par Popover (et donc Portal) qui fait donc poper un div dans le DOM (sans la classe css donc). Jusque là ça marchait encore car la balise html comportait les var css. Donc il y avait bien les shadows, pour qu'on soit en normal ou inverted ça utilisait les shadow normal.
Dans cette PR on supprime les var css accroché à la balise html. Ca ne marchait donc plus du tout.

J'ai revu l'approche en réintroduisant le fait qu'on aille chercher les valeurs des vars css, et non utiliser les vars css elles-mêmes pour la construction des shadows. A cause du fonctionnement Popover et du fait qu'il faille être wrappé dans un div qui contient les var css, ça ne peut pas marcher autrement.

[zatteo]

Bien joué super résultat ! Hâte de voir ça dans les apps

[cozy-bot]

🎉 This PR is included in version 101.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀