From 08724192b356ef8b88d397e34dd1fcc5a9355134 Mon Sep 17 00:00:00 2001
From: Zakaria <zbenmo1@wgu.edu>
Date: Thu, 21 May 2026 13:26:30 -0400
Subject: [PATCH] FIX: dark mode is default now/Pressing enter

---
 CSS/styles.css           | 31 +++++++++++++++++--------------
 fancy-wordle-modern.html |  6 +++---
 index.html               |  6 +++---
 script.js                | 17 ++++++++++++-----
 4 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/CSS/styles.css b/CSS/styles.css
index 01c891a..34bcdfb 100644
--- a/CSS/styles.css
+++ b/CSS/styles.css
@@ -58,14 +58,15 @@ body.intro-active .app-shell {
 }
 
 .intro-overlay {
-  --intro-bg: #111111;
-  --intro-fg: #fafafa;
-  --intro-border: #e5e5e5;
+  --intro-bg: oklch(18% 0.018 50);
+  --intro-surface: oklch(24% 0.018 50);
+  --intro-fg: oklch(96% 0.014 70);
+  --intro-border: oklch(33% 0.018 50);
   --intro-accent: #2f6feb;
-  --intro-tile-empty: #3a3a3c;
-  --intro-tile-wrong: #787c7e;
-  --intro-tile-misplaced: #c9b458;
-  --intro-tile-correct: #6aaa64;
+  --intro-tile-empty: oklch(26% 0.018 50);
+  --intro-tile-wrong: var(--absent);
+  --intro-tile-misplaced: var(--present);
+  --intro-tile-correct: var(--correct);
   --intro-font-mono: ui-monospace, "JetBrains Mono", monospace;
 
   position: fixed;
@@ -75,7 +76,9 @@ body.intro-active .app-shell {
   min-block-size: 100svh;
   place-items: center;
   overflow: hidden;
-  background: linear-gradient(180deg, #181818 0%, var(--intro-bg) 58%, #080808 100%);
+  background:
+    radial-gradient(circle at 12% 0%, oklch(88% 0.065 45 / 0.14), transparent 34rem),
+    var(--intro-bg);
   color: var(--intro-fg);
   font-family: var(--font-body);
   opacity: 1;
@@ -96,12 +99,12 @@ body.intro-active .app-shell {
 
 .intro-overlay::before {
   inset-block-start: 0;
-  background: linear-gradient(180deg, rgba(17, 17, 17, 0.85), transparent);
+  background: linear-gradient(180deg, color-mix(in oklch, var(--intro-bg), transparent 12%), transparent);
 }
 
 .intro-overlay::after {
   inset-block-end: 0;
-  background: linear-gradient(0deg, rgba(17, 17, 17, 0.88), transparent);
+  background: linear-gradient(0deg, color-mix(in oklch, var(--intro-bg), transparent 10%), transparent);
 }
 
 .intro-overlay.is-dismissing {
@@ -166,9 +169,9 @@ body.intro-active .app-shell {
   inset: 0;
   display: grid;
   place-items: center;
-  border: 1px solid rgba(229, 229, 229, 0.18);
+  border: 1px solid color-mix(in oklch, var(--intro-border), transparent 35%);
   background: var(--intro-tile-empty);
-  box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.08);
+  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--intro-fg), transparent 92%);
   color: var(--intro-fg);
   font-family: var(--font-body);
   font-size: clamp(28px, 6vw, 78px);
@@ -238,10 +241,10 @@ body.intro-active .app-shell {
   inset-inline-end: 16px;
   z-index: 10;
   min-height: 40px;
-  border: 1px solid rgba(229, 229, 229, 0.22);
+  border: 1px solid color-mix(in oklch, var(--intro-border), transparent 20%);
   border-radius: 999px;
   padding: 0 16px;
-  background: rgba(17, 17, 17, 0.74);
+  background: color-mix(in oklch, var(--intro-surface), transparent 18%);
   color: var(--intro-fg);
   cursor: pointer;
   font: 800 0.85rem/1 var(--font-body);
diff --git a/fancy-wordle-modern.html b/fancy-wordle-modern.html
index 74d2c6a..b9e3fc0 100644
--- a/fancy-wordle-modern.html
+++ b/fancy-wordle-modern.html
@@ -5,14 +5,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="theme-color" content="#f7efe6">
   <title>Fancy Wordle</title>
-  <link rel="stylesheet" href="CSS/styles.css?v=8">
+  <link rel="stylesheet" href="CSS/styles.css?v=9">
   <script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
   <script src="word-data.js?v=5" defer></script>
   <script src="supabase-config.js?v=1" defer></script>
-  <script src="script.js?v=8" defer></script>
+  <script src="script.js?v=9" defer></script>
 </head>
-<body class="intro-active">
+<body class="intro-active dark-theme">
   <section class="intro-overlay" id="intro-overlay" aria-label="Animated Wordle intro" role="dialog" aria-modal="true">
     <button class="intro-skip" type="button" id="intro-skip" aria-label="Skip intro">Skip</button>
     <div class="intro-stage" aria-hidden="true">
diff --git a/index.html b/index.html
index 74d2c6a..b9e3fc0 100644
--- a/index.html
+++ b/index.html
@@ -5,14 +5,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="theme-color" content="#f7efe6">
   <title>Fancy Wordle</title>
-  <link rel="stylesheet" href="CSS/styles.css?v=8">
+  <link rel="stylesheet" href="CSS/styles.css?v=9">
   <script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
   <script src="word-data.js?v=5" defer></script>
   <script src="supabase-config.js?v=1" defer></script>
-  <script src="script.js?v=8" defer></script>
+  <script src="script.js?v=9" defer></script>
 </head>
-<body class="intro-active">
+<body class="intro-active dark-theme">
   <section class="intro-overlay" id="intro-overlay" aria-label="Animated Wordle intro" role="dialog" aria-modal="true">
     <button class="intro-skip" type="button" id="intro-skip" aria-label="Skip intro">Skip</button>
     <div class="intro-stage" aria-hidden="true">
diff --git a/script.js b/script.js
index 5997783..af46684 100644
--- a/script.js
+++ b/script.js
@@ -1406,17 +1406,24 @@ function danceTiles(tiles) {
 
 function restoreTheme() {
   const selectedTheme = localStorage.getItem("selected-theme")
-  if (selectedTheme === "dark") {
-    document.body.classList.add("dark-theme")
-    themeButton.setAttribute("aria-label", "Switch to light mode")
-  }
+  const shouldUseDarkTheme = selectedTheme !== "light"
+
+  document.body.classList.toggle("dark-theme", shouldUseDarkTheme)
+  themeButton.setAttribute(
+    "aria-label",
+    shouldUseDarkTheme ? "Switch to light mode" : "Switch to dark mode"
+  )
 }
 
-function toggleTheme() {
+function toggleTheme(event) {
   document.body.classList.toggle("dark-theme")
   const theme = document.body.classList.contains("dark-theme") ? "dark" : "light"
   localStorage.setItem("selected-theme", theme)
   themeButton.setAttribute("aria-label", theme === "dark" ? "Switch to light mode" : "Switch to dark mode")
+
+  if (event?.currentTarget instanceof HTMLElement) {
+    event.currentTarget.blur()
+  }
 }
 
 async function openStats() {