commit da972881c387190a193a6a8485aa6e2e26a80c13
parent 1ad9059491fea132c2544deb875a7fd46f6d9f80
Author: Hunter
Date: Wed, 23 Jul 2025 22:14:34 -0400
snake: add dark mode
Diffstat:
1 file changed, 25 insertions(+), 3 deletions(-)
diff --git a/pages/snake/index.html b/pages/snake/index.html
@@ -171,6 +171,22 @@
display: none !important;
}
}
+
+ @media (prefers-color-scheme: dark) {
+ body {
+ background-color: #1a1a1a;
+ color: #ffffff;
+ }
+
+ #gameBoard {
+ border-color: #666;
+ background-color: #2d2d2d;
+ }
+
+ #startHint, #mobileStartHint {
+ color: #ccc;
+ }
+ }
</style>
</head>
<body>
@@ -205,10 +221,15 @@
<script>
const BOARD_SIZE = 20;
- const EMPTY = '⬜';
+ const EMPTY_LIGHT = '⬜';
+ const EMPTY_DARK = '';
const SNAKE = '🟩';
const APPLE = '🟥';
+ function getEmptySymbol() {
+ return window.matchMedia('(prefers-color-scheme: dark)').matches ? EMPTY_DARK : EMPTY_LIGHT;
+ }
+
let board = [];
let snake = [{x: 10, y: 10}];
let direction = {x: 0, y: -1};
@@ -225,7 +246,7 @@
for (let y = 0; y < BOARD_SIZE; y++) {
board[y] = [];
for (let x = 0; x < BOARD_SIZE; x++) {
- board[y][x] = EMPTY;
+ board[y][x] = getEmptySymbol();
}
}
}
@@ -244,9 +265,10 @@
function updateBoard() {
// Clear board
+ const emptySymbol = getEmptySymbol();
for (let y = 0; y < BOARD_SIZE; y++) {
for (let x = 0; x < BOARD_SIZE; x++) {
- board[y][x] = EMPTY;
+ board[y][x] = emptySymbol;
}
}