From c7b7693b0e4e084f161d0f7872ff2099537aa9d0 Mon Sep 17 00:00:00 2001
From: CyberSphinxxx <johnlemargonzales@gmail.com>
Date: Sun, 15 Sep 2024 18:54:55 +0800
Subject: [PATCH] background color picker update

---
 index.html |  7 +++++++
 script.js  | 24 ++++++++++++++++++++++++
 styles.css | 27 ++++++++++++++++++++++++++-
 3 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 334a61a..86adee7 100644
--- a/index.html
+++ b/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>
diff --git a/script.js b/script.js
index e9a3dc5..f3c59da 100644
--- a/script.js
+++ b/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();
diff --git a/styles.css b/styles.css
index 6f8eb24..baa4f09 100644
--- a/styles.css
+++ b/styles.css
@@ -245,4 +245,29 @@ body.dark-mode {
 
 .focus-mode #preview {
     height: 100vh;
-}
\ No newline at end of file
+}
+
+.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;
+}