Changer la couleur du background puis la couleur du texte

Version imprimable

1 pièce(s) jointe(s)

Bonsoir

Je désire changer la couleur du background et la couleur du texte
via un bouton

Pièce jointe 646044

mon code:

Code:

1
2
3
4
5
6
7
            <div class="fond">
                    <p>Dark</p> 
                          <div class="barre" id="barre">
                                <div class="boule" id="boule"></div>
                          </div>
                     <p>Light</p>
            </div>

code JS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
        const btn=document.getElementById('barre');
        const boule=document.getElementById('boule');
 
        let status=0;
 
        btn.addEventListener('click', toggleMode)
 
        function toggleMode(){
            if(status === 0){
                document.documentElement.style.setProperty('--bg-color', 'white')
                document.documentElement.style.setProperty('--text-color', 'black')
            }
        }

mais ce ne marche pas

Pourrais-je avoir des pistes en vue de résoudre mon problème ?

Merci.

Salut labarre2002,

Et en ajoutant ou en supprimant une class dans ta balise.

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fond {
            background: #ffffff;
            color: #000;
        }
 
        .fonddark {
            background: black;
            color: #ffffff;
        }
 
        input[type='checkbox'], label {
            width: 40px;
            height: 40px;
            cursor: pointer;
            font-size: 2em;
            vertical-align: sub;
            user-select: none;
        }
    </style>
 
</head>
 
<body>
    <div class="fond">
        <p>Dark</p>
        <div class="barre" id="barre">
            <div class="boule" id="boule"></div>
        </div>
        <p>Light</p>
 
        <label><input type="checkbox">WHITE or BLACK</label>
    </div>`
    </div>
 
    <script>
        const switchSelect = document.getElementsByClassName('switch')[0]
        const fond = document.getElementsByClassName('fond')[0]
 
        switchSelect.addEventListener('change', () => {
            switchSelect.querySelector('input').checked === false ? fond.classList.remove('fonddark') : fond.classList.add('fonddark')
        })
 
    </script>
</body>
 
</html>

J'ai rajouté une balise input checkbox pour l'exemple.

03/11/2023, 20h56
labarre2002

@ASCIIDEFOND

Merci pour ton méssage

ou ça

Code:

1
2
document.documentElement.style.backgroundColor='white'
         document.documentElement.style.color='black'

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>  
 
        input[type='checkbox'], label {
            width: 40px;
            height: 40px;
            cursor: pointer;
            font-size: 2em;
            vertical-align: sub;
            user-select: none;
        }
                
                .boule{
                background:red;
                height:20px;
                width:20px;
                border-radius:10px;
                }
                
                .barre{
                background:gray;
                height:20px;
                width:60px;
                border-radius:10px
                }
                
    </style>
	<script>
        
        addEventListener('load', () => {
        
                document.getElementById('boule').style.transition="all 0.2s ease-out"
                
                document.documentElement.style.transition="all 0.5s ease-out"
 
        document.getElementById('switch').addEventListener('click', () => {
                
                var el=document.documentElement
                
                if(el.style.backgroundColor=='white' || el.style.backgroundColor==""){
                        el.style.backgroundColor='black'
                        el.style.color="white"
                        document.getElementById('boule').style.marginLeft="70%"
                }
                else{
            el.style.backgroundColor='white'
                        el.style.color="black"
                        document.getElementById('boule').style.marginLeft="0%"
                        }
        })
        })
 
    </script>
 
</head>
 
<body>
 
	<label>WHITE or BLACK</label>
<div class="fond">
		<p>Dark</p>
		<div class="barre" id='switch'>
			<div class="boule" id="boule"></div>
		</div>
		<p>Light</p>
</div>
 
</body>
</html>