Add background toggle functionality to NewsItem header

[Louis454545]

🚀 Nouvelle Pull Request

Proposez vos modifications pour améliorer Papillon

Informations importantes

Merci de vous référer à la documentation sur la contribution si vous avez des questions à propos des pull requests (https://gitbook.getpapillon.xyz/organisation/outils-internes/github)

Checklist d'avant pull request

Veuillez cocher toutes les cases applicables en remplaçant [ ] par [x].

• Vous avez testé de build le projet avec vos modifications et ce build a réussi
• Vous respectez les conventions de codage et de nommage du projet
• Vous utilisez la tabulation pour l'indentation afin de maintenir un code lisible
• Cette pull request n'est pas un duplicata d'une autre
• Cette pull request est prête à être revue (review) et fusionnée (merge)
• Il n'y a pas de TODO (aka des annotations pour du code manquant) dans vos modifications
• Il n'y a pas d'erreurs de langue dans votre code (grammaire, vocabulaire, conjugaison, orthographe)
• Les détails des changements ont été décrits ci-dessous
• Cette pull-request n'est pas une "breaking-change" (des modifications qui vont entraîner la modification du fonctionnement de certaines fonctionnalités déjà existantes)

Description:
This PR introduces a new feature that allows users to toggle the background color of the NewsItem component in dark mode. The changes include:

• Adding a Sun/Moon icon button to the header
• Implementing an animated transition between Sun and Moon icons
• Toggling between white and dark backgrounds for the content
• Updating the component's state and styles based on the toggle
• Enhancing the user experience in dark mode by providing a light reading option

Key changes:

• Added new state isWhiteBackground to control the background color
• Implemented toggleBackground function to switch between dark and light backgrounds
• Created animated Sun/Moon icon transition using Animated API
• Updated useLayoutEffect to include the toggle button in the header (only in dark mode)
• Modified styles to apply the background color based on the toggle state

The toggle is only available in dark mode and provides users with the flexibility to choose their preferred reading background.

[Slysoks]

Tp envoyer un fichier photo / vidéo pr voir ce que ça fait stp ?

[Louis454545]

Tp envoyer un fichier photo / vidéo pr voir ce que ça fait stp ?

Yes

[Louis454545]

c'est plus simple de faire comme ca

[tom-theret]

Au pire si tu es chaud, tu as juste à créer un thème pour le rendu...

[godetremy]

Faut inverser la couleurs du texte, pas rajouter un fond ! Tom HLR sera d'accord avec moi là dessus !

[Rexxt]

oui

[Louis454545]

Faut inverser la couleurs du texte, pas rajouter un fond ! Tom HLR sera d'accord avec moi là dessus !

Oui mais si la couleur du texte est bonne, c'est le truc le plus simple que j'ai trouvé

[Louis454545]

Car parfois le texte marche en mode sombre et en mode clair

[godetremy]

Ça marche pas juste parce que la couleurs est forcé ! Mais honnêtement il serait plus intéressant de rendre l'HTML en natif, histoire de résoudre se problème mais également les tailles de police, etc...

[tom-theret]

Ça marche pas juste parce que la couleurs est forcé ! Mais honnêtement il serait plus intéressant de rendre l'HTML en natif, histoire de résoudre se problème mais également les tailles de police, etc...

Oui mais pour cela il faudrait que tu créer une fonction qui détecte les couleurs... les classifies... puis à ce moment là appliquer la couleur de rendu de Papillon

[Louis454545]

Ça marche pas juste parce que la couleurs est forcé ! Mais honnêtement il serait plus intéressant de rendre l'HTML en natif, histoire de résoudre se problème mais également les tailles de police, etc...

Oui mais pour cela il faudrait que tu créer une fonction qui détecte les couleurs... les classifies... puis à ce moment là appliquer la couleur de rendu de Papillon

C'est pour ça j'ai juste mis un fond blanc comme sur gmail

[yannouuuu]

C'est pour ça j'ai juste mis un fond blanc comme sur gmail

Vraiment pas mal l'idée mais essaie d'appliquer ça dynamiquement et nativement ça serait nickel (comme les autres ont dit). Je passe la PR en draft mentionne moi qd elle mergeable 👌

[ecnivtwelve]

Ça marche pas juste parce que la couleurs est forcé ! Mais honnêtement il serait plus intéressant de rendre l'HTML en natif, histoire de résoudre se problème mais également les tailles de police, etc...

Le HTML est déja rendu en natif et on a le contrôle sur la manière dont il est rendu

[tryon-dev]

non

[Louis454545]

non

Pourquoi ptdr

[Louis454545]

non

Merci de ces explications très claires