Mettre en place une page web interactive avec javascript

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:

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:

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

style.css

Code:

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:

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

red.css

Code:

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