Thème CSS dans fichier PHP de création d'image

Version imprimable

23/02/2023, 17h34
christian-67

Thème CSS dans fichier PHP de création d'image

Bonjour,

Je suis en train de faire mon site, et j'ai besoin de votre aide.
Dans mon CSS, j'ai déterminé les couleurs selon 2 thèmes (clair et foncé).

J'ai un fichier PHP qui me dessine un graphique, fichier qui génère une image grâce aux ligne header('Content-Type: image/png'); et imagepng($image);.

Comment faire pour que le fichier php récupère le thème en cours et pour qu'il prenne les couleurs du thème ?

Le thème est déterminé par la ligne <html lang="en" class="themeClair"> de ma page.
J'aurai bien aimé ne pas passer par le texte en dur dans la balise HTML, mais plutôt utiliser une variable globale Javascript, mais je n'ai pas trouvé comment faire.

Merci d'avance.
23/02/2023, 18h28
ddaweb
Bonsoir,

Pour gérer les 2 thèmes, je suis parti du thème claire et dans le CSS un @media(prefers-color-scheme: dark) ce qui change pour le thème foncé :
Code:

1 2 3 4 // CSS thème clair @media(prefers-color-scheme: dark) { // CSS propre au thème foncé, ce qui est modifié pour ce thème }
Chez moi cela fonctionne très bien pour les navigateurs modernes.

Ou si les 2 thèmes sont différents :
Code:

1 2 3 4 5 6 @media(prefers-color-scheme: dark) { ... } @media(prefers-color-scheme: light) { ... }
24/02/2023, 09h08
christian-67

Bonjour,

Merci, mais ça ne m'a pas aidé à répondre à ma question.
Finalement, j'ai trouvé comment faire : j'écris un cookie qui enregistre le thème affiché, et dans mon code php de création de l'image, je récupère le contenu du cookie pour adapter les couleurs.
Pour les couleurs, je les ai écrites en dur dans le php.

Christian.

le probleme du prefers-color-scheme est que ca se fait automatiquement... l'utilisateur n'a pas le choix. par exemple s'il a son OS en dark, le site sera automatiquement en dark... l'utilisateur ne pourra pas "forcer" le theme de son choix

pour ma part : je le fais en JS

deja, dans le header je choisis un theme par default
Code:

1 2 3 4 5 6 [...] <head> <link href="styles/themes/dark.css" media="all" rel="stylesheet" type="text/css" /> <link href="styles/common.css" media="all" rel="stylesheet" type="text/css" /> </head> [...]
quelque part dans ma page, j'ai mes boutons pour mes themes
Code:

1 2 3 4 5 6 [...] <label for="forceTheme_dark">dark theme</label> <input id="forceTheme_dark" type="radio" name="forceTheme" class="forceTheme" value="dark" checked="checked" /> <label for="forceTheme_light">light theme</label> <input id="forceTheme_light" type="radio" name="forceTheme" class="forceTheme" value="light" /> [...]
puis, en JS je vais chercher le theme choisis par l'utilisateur dans le localstorage (pour pas qu'il ait a le changer a chaque visite)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 const lsPrefix = 'unPrefix_';// c'est une habitude que j'ai, c'est pas necessaire const DEFAULT_THEME = 'dark'; let activeTheme = JSON.parse(localStorage.getItem(`${lsPrefix}theme`)) || DEFAULT_THEME; document.querySelector(`link[href="styles/themes/${DEFAULT_THEME}.css"]`).href = `styles/themes/${activeTheme}.css`; document.querySelector(`.forceTheme[value="${activeTheme}"]`).checked = 'checked'; document.querySelectorAll('.forceTheme').forEach(el => { el.addEventListener('click', ({target}) => { document.querySelector(`link[href="styles/themes/${activeTheme}.css"]`).href = `styles/themes/${target.value}.css`; activeTheme = target.value; localStorage.setItem(`${lsPrefix}theme`, JSON.stringify(activeTheme)); }); });
l'inconvegnant est que si l'utilisateur n'a pas choisis le theme par default, il peut voir un "flash" [theme default] -> [theme choisis] le temps que la page se charge

24/02/2023, 11h05
NoSmoking

Bonjour,
à voir/lire si ce n'est déjà fait : A Complete Guide to Dark Mode on the Web
24/02/2023, 16h20
ddaweb

1 pièce(s) jointe(s)

Citation:

Envoyé par Doksuri

le probleme du prefers-color-scheme est que ca se fait automatiquement... l'utilisateur n'a pas le choix. par exemple s'il a son OS en dark, le site sera automatiquement en dark... l'utilisateur ne pourra pas "forcer" le theme de son choix

Ce n'est pas tout à fait vrai, dans Chrome et Firefox il est possible de modifier le thème : Automatique (donc OS) - Clair ou Sombre

Voici pour FireFox : via les 3 barres -> paramètres, dans général

Pièce jointe 634818
24/02/2023, 18h01
Doksuri

Citation:

Envoyé par ddaweb

Ce n'est pas tout à fait vrai, dans Chrome et Firefox il est possible de modifier le thème : Automatique (donc OS) - Clair ou Sombre

je suis d'accord avec toi... mais honnetement... qui change "souvent" cette config ?
=> tu vas changer ta config juste pour 1 site ? non, tu preferes cliquer sur un bouton que te propose directement le site
si je veux le site X en dark, mais le site Y en light, je ne vais pas m'amuser a changer de config quand je change d'onglet :/