From 3ee5e7e29137f4fd52e4bf17e4d4be1906ae7e47 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Wed, 16 Apr 2025 02:03:20 +0000 Subject: [PATCH 1/2] feat: Add dark mode to columns.html Adds a toggle button to switch between light (Day) and dark (Night) modes. - Includes a Day/Night button next to the Start button. - Defines CSS styles for the dark mode theme within a `.dark-mode` class. - Implements JavaScript logic to toggle the `.dark-mode` class on the body and update the button text on click. --- columns.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/columns.html b/columns.html index f325ea2..5540ddb 100644 --- a/columns.html +++ b/columns.html @@ -42,6 +42,13 @@ div.blink { border: 2px solid black; } +.dark-mode body { + background-color: #121212; + color: #ffffff; +} +.dark-mode #board div { + background: #333333; +} @@ -49,6 +56,7 @@

Columns

+
Score
0

@@ -367,6 +375,17 @@

Columns

} document.querySelector('#start').addEventListener('click', start); + +const darkModeButton = document.querySelector('#darkModeToggle'); +darkModeButton.addEventListener('click', () => { + document.body.classList.toggle('dark-mode'); + if (document.body.classList.contains('dark-mode')) { + darkModeButton.textContent = 'Night'; + } else { + darkModeButton.textContent = 'Day'; + } +}); + document.addEventListener('keydown', (e) => { if (!running) return; if (e.keyCode == LEFT_CODE) moveLeft(); From 4cb98a5c0158a4b96581cbfc7a4c8daf720c29a6 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Wed, 16 Apr 2025 16:55:39 +0000 Subject: [PATCH 2/2] feat: Add dark mode to columns.html Implemented dark mode support for the columns game using the `prefers-color-scheme` media query. - Introduced CSS variables for background and piece colors. - Updated existing styles to use these variables. - Added a `@media (prefers-color-scheme: dark)` query to redefine the background color for dark mode. - Applied the background color variable to the `body` element so the entire page adapts. --- columns.html | 53 ++++++++++++++++++++++++++-------------------------- 1 file changed, 26 insertions(+), 27 deletions(-) diff --git a/columns.html b/columns.html index 5540ddb..74cd9a1 100644 --- a/columns.html +++ b/columns.html @@ -1,10 +1,28 @@ Columns @@ -56,7 +67,6 @@

Columns

-
Score
0

@@ -375,17 +385,6 @@

Columns

} document.querySelector('#start').addEventListener('click', start); - -const darkModeButton = document.querySelector('#darkModeToggle'); -darkModeButton.addEventListener('click', () => { - document.body.classList.toggle('dark-mode'); - if (document.body.classList.contains('dark-mode')) { - darkModeButton.textContent = 'Night'; - } else { - darkModeButton.textContent = 'Day'; - } -}); - document.addEventListener('keydown', (e) => { if (!running) return; if (e.keyCode == LEFT_CODE) moveLeft();