Added Theme Color Text

CohPhol · Sep 27, 2024 · a0c25a4 · a0c25a4
1 parent 39a2738
commit a0c25a4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/assets/js/color-mode.js b/assets/js/color-mode.js
@@ -1,11 +1,13 @@
 const themeSwitch = document.getElementById('theme-switch');
+const themeText = document.getElementById('theme-color');
 const body = document.body;
 
 themeSwitch.addEventListener('change', function () {
     if (themeSwitch.checked) {
 
         body.classList.remove('light-mode');
         body.classList.add('dark-mode');
+        themeText.textContent = 'Dark';
         body.style.backgroundColor = '#333333';
         cards.forEach(card => {
             card.classList.remove('light-mode');
@@ -15,6 +17,7 @@ themeSwitch.addEventListener('change', function () {
 
         body.classList.remove('dark-mode');
         body.classList.add('light-mode');
+        themeText.textContent = 'Light';
         body.style.backgroundColor = '#ffffff';
         cards.forEach(card => {
             card.classList.remove('dark-mode');

diff --git a/index.html b/index.html
@@ -70,9 +70,12 @@ <h5 class="card-title">Card 6</h5>
       </div>
     </div>
     <div class="card light-mode" draggable="true">
-      <div class="theme-toggle">
-        <input type="checkbox" id="theme-switch">
-        <label for="theme-switch" class="switch"></label>
+      <div class="card-body">
+        <h5 class="card-title" id="theme-color">Light</h5>
+        <div class="theme-toggle">
+          <input type="checkbox" id="theme-switch">
+          <label for="theme-switch" class="switch"></label>
+        </div>
       </div>
     </div>
   </div>