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

**christian-67** · 23/02/2023, 17h34

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.

**ddaweb** · 23/02/2023, 18h28

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
@media(prefers-color-scheme: dark) {
    ...
}
@media(prefers-color-scheme: light) {
    ...
}

**christian-67** · 24/02/2023, 09h08

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.

**Doksuri** · 24/02/2023, 09h22

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 24/02/2023, 11h05

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

**ddaweb** · 24/02/2023, 16h20

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

Nom : theme_FF.jpg
Affichages : 53
Taille : 26,7 Ko

Nom : theme_FF.jpg
Affichages : 53
Taille : 26,7 Ko

**Doksuri** · 24/02/2023, 18h01

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 :/

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

CSS

Vue hybride

Discussions similaires

Partager

Partager