added pink mode

src/app.html

@@ -8,6 +8,7 @@
 	<meta name="viewport" content="width=device-width" />
 	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
 	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Winky+Sans:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css2?family=Emilys+Candy&display=swap" rel="stylesheet">
 	%sveltekit.head%
 </head>
 

src/lib/styles/main.css

@@ -23,7 +23,7 @@
 
     --settings-input-bg-color: #1b1b1d;
     --settings-input-text-color: white;
-    --settomgs-input-border-color: #333;
+    --settings-input-border-color: #333;
 
     --shadow-color: rgba(0, 0, 0, 0.3);
 }
@@ -53,11 +53,49 @@
 
     --settings-input-bg-color: #f0f0f0;
     --settings-input-text-color: black;
-    --settomgs-input-border-color: #ccc;
+    --settings-input-border-color: #ccc;
 
     --shadow-color: rgba(0, 0, 0, 0.3);
 }
 
+[data-theme='pink'] {
+    /* Pleasant Pink theme with good contrast */
+    --bg-color: #e0218a; /* A vibrant pink for the background */
+    --content-bg-color: #fddde6; /* A softer, light pink for content background */
+    --text-color: #e52b50; /* Black text for high contrast and readability */
+    --prompt-text-color: white; /* Black text for prompts */
+
+    --bingo-cell-border-color: #fb607f; /* A slightly darker pink for bingo cell borders */
+    --bingo-cell-bg-color: #ffc0cb; /* Light pink for the bingo cell background */
+    --bingo-cell-bg-color-hover: #e63e62; /* A medium pink for hover effect */
+    --bingo-cell-clicked-bg-color: #e0218a; /* Vibrant pink for clicked state */
+
+    --button-bg-color: #ffc0cb; /* Black buttons for strong contrast */
+    --button-color: var(--bg-color); /* Button text in vibrant pink */
+    --button-bg-color-hover: #e63e62; /* Hover effect in medium pink for buttons */
+
+    --warning-bg-color: rgb(255, 204, 0); /* A bright yellow for warnings (keeps visibility) */
+
+    --overlay-bg-color: rgba(255, 255, 255, 0.8); /* Slightly transparent white overlay */
+    --overlay-content-bg-color: #ffc0cb; /* Light pink background for overlay content */
+    --overlay-content-border-color: #e0218a; /* Vibrant pink for overlay borders */
+
+    --settings-bg-color: #e0218a; /* Vibrant pink for settings background */
+    --settings-element-bg-color: #ffc0cb; /* Light pink for settings element background */
+
+    --settings-input-bg-color: #fb607f; /* Medium pink for input background */
+    --settings-input-text-color: black; /* Black text for inputs */
+    --settings-input-border-color: #e63e62; /* Darker pink for input borders */
+
+    --shadow-color: rgba(0, 0, 0, 0.3); /* Subtle shadow to give depth */
+
+    body, button {
+        font-family: "Emilys Candy", serif;
+        font-weight: 400;
+        font-style: normal;
+    }
+}
+
 body {
     font-family: "Noto Sans", sans-serif;
     font-size: 16px;
@@ -129,6 +167,7 @@ body {
 
 .bingo-cell.clicked {
     background-color: var(--bingo-cell-clicked-bg-color);
+    color: var(--prompt-text-color);
 }
 
 button {
@@ -181,6 +220,7 @@ button:hover {
     border-radius: 8px;
     min-width: 300px;
     text-align: center;
+    justify-content: center;
     box-shadow: 0 4px 8px var(--shadow-color);
     border: 2px solid var(--overlay-content-border-color);
 }
@@ -255,6 +295,7 @@ button:hover {
     padding: 15px;
     margin: 10px;
     border-radius: 8px;
+    color: var(--prompt-text-color);
     box-shadow: inset 0 4px 8px var(--shadow-color);
 }
 
@@ -276,8 +317,10 @@ button:hover {
     text-align: center;
     margin-top: auto;
     margin-bottom: auto;
+    color: var(--prompt-text-color);
 }
 
 .cookie-notice {
     margin-top: auto;
+    color: var(--prompt-text-color);
 }

src/routes/+page.svelte

@@ -226,17 +226,26 @@ Bingo Item 25`;
   }
 
   function triggerConfetti() {
-    // `party.confetti` can be used for screen-wide confetti
-    party.confetti(document.body, {
-      count: party.variation.range(50, 2000), // Number of confetti pieces
-      spread: 70, // Spread of confetti
-      size: party.variation.range(0.5, 1.5), // Size of confetti
-    });
+    if (theme === 'dark') {
+      // `party.confetti` can be used for screen-wide confetti
+      party.confetti(document.body, {
+        count: party.variation.range(50, 2000), // Number of confetti pieces
+        spread: 70, // Spread of confetti
+        size: party.variation.range(0.5, 1.5), // Size of confetti
+      });
+    } else {
+      // pink confetti
+      party.sparkles(document.body, {
+        count: party.variation.range(50, 10000), // Number of confetti pieces
+        speed: party.variation.range(500, 500), // Speed of confetti
+        size: party.variation.range(0.5, 1.5), // Size of confetti
+      });
+    }
   }
 
   // Toggle between dark and light themes
   function toggleTheme() {
-    theme = theme === 'dark' ? 'light' : 'dark';
+    theme = theme === 'dark' ? 'pink' : 'dark';
     document.documentElement.setAttribute('data-theme', theme);
     setThemeCookie(theme);
   }
@@ -301,6 +310,11 @@ Bingo Item 25`;
           <i style="margin-bottom: 10px;">A game is currently running. Changes made to the configuration are not being updated to the grid.</i>
         {/if}
       </div>
+      {#if theme === 'pink'}
+      <div style="justify-content: center; flex-direction: column" class="notice-box">
+        <img src="/hello_barbie_bingo.png" width="80%" alt="Confetti" />
+      </div>
+      {/if}
       <div class="notice-box cookie-notice">
         <p>This Website uses functional Cookies to store the Running Bingo Game, Settings and the Entered Bingo Entries.<br><br>They can be deleted in the Settings.</p>
       </div>
@@ -336,6 +350,10 @@ Bingo Item 25`;
     <div class="overlay-content">
       <h2>Bingo!</h2>
       <p>You achieved a new Bingo!<br>You now have <b>{bingoCount}</b> Bingos.</p>
+      {#if theme === 'pink'}
+        <img src="/congrats_bingo.png" height="500vh" alt="Confetti" />
+        <br>
+      {/if}
       <button id="close-alert" class="close-btn">Close</button>
     </div>
   </div>
@@ -366,7 +384,7 @@ Bingo Item 25`;
           <div class="settings-box flex-column-item">
             <h3>Display</h3>
             <div class="settings-element">
-              <button on:click={toggleTheme}>Toggle Dark/Light Mode</button>
+              <button on:click={toggleTheme}>Toggle Dark/Lit Mode</button>
             </div>
           </div>
           <div class="settings-box flex-column-item">