Added Theme Selector Feature to Pixel Love Letter Generator

Letter/index.html

@@ -34,6 +34,16 @@ <h2 class="section-title">Compose Your Love Letter</h2>
                 </div>
             </div>
 
+            <div class="theme-selector">
+                <label for="theme">Choose Theme: </label>
+                <select id="theme" onchange="changeTheme()">
+                    <option value="romantic">💗 Romantic</option>
+                    <option value="classic">📜 Classic</option>
+                    <option value="night">🌙 Night Mode</option>
+                </select>
+            </div>
+
+
             <!-- Preview Section -->
             <div class="preview-section">
                 <div id="letterPreviewArea" class="love-letter-paper">
@@ -66,4 +76,4 @@ <h2 class="section-title">Compose Your Love Letter</h2>
     </div>
     <script src="script.js"></script>
 </body>
-</html>
+</html>

Letter/script.js

@@ -149,6 +149,12 @@ window.onload = () => {
     inputTo.value = 'My Sweetheart';
     inputFrom.value = 'Your Secret Admirer';
     inputContent.value = "My Dearest,\n\nEvery pixel of my world shines brighter when you're in it. My heart beats in 8-bit rhythms for you, a nostalgic melody only we can hear.\n\nLike a classic arcade game, our love is an endless adventure, filled with thrilling quests and precious power-ups. With every level, my affection for you grows stronger, reaching for that high score of eternal bliss.\n\nYou are my Player Two, my ultimate companion in this magnificent journey. Thank you for making every moment feel like a cherished memory.\n\nWith all my love, forever and always.";
+    document.body.setAttribute("data-theme", "romantic"); // default theme
 
     updatePreview();
-};
+};
+
+function changeTheme() {
+    const theme = document.getElementById("theme").value;
+    document.body.setAttribute("data-theme", theme);
+}

Letter/style.css

@@ -411,4 +411,60 @@ body {
         min-width: 0;
         width: 100%;
     }
-}
+}
+
+/* Theme Selector Styles */
+.theme-selector {
+    margin-bottom: 20px;
+    font-family: 'VT323', monospace;
+    color: #ff99cc;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.theme-selector select {
+    padding: 5px 10px;
+    font-family: 'VT323', monospace;
+    border-radius: 5px;
+    border: 2px solid #ff99cc;
+    background-color: #3f3150;
+    color: #f0f0f0;
+    outline: none;
+    cursor: pointer;
+}
+
+/* Theme variations for body */
+body[data-theme="romantic"] {
+    background: linear-gradient(135deg, #2b1f3b 0%, #1a1425 100%);
+    color: #e0e0e0;
+}
+
+body[data-theme="classic"] {
+    background: linear-gradient(135deg, #fff9e6 0%, #fde4cf 100%);
+    color: #330033;
+}
+
+body[data-theme="night"] {
+    background: linear-gradient(135deg, #1e1e2f 0%, #3b1c32 100%);
+    color: #f5f5f5;
+}
+
+/* Optional: change letter paper color per theme */
+body[data-theme="romantic"] .love-letter-paper {
+    background-color: #ffe0f0;
+    border-color: #ff66aa;
+    color: #330033;
+}
+
+body[data-theme="classic"] .love-letter-paper {
+    background-color: #fff8e0;
+    border-color: #ffcc66;
+    color: #330033;
+}
+
+body[data-theme="night"] .love-letter-paper {
+    background-color: #2b1f3b;
+    border-color: #8844aa;
+    color: #f0e0ff;
+}