Zakaria/FancyWordle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FIX: dark mode is default now/Pressing enter

Browse Source
This commit is contained in:
Zakaria
2026-05-21 13:26:30 -04:00
parent 166eacdbfd
commit 08724192b3
4 changed files with 35 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CSS/styles.css
+17 -14
View File
@@ -58,14 +58,15 @@ body.intro-active .app-shell {
} }
.intro-overlay { .intro-overlay {
--intro-bg: #111111; --intro-bg: oklch(18% 0.018 50);
--intro-fg: #fafafa; --intro-surface: oklch(24% 0.018 50);
--intro-border: #e5e5e5; --intro-fg: oklch(96% 0.014 70);
--intro-border: oklch(33% 0.018 50);
--intro-accent: #2f6feb; --intro-accent: #2f6feb;
--intro-tile-empty: #3a3a3c; --intro-tile-empty: oklch(26% 0.018 50);
--intro-tile-wrong: #787c7e; --intro-tile-wrong: var(--absent);
--intro-tile-misplaced: #c9b458; --intro-tile-misplaced: var(--present);
--intro-tile-correct: #6aaa64; --intro-tile-correct: var(--correct);
--intro-font-mono: ui-monospace, "JetBrains Mono", monospace; --intro-font-mono: ui-monospace, "JetBrains Mono", monospace;
position: fixed; position: fixed;
@@ -75,7 +76,9 @@ body.intro-active .app-shell {
min-block-size: 100svh; min-block-size: 100svh;
place-items: center; place-items: center;
overflow: hidden; 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); color: var(--intro-fg);
font-family: var(--font-body); font-family: var(--font-body);
opacity: 1; opacity: 1;
@@ -96,12 +99,12 @@ body.intro-active .app-shell {
.intro-overlay::before { .intro-overlay::before {
inset-block-start: 0; 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 { .intro-overlay::after {
inset-block-end: 0; 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 { .intro-overlay.is-dismissing {
@@ -166,9 +169,9 @@ body.intro-active .app-shell {
inset: 0; inset: 0;
display: grid; display: grid;
place-items: center; 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); 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); color: var(--intro-fg);
font-family: var(--font-body); font-family: var(--font-body);
font-size: clamp(28px, 6vw, 78px); font-size: clamp(28px, 6vw, 78px);
@@ -238,10 +241,10 @@ body.intro-active .app-shell {
inset-inline-end: 16px; inset-inline-end: 16px;
z-index: 10; z-index: 10;
min-height: 40px; 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; border-radius: 999px;
padding: 0 16px; padding: 0 16px;
background: rgba(17, 17, 17, 0.74); background: color-mix(in oklch, var(--intro-surface), transparent 18%);
color: var(--intro-fg); color: var(--intro-fg);
cursor: pointer; cursor: pointer;
font: 800 0.85rem/1 var(--font-body); font: 800 0.85rem/1 var(--font-body);
fancy-wordle-modern.html
+3 -3
View File
@@ -5,14 +5,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f7efe6"> <meta name="theme-color" content="#f7efe6">
<title>Fancy Wordle</title> <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/@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="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script src="word-data.js?v=5" defer></script> <script src="word-data.js?v=5" defer></script>
<script src="supabase-config.js?v=1" 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> </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"> <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> <button class="intro-skip" type="button" id="intro-skip" aria-label="Skip intro">Skip</button>
<div class="intro-stage" aria-hidden="true"> <div class="intro-stage" aria-hidden="true">
index.html
+3 -3
View File
@@ -5,14 +5,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f7efe6"> <meta name="theme-color" content="#f7efe6">
<title>Fancy Wordle</title> <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/@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="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script src="word-data.js?v=5" defer></script> <script src="word-data.js?v=5" defer></script>
<script src="supabase-config.js?v=1" 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> </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"> <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> <button class="intro-skip" type="button" id="intro-skip" aria-label="Skip intro">Skip</button>
<div class="intro-stage" aria-hidden="true"> <div class="intro-stage" aria-hidden="true">
script.js
+12 -5
View File
@@ -1406,17 +1406,24 @@ function danceTiles(tiles) {
function restoreTheme() { function restoreTheme() {
const selectedTheme = localStorage.getItem("selected-theme") const selectedTheme = localStorage.getItem("selected-theme")
if (selectedTheme === "dark") { const shouldUseDarkTheme = selectedTheme !== "light"
document.body.classList.add("dark-theme")
themeButton.setAttribute("aria-label", "Switch to light mode") 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") document.body.classList.toggle("dark-theme")
const theme = document.body.classList.contains("dark-theme") ? "dark" : "light" const theme = document.body.classList.contains("dark-theme") ? "dark" : "light"
localStorage.setItem("selected-theme", theme) localStorage.setItem("selected-theme", theme)
themeButton.setAttribute("aria-label", theme === "dark" ? "Switch to light mode" : "Switch to dark mode") 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() { async function openStats() {