Skip to content

Commit a0c25a4

Browse files
committed
Added Theme Color Text
1 parent 39a2738 commit a0c25a4

File tree

2 files changed

+9
-3
lines changed

2 files changed

+9
-3
lines changed

assets/js/color-mode.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
const themeSwitch = document.getElementById('theme-switch');
2+
const themeText = document.getElementById('theme-color');
23
const body = document.body;
34

45
themeSwitch.addEventListener('change', function () {
56
if (themeSwitch.checked) {
67

78
body.classList.remove('light-mode');
89
body.classList.add('dark-mode');
10+
themeText.textContent = 'Dark';
911
body.style.backgroundColor = '#333333';
1012
cards.forEach(card => {
1113
card.classList.remove('light-mode');
@@ -15,6 +17,7 @@ themeSwitch.addEventListener('change', function () {
1517

1618
body.classList.remove('dark-mode');
1719
body.classList.add('light-mode');
20+
themeText.textContent = 'Light';
1821
body.style.backgroundColor = '#ffffff';
1922
cards.forEach(card => {
2023
card.classList.remove('dark-mode');

index.html

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,12 @@ <h5 class="card-title">Card 6</h5>
7070
</div>
7171
</div>
7272
<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>
7679
</div>
7780
</div>
7881
</div>

0 commit comments

Comments
 (0)