background color picker update

index.html

@@ -58,6 +58,13 @@ <h1>
         </div>
     </div>
 
+    <div class="theme-picker">
+        <label for="bgColorPicker">Choose Background Color:</label>
+        <input type="color" id="bgColorPicker" name="bgColorPicker">
+        <button id="resetColorBtn">Reset Background</button>
+    </div>
+
+
     <script src="script.js"></script>
 
 </body>

script.js

@@ -296,5 +296,29 @@ document.addEventListener('fullscreenchange', () => {
     }
 });
 
+const bgColorPicker = document.getElementById('bgColorPicker');
+const resetColorBtn = document.getElementById('resetColorBtn');
+
+window.addEventListener('DOMContentLoaded', () => {
+    const savedColor = localStorage.getItem('backgroundColor');
+    if (savedColor) {
+        document.body.style.backgroundColor = savedColor;
+        bgColorPicker.value = savedColor;
+    }
+});
+
+bgColorPicker.addEventListener('input', (event) => {
+    const color = event.target.value;
+    document.body.style.backgroundColor = color;
+    localStorage.setItem('backgroundColor', color); 
+});
+
+// Reset button functionality
+resetColorBtn.addEventListener('click', () => {
+    document.body.style.backgroundColor = '';
+    localStorage.removeItem('backgroundColor');
+});
+
+
 editor.setValue(tabs[0].content, -1);
 runCode();

styles.css

@@ -245,4 +245,29 @@ body.dark-mode {
 
 .focus-mode #preview {
     height: 100vh;
-}
+}
+
+.theme-picker {
+    margin: 20px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+#bgColorPicker {
+    padding: 0.5px;
+}
+
+#resetColorBtn {
+    padding: 5px 10px;
+    background-color: #89b4fa;
+    color: #1e1e2e;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+#resetColorBtn:hover {
+    background-color: #b4befe;
+}