8768 sujets

Développement web côté serveur, CMS

Dark mode

salut
j'ai 2 feuilles de syle css, une pour le dark mode et l'autre pour le light mode

plutot que choisir avec les boutons dark ou light,

je voudrais détecter si le navigateur ou l'ordi du visiteur est en dark ou light mode
avec @media (prefers-color-scheme: light) par exemple
et attribuer automatiquement le fichier css correspondant
<link rel="stylesheet" href="fichierdark ou fichierlight.css"

si c'est faisable
merci
Modifié par drphilgood (16 Jun 2024 - 13:12)
Modérateur
Salut,

Dans ce cas, tu dois passer par le JS pour faire ce genre de chose (matchMedia + addEventListener change).

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link id="css-file" rel="stylesheet" href="light.css">
</head>
<body>
    <p>ok</p>
    <script src="app.js"></script>
</body>
</html>


light.css

body{
    background-color: #fff;
    color: #000;
}


dark.css

body{
    background-color: #000;
    color: #fff;
}


app.js

(()=>{
    let cssFile = ()=>{
        let cssFile = document.getElementById('css-file')
        cssFile.href = `${window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light"}.css`
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
            cssFile.href = `${event.matches ? "dark" : "light"}.css`
        });
    }
    window.addEventListener('DOMContentLoaded', e =>{
        cssFile()
    })
})()

Modifié par niuxe (16 Jun 2024 - 14:57)
Salut. Alors, c'est faisable, mais ce n'est pas forcément souhaitable. En effet, on peut très bien être en dark mode et vouloir le site en light, et inversement.
Modifié par Olivier C (18 Jun 2024 - 08:04)
Modérateur
Olivier C a écrit :
Salut. Alors, c'est faisable, mais ce n'est pas forcément souhaitable. En effet, on peut très bien être en dark mode et voir le site en light, et inversement.


On peut imaginer un bouton afin que l'utilisateur puisse changer le mode de rendu. Avec le localStorage, on sauvegarde son souhait.
@drphilgood

Salut,
je ne comprends pas bien. Tu veux détecter si le site du visiteur est en mode dark ou light. S'il l'est, c'est qu'il l'a mis avec un module complémentaire, par exemple :
https://addons.mozilla.org/fr/firefox/addon/darkreader/
"Vous pouvez régler la luminosité, le contraste, le filtre sépia, le mode sombre, les paramètres de police et la liste des sites ignorés".
Pourquoi dans ce cas imposer ton mode dark/light, qui risque d'être moins fin que celui du module ?
Par exemple, je recherche des réglages fins pour ce mode. Pas plus tard qu'hier soir, j'ai assisté à un spectacle de danse amateur et j'ai voulu filmer. Sur l'écran de mon mobile, la lumière était crue et des spectateurs se sont tournés vers moi. Un module avec un mode "lumière noire" serait plus discret pour ce genre de situation. Pourras-tu le faire aussi fin sur tes pages css ?
Par contre, l'effet pervers de ce module, c'est qu'en phase développement d'un site, il faut le désactiver, sinon la construction du contraste du site et des couleurs seront complètement faussées.
je me disais, entre 2 siestes, que si un visiteur a activé le dark mode (dans les réglages systeme sur Mac) alors le site peut être livré dark mode.

a niuxe:
je vais essayer ta méthode JS

a olivier:
je ne veux rien imposer, je place un bouton pour changer de mode.
mais je dois de toute façon choisir un des fichiers css par defaut

a bongota:
Ma feuille de style dark est exactement ce que je veux, pas une interprétation d'une fonction automatique

donc, en gros je met le fichier css light par défaut ou dark ?
j'ai vu des statistiques pour voir quel mode est le préféré, et je trouve tout et son contraire y compris pour la fatigue oculaire

ouf
merci
Modifié par drphilgood (16 Jun 2024 - 18:54)
Modérateur
Je te laisse finir (J'ai fait ça à l'arrache). Il faudra que tu gères un peu mieux la sauvegarde. 


class Darkmode{
    #cssFile = document.getElementById('css-file')
    #isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches

    constructor(){
        this.#load()
        this.#changeCssFile()
    }

    #changeCssFile(){
        this.#cssFile.href =  `${this.#isDarkMode? 'dark' : 'light'}.css`
        return this
    }

    osChange(){
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e =>{
            this.#isDarkMode = e.matches
            this.#changeCssFile().#save()
        })
        return this
    }

    buttonChange(select){
        document.querySelector(select).addEventListener('pointerdown', e => {
            this.#isDarkMode = !this.#isDarkMode
            this.#changeCssFile().#save()
        })
        return this
    }

    #save(){
        localStorage.setItem('darkmode', this.#isDarkMode)
        return this
    }

    #load(){
        if(localStorage.getItem('darkmode') !== undefined){
            this.#isDarkMode = JSON.parse(localStorage.getItem('darkmode').toLowerCase())
        }
        return this
    }
}
(()=>{
    let darkmode = new Darkmode()
    darkmode.buttonChange('button').osChange()
})()




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link id="css-file" rel="stylesheet" href="light.css">
</head>
<body>
    <p>ok</p>
    <button>changer de mode</button>
    <script src="app.js"></script>
</body>
</html>

Modifié par niuxe (16 Jun 2024 - 21:59)
oups
je vais devoir lire le JS facile en 10 volumes reliés cuir pour comprendre
je vais essayer de ne pas exploser mes derniers neurones.

merci niuxe
Modérateur
drphilgood a écrit :
oups
je vais devoir lire le JS facile en 10 volumes reliés cuir pour comprendre
je vais essayer de ne pas exploser mes derniers neurones.

merci niuxe


Il n'y a rien de compliqué. Il y a le pattern de chainage (c'est basique) et les attributs/method private (ES2021/ES2022). À vrai dire, je ne suis pas fan du private en JS. Je préfère encore préfixer par un undescore (comme en python).

Les axes d'améliorations :
- sortir le bouton de la class
- sortir le node link de la class
- améliorer la sauvegarde
Modifié par niuxe (16 Jun 2024 - 22:06)
Modérateur
drphilgood a écrit :
ok merci
bonne nuit


Merci à toi aussi. Mais avant, je vais me revoir : Birdy. La BA

Alan Parker :
Missipi Burning
Midnight Express
The Wall
Evita
etc.
Modifié par niuxe (16 Jun 2024 - 22:11)
niuxe a écrit :

Alan Parker :
Missipi Burning
Midnight Express
The Wall
Evita
etc.



j'ai tout çà sauf evita
Modifié par drphilgood (17 Jun 2024 - 11:05)
voila uniquement en css
le @media détecte si pref systeme du visiteur est en lightmode ou darkmode
et réagi au changement de mode
et utilise la partie css
https://royalplayaclub.be/test2.html
fonctionne dans safari chrome firefox brave (sur mac)
et sur pc ?


<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/fdstest.css" as="style">
</head>
<body>
<p class="txt">
	si dark= bg bleu foncé, txt clair - si light= bg orange txt foncé
</p>
</body>
</html>




@charset "utf-8";

@media(prefers-color-scheme: light) {
html, body {
background-color: #feb;
}
p {
background-color: #eda;
margin: 20px;
padding: 20px;
height: 100px;
width: 300px;
}
.txt {
font-size: 2rem;
color: #000;
}
}

@media(prefers-color-scheme: dark) {
html, body {
background-color: #024;
}
p {
background-color: #268;
margin: 20px;
padding: 20px;
height: 100px;
width: 300px;
}
.txt {
font-size: 2rem;
color: #fff;
}
}

Modifié par drphilgood (17 Jun 2024 - 11:14)
Modérateur
Olivier C a écrit :
Salut. Alors, c'est faisable, mais ce n'est pas forcément souhaitable. En effet, on peut très bien être en dark mode et voir le site en light, et inversement.


Bien sûr que ça va fonctionner. Mais tu voulais le différencier dans des fichiers séparés. Ensuite, je rejoins ce qu'a indiqué Olivier. Si tu suis le code que je t'ai soumis, tu as un bouton pour sauvegarder le souhait de l'utilisateur. À noter que ce bouton pourrait changer une class dans le <body> ou <html>. Ainsi, tu gardes un seul fichier. Tout dépend comment tu comptes organiser ton css. Si tu souhaites garder tout dans un seul fichier, tu peux traiter ça comme un site multiunivers (plusieurs couleurs/une couleur par section).

[HS]
Evita est une comédie musicale avec Antonio Banderas et Madonna. En général, je n'aime pas les comédies musicales et celui-là ne fait pas exception. Cependant, l'histoire (vraie) est intéressante.
[/HS]
Modifié par niuxe (17 Jun 2024 - 11:29)
Prévenir un modérateur
Répondre au sujet
Aller à