Merge pull request #170 from lakshmirajvagu/main

modified light theme

Alien.css

@@ -787,18 +787,53 @@ h3{
 
 /* Default light mode colors */
 :root {
-  --background-color: rgb(8, 8, 8);
-  --text-color: rgb(233, 217, 217);
-  --header-bg: lightgray;
+
+  --background-color:  #c3f8fa;
+  --text-color: #70abe6;
+  --header-bg: rgb(25, 46, 43);
+  #liveScore {
+    position: absolute;
+    top: 10px;
+    left: 134px;
+    font-size: 20px;
+    font-weight: bold;
+    color: #70abe6;
+  }
+  #liveLife {
+    position: absolute;
+    top: 42px;
+    left: 134px;
+    font-size: 20px;
+    font-weight: bold;
+    color: #70abe6;
+  }
+
 }
 
 h2{
   color: var(--text-color);
 }
 /* Dark mode colors */
 [data-theme="dark"] {
+  #liveScore {
+  position: absolute;
+  top: 10px;
+  left: 134px;
+  font-size: 20px;
+  font-weight: bold;
+  color: #dd8bbb;
+}
+#liveLife {
+  position: absolute;
+  top: 42px;
+  left: 134px;
+  font-size: 20px;
+  font-weight: bold;
+  color: #dd8bbb;
+}
+
   --background-color: #121212;
-  --text-color: #8d7d86;
+  --text-color: #dd8bbb;
   --header-bg: #1c1c1c;
 }
 
@@ -935,6 +970,7 @@ input:checked + .slider:before {
   margin: 20px 0;
 }
 
+
 .difficulty-label {
   font-size: 1.2rem;
   margin-right: 10px;

darkMode.js

@@ -1,22 +1,30 @@
-const checkbox = document.getElementById('checkbox')
-const modeLabel = document.getElementById('mode-label')
+const checkbox = document.getElementById('checkbox');
+const modeLabel = document.getElementById('mode-label');
+const body = document.body;  // Selecting the body to change the background image and text color
 
 // Check if dark mode is already enabled
 if (localStorage.getItem('theme') === 'dark') {
-    document.documentElement.setAttribute('data-theme', 'dark')
-    checkbox.checked = true
-    modeLabel.textContent = 'Dark Mode'
+    document.documentElement.setAttribute('data-theme', 'dark');
+    checkbox.checked = true;
+    modeLabel.textContent = 'Dark Mode';
+    body.style.backgroundImage = "url('path-to-dark-theme-image.jpg')";  // Set dark theme background image
+} else {
+    document.documentElement.setAttribute('data-theme', 'light');
+    modeLabel.textContent = 'Light Mode';
+    body.style.backgroundImage = "url('path-to-light-theme-image.jpg')";  // Set light theme background image
 }
 
 // Add event listener for toggle switch
 checkbox.addEventListener('change', () => {
     if (checkbox.checked) {
-        document.documentElement.setAttribute('data-theme', 'dark')
-        localStorage.setItem('theme', 'dark')
-        modeLabel.textContent = 'Dark Mode'
+        document.documentElement.setAttribute('data-theme', 'dark');
+        localStorage.setItem('theme', 'dark');
+        modeLabel.textContent = 'Dark Mode';
+        body.style.backgroundImage = "url('path-to-dark-theme-image.jpg')";  // Set dark theme background image
     } else {
-        document.documentElement.setAttribute('data-theme', 'light')
-        localStorage.setItem('theme', 'light')
-        modeLabel.textContent = 'Light Mode'
+        document.documentElement.setAttribute('data-theme', 'light');
+        localStorage.setItem('theme', 'light');
+        modeLabel.textContent = 'Light Mode';
+        body.style.backgroundImage = "url('path-to-light-theme-image.jpg')";  // Set light theme background image
     }
-})
+});