From 5f967763e6d233672e633283e6e29a6a1cea72e6 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Wed, 10 Jun 2026 14:41:16 +0000
Subject: [PATCH] feature: add explicit light mode theme as default

Co-Authored-By: shahmir.masood <shahmir.masood@cognition.ai>
---
 src/App.jsx         |  4 ++--
 src/App.module.scss | 13 ++++++++++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 97920df..8dd4c4f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -28,7 +28,7 @@ function App() {
     guesses: [],
     solutionIndex: '',
   });
-  const [theme, setTheme] = useLocalStorage('theme', 'dark');
+  const [theme, setTheme] = useLocalStorage('theme', 'light');
   const [highContrast, setHighContrast] = useLocalStorage(
     'high-contrast',
     false
@@ -93,7 +93,7 @@ function App() {
 
   useEffect(() => {
     if (isDarkMode) document.body.setAttribute('data-theme', 'dark');
-    else document.body.removeAttribute('data-theme');
+    else document.body.setAttribute('data-theme', 'light');
 
     if (isHighContrastMode)
       document.body.setAttribute('data-mode', 'high-contrast');
diff --git a/src/App.module.scss b/src/App.module.scss
index 48368c4..80cb942 100644
--- a/src/App.module.scss
+++ b/src/App.module.scss
@@ -24,6 +24,17 @@
   --color-text-secondary: #333;
   --color-icon: #333;
 
+  [data-theme='light'] {
+    --color-background: #fff;
+    --color-cell: #afadb0;
+    --color-key: #e3e3e3;
+    --color-key-text: #333;
+    --color-key-secondary: #4f4f4f;
+    --color-text-primary: #000;
+    --color-text-secondary: #333;
+    --color-icon: #333;
+  }
+
   [data-theme='dark'] {
     --color-background: #191919;
     --color-cell: #444444;
@@ -45,7 +56,7 @@ body {
   font-size: 62.5%;
   font-family: 'Baloo 2', sans-serif;
   background: var(--color-background);
-  color: #fff;
+  color: var(--color-text-primary);
   min-height: 100vh;
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;