File tree Expand file tree Collapse file tree 2 files changed +9
-3
lines changed Expand file tree Collapse file tree 2 files changed +9
-3
lines changed Original file line number Diff line number Diff line change 1
1
const themeSwitch = document . getElementById ( 'theme-switch' ) ;
2
+ const themeText = document . getElementById ( 'theme-color' ) ;
2
3
const body = document . body ;
3
4
4
5
themeSwitch . addEventListener ( 'change' , function ( ) {
5
6
if ( themeSwitch . checked ) {
6
7
7
8
body . classList . remove ( 'light-mode' ) ;
8
9
body . classList . add ( 'dark-mode' ) ;
10
+ themeText . textContent = 'Dark' ;
9
11
body . style . backgroundColor = '#333333' ;
10
12
cards . forEach ( card => {
11
13
card . classList . remove ( 'light-mode' ) ;
@@ -15,6 +17,7 @@ themeSwitch.addEventListener('change', function () {
15
17
16
18
body . classList . remove ( 'dark-mode' ) ;
17
19
body . classList . add ( 'light-mode' ) ;
20
+ themeText . textContent = 'Light' ;
18
21
body . style . backgroundColor = '#ffffff' ;
19
22
cards . forEach ( card => {
20
23
card . classList . remove ( 'dark-mode' ) ;
Original file line number Diff line number Diff line change @@ -70,9 +70,12 @@ <h5 class="card-title">Card 6</h5>
70
70
</ div >
71
71
</ div >
72
72
< div class ="card light-mode " draggable ="true ">
73
- < div class ="theme-toggle ">
74
- < input type ="checkbox " id ="theme-switch ">
75
- < label for ="theme-switch " class ="switch "> </ label >
73
+ < div class ="card-body ">
74
+ < h5 class ="card-title " id ="theme-color "> Light</ h5 >
75
+ < div class ="theme-toggle ">
76
+ < input type ="checkbox " id ="theme-switch ">
77
+ < label for ="theme-switch " class ="switch "> </ label >
78
+ </ div >
76
79
</ div >
77
80
</ div >
78
81
</ div >
You can’t perform that action at this time.
0 commit comments