assets/js/main.js

@@ -67,6 +67,7 @@ document.addEventListener('DOMContentLoaded', () => {
         document.body.classList.toggle('dark-theme', theme === 'dark');
         themeToggle.checked = theme === 'dark';
         localStorage.setItem('snakeTheme', theme);
+        draw();
     }
 
     settingsBtn.addEventListener('click', openSettings);
@@ -112,14 +113,14 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     function draw() {
+        const accentColor = getComputedStyle(document.body).getPropertyValue('--accent-color').trim();
         const canvasBg = getComputedStyle(document.body).getPropertyValue('--canvas-bg').trim();
 
         ctx.fillStyle = canvasBg;
         ctx.fillRect(0, 0, canvas.width, canvas.height);
 
         snake.forEach((segment, index) => {
-            const hue = (segment.x * 5 + segment.y * 5) % 360;
+            ctx.fillStyle = accentColor;
-            ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
             if (index === 0) {
                 ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
             } else {
@@ -237,6 +238,5 @@ document.addEventListener('DOMContentLoaded', () => {
         if ((key === 'ArrowRight' || key.toLowerCase() === 'd') && direction !== 'left') direction = 'right';
     });
 
-    placeFood();
     draw();
 });