add darkmode toggle button

[coralieco]

PR relative à l' issue #99

J'ai ajouté un bouton toggle pour activer le mode sombre dans le footer.

Le rendu sur la page donne :

Il existe déjà des modes sombres propres aux navigateurs. Celui proposé dans cette PR a un contraste un peu plus marqué.

A titre d'exemple, le darkmode par défaut de Chrome:

[a2br]

Je n'ai pas vérifié le JS distant, mais est-ce que tu as utilisé https://github.com/LAB-MI/attestation-deplacement-derogatoire-q4-2020/blob/main/src/MIN_Interieur_RVB_dark.svg ? Sur tes screens le logo paraît un peu sombre.

[coralieco]

Oui j'ai utilisé ce logo. En fait j'y ai appliqué ce css:

  .logo {
    filter: invert(40%)
  }

qui permet de passer le texte original noir en plus clair. Mais qui assombrit le logo.

En fait l'idéal aurait été d'avoir un

  .logo {
    filter: invert(1)
  }

qui met le texte complètement en blanc, mais le logo devient jaune et je-ne-sais-plus-quelle couleur.
Pour ça, il faudrait que je découpe le logo en deux (logo et texte séparés) pour n'appliquer que le filtre sur le texte. Mais je ne sais pas trop comment faire sur un SVG.

[coralieco]

Ah oui, est-ce qu'il y a une guideline pour le respect de la charte graphique ? Car il y a des couleurs de la librairie (pour les liens notamment) qui ne sont peut-être pas compliant.

[Rezrazi]

Excellente idée !
Avez vous considéré l'utilisation de @media (prefers-color-scheme) pour adapter le thème selon les préférences de l'utilisateur directement en plus du bouton de changement de thème.

Petite piste d'amélioration, le contraste et le jeu de couleurs des champs de texte peut être encore atténué et peuvent être affichés en couleur plus dark-mode-friendly que le blanc.

[coralieco]

Ce n'est pas moi qui l'ait fait mais oui @media (prefers-color-scheme) est utilisé pour adapter la page aux modes sombres des navigateurs :)

Mais ce sont deux choses différentes (si j'ai bien compris):

• Pour le dark mode des navigateurs, c'est @media (prefers-color-scheme) qui est utilisé
• Pour le dark mode de la page, mon toggle-button (librairie Darkmode)

Je regarde pour atténuer la blancheur des champs texte. C'est vrai que j'étais partie sur une version beaucoup plus contrastée que le dark mode navigateur.

[coralieco]

J'ai essayé de le rendre un peu plus "darkmode friendly" en m'inspirant du dark mode natif de Twitter. Voilà un aperçu:

Il y a des titres que j'ai du mal à overrider et qui restent blanc. Je ne sais pas si ça pose problème ? Si ça vous choque, je peux essayer de trouver une solution. Pour les autres textes j'ai pris un gris clair pour que ce soit moins contrasté.

[ValentinDewolf]

Suggested change

	<label class="custom-control-label" for="dark-toggle-switch">Accessibité: Activer le mode sombre</label>
	<label class="custom-control-label" for="dark-toggle-switch">Accessibilité: Activer le mode sombre</label>

[coralieco]

Oups ! Bien vu, merci :)

[coralieco]

👋🏻 Est-ce toujours d'actualité ? @a2br Peut-on envisager de le merger, reste t-il des choses à faire ?

[a2br]

👋🏻 Est-ce toujours d'actualité ? @a2br Peut-on envisager de le merger, reste t-il des choses à faire ?

Ahah, je ne gère pas ce repo... Ce n'est pas la seule PR à être tombée dans l'oubli malheureusement... Labmi n'a pas l'air très intéressé.