Mettre en place une page web interactive avec javascript

**Wendkuuni** · 12/11/2020, 01h06

Bonjour comment aller vous ?
La page web doit permettre a l utilisateur de changer de thème (style, couleur et animation)

**Doksuri** · 12/11/2020, 12h10

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

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>

default.css

Code css :

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

1
2
3
4
:root {
    --body-bg:grey;
    --color: #000;
}

style.css

Code css :

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

1
2
3
4
body {
    background-color: var(--body-bg);
    color: var(--color);
}

(et apres, les couleurs des themes que je veux gerer)
blue.css

Code css :

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

1
2
3
4
:root {
    --body-bg: #424286;
    --color: #fff;
}

red.css

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

Mettre en place une page web interactive avec javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager