Bonjour comment aller vous ?
La page web doit permettre a l utilisateur de changer de thème (style, couleur et animation)
Bonjour comment aller vous ?
La page web doit permettre a l utilisateur de changer de thème (style, couleur et animation)
je ne sais pas quelle est la meilleure approche pour ca,
mais perso, je prefere passer par du css, pour la gestion des themes (avec variables css)
pour ca, j'utilise 2 fichiers de base : default.css & style.css (apres, ce sera 1 fichier css / couleur de theme)
index.htmldefault.css
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <title>switch theme</title> <link href="default.css" media="screen" rel="stylesheet" /> <link href="style.css" media="screen" rel="stylesheet" /> </head> <body> <div>un theme de choix !</div> <button class="switchTheme" data-theme="default">default</button> <button class="switchTheme" data-theme="red">red</button> <button class="switchTheme" data-theme="blue">blue</button> </body> <script> let activeTheme = 'default'; document.querySelectorAll('.switchTheme').forEach(el => { el.addEventListener('click', ({target}) => { document.querySelector(`link[href="${activeTheme}.css"]`).href = `${target.dataset.theme}.css`; activeTheme = target.dataset.theme; }); }); </script> </html>style.css
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 :root { --body-bg:grey; --color: #000; }(et apres, les couleurs des themes que je veux gerer)
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 body { background-color: var(--body-bg); color: var(--color); }
blue.cssred.css
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 :root { --body-bg: #424286; --color: #fff; }
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 :root { --body-bg: #814c4c; --color: #fff; }
ainsi : toute la logique CSS reste dans le meme fichier (style.css), et les subtilites des themes est geree dans chacun des fichiers avec une simple mise a jour des variables
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager