From 22ce85192c554a138f81aa8ff3343a54d7aaf682 Mon Sep 17 00:00:00 2001
From: Cameron Custer <custer.cameron@gmail.com>
Date: Sat, 19 Apr 2025 14:11:04 -0700
Subject: [PATCH 1/7] retro theme

---
 src/app.css                            | 54 +++++++++++++++----------
 src/lib/components/Header.svelte       | 56 +++++++++++++++++---------
 src/lib/components/ProblemTable.svelte | 50 ++++++++++++++---------
 src/lib/theme.js                       |  7 ++++
 4 files changed, 107 insertions(+), 60 deletions(-)
 create mode 100644 src/lib/theme.js

diff --git a/src/app.css b/src/app.css
index 14a18ea..da906d5 100644
--- a/src/app.css
+++ b/src/app.css
@@ -5,27 +5,25 @@
 @layer theme {
   :root {
     /* Fonts */
-    --font-sans:
-      Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-      'Open Sans', 'Helvetica Neue', sans-serif;
+    --font-sans: 'Courier New', Courier, monospace;
     --font-mono: 'Fira Mono', monospace;
 
-    /* Colors */
+    /* Colors - Retro Computer Theme */
     --color-white: oklch(1 0 0);
     --color-black: oklch(0 0 0);
-    --color-primary: oklch(0.12 0 0);
-    --color-secondary: oklch(0.19 0 0);
-    --color-tertiary: oklch(0.28 0 0);
-    --color-accent: oklch(0.65 0.26 296.88);
-    --color-heading: oklch(1 0 0 / 0.87);
-    --color-text: oklch(1 0 0 / 0.6);
-    --color-text-muted: oklch(1 0 0 / 0.4);
-    --color-background: oklch(0.19 0 0 / 0.7);
-    --color-border: oklch(0.44 0 0);
-    --color-link: oklch(0.65 0.26 296.88);
-    --color-link-subtle: oklch(0.8 0.1 296.88);
-    --color-link-nav: oklch(1 0 0 / 0.8);
-    --color-username: oklch(0.65 0.26 296.88); /* Purple color for usernames */
+    --color-primary: oklch(0.85 0.03 140); /* Light mint green background */
+    --color-secondary: oklch(0.9 0.02 140); /* Lighter mint green for cards */
+    --color-tertiary: oklch(0.8 0.04 140); /* Slightly darker mint for headers */
+    --color-accent: oklch(0.6 0.25 30); /* Orange accent */
+    --color-heading: oklch(0.2 0 0 / 0.9); /* Dark text for headings */
+    --color-text: oklch(0.2 0 0 / 0.8); /* Dark text for body */
+    --color-text-muted: oklch(0.2 0 0 / 0.5); /* Muted dark text */
+    --color-background: oklch(0.85 0.03 140 / 0.7); /* Transparent mint background */
+    --color-border: oklch(0.7 0.05 140); /* Border color */
+    --color-link: oklch(0.6 0.25 30); /* Orange links */
+    --color-link-subtle: oklch(0.65 0.2 30); /* Subtle orange links */
+    --color-link-nav: oklch(0.2 0 0 / 0.9); /* Dark nav links */
+    --color-username: oklch(0.5 0.25 270); /* Blue for usernames */
     --color-solved-row: color-mix(
       in oklab,
       rgb(34 197 94) 15%,
@@ -74,6 +72,12 @@ body {
   background-color: var(--color-primary);
   color: var(--color-text);
   overscroll-behavior: none;
+  font-family: var(--font-sans);
+  background-image: linear-gradient(
+    to bottom,
+    var(--color-primary),
+    color-mix(in oklab, var(--color-primary) 90%, var(--color-tertiary))
+  );
 }
 
 #app {
@@ -190,31 +194,34 @@ img {
 /* Component styles */
 .card {
   background-color: var(--color-secondary);
-  border-radius: 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--color-border);
   padding: 1.5rem;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
   margin-bottom: 1rem;
 }
 
 .table {
   width: 100%;
   border-collapse: collapse;
+  border: 1px solid var(--color-border);
 }
 
 .table th {
   text-align: left;
   padding: 0.75rem;
-  border-bottom: 1px solid var(--color-tertiary);
+  border-bottom: 1px solid var(--color-border);
   color: var(--color-heading);
+  background-color: var(--color-tertiary);
 }
 
 .table td {
   padding: 0.75rem;
-  border-bottom: 1px solid var(--color-tertiary);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .table tr:hover {
-  background-color: var(--color-tertiary);
+  background-color: color-mix(in oklab, var(--color-tertiary) 50%, transparent);
 }
 
 .badge {
@@ -228,16 +235,19 @@ img {
 .badge-easy {
   background-color: oklch(0.73 0.2 142.5);
   color: white;
+  border: 1px solid oklch(0.63 0.2 142.5);
 }
 
 .badge-medium {
   background-color: oklch(0.71 0.19 54.65);
   color: white;
+  border: 1px solid oklch(0.61 0.19 54.65);
 }
 
 .badge-hard {
   background-color: oklch(0.65 0.27 29.23);
   color: white;
+  border: 1px solid oklch(0.55 0.27 29.23);
 }
 
 /* Responsive utilities */
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index bf7cbd1..5475327 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -123,7 +123,9 @@ $: if ($page) {
 }
 </script>
 
-<header class="sticky top-0 z-50 w-full bg-[var(--color-secondary)] py-3 shadow-sm">
+<header
+  class="sticky top-0 z-50 w-full border-b-2 border-[var(--color-border)] bg-[var(--color-secondary)] py-3 shadow-[2px_2px_0_rgba(0,0,0,0.1)]"
+>
   <div class="mx-auto flex max-w-[1200px] items-center justify-between px-3 sm:px-4 md:px-5">
     <div class="flex items-center">
       <a
@@ -132,15 +134,17 @@ $: if ($page) {
         class="flex items-center gap-2 pr-2 text-xl font-bold text-[var(--color-heading)] no-underline lg:pr-4"
       >
         <img src="/favicon.png" alt="gitgud Logo" class="h-12 w-12 object-contain" />
-        <span class="flex">
-          <span>gitgud</span><span class="hidden sm:inline">.cc</span>
+        <span class="flex font-bold tracking-wide">
+          <span class="text-[var(--color-accent)]">gitgud</span><span
+            class="hidden text-[var(--color-heading)] sm:inline">.cc</span
+          >
         </span>
       </a>
     </div>
 
     <!-- Mobile menu button -->
     <button
-      class="flex items-center rounded-md border border-[var(--color-border)] px-2 py-1 text-[var(--color-text)] lg:hidden"
+      class="flex items-center rounded-md border-2 border-[var(--color-border)] px-2 py-1 text-[var(--color-text)] transition-colors hover:bg-[var(--color-tertiary)] lg:hidden"
       aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
       on:click={toggleMobileMenu}
     >
@@ -173,7 +177,7 @@ $: if ($page) {
         >
           <a
             href="/"
-            class="block py-2 text-sm font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
+            class="block py-2 text-sm font-bold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
             >Problems</a
           >
         </li>
@@ -184,7 +188,7 @@ $: if ($page) {
         >
           <a
             href="/contests"
-            class="block py-2 text-sm font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
+            class="block py-2 text-sm font-bold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
             >Contests</a
           >
         </li>
@@ -195,7 +199,7 @@ $: if ($page) {
         >
           <a
             href="/leaderboard"
-            class="block py-2 text-sm font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
+            class="block py-2 text-sm font-bold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
             >Leaderboard</a
           >
         </li>
@@ -206,7 +210,7 @@ $: if ($page) {
         >
           <a
             href="/about"
-            class="block py-2 text-sm font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
+            class="block py-2 text-sm font-bold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
             >About</a
           >
         </li>
@@ -218,7 +222,7 @@ $: if ($page) {
           >
             <a
               href="/submit"
-              class="block py-2 text-sm font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
+              class="block py-2 text-sm font-bold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
               >Submit</a
             >
           </li>
@@ -264,7 +268,7 @@ $: if ($page) {
               </svg>
             </a>
             <button
-              class="cursor-pointer rounded border border-[var(--color-border)] bg-transparent px-3 py-1.5 text-sm font-semibold text-[var(--color-text)] transition-all duration-200 hover:bg-[color-mix(in_oklab,black_5%,transparent)]"
+              class="cursor-pointer rounded border-2 border-[var(--color-border)] bg-transparent px-3 py-1.5 text-sm font-bold text-[var(--color-text)] shadow-[1px_1px_0_rgba(0,0,0,0.1)] transition-all duration-200 hover:bg-[var(--color-tertiary)]"
               on:click={handleLogout}
             >
               Logout
@@ -272,7 +276,7 @@ $: if ($page) {
           </div>
         {:else}
           <button
-            class="cursor-pointer rounded border border-[#4285f4] bg-[#4285f4] px-3 py-1.5 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:border-[#3367d6] hover:bg-[#3367d6] hover:shadow"
+            class="cursor-pointer rounded border-2 border-[var(--color-accent)] bg-[var(--color-accent)] px-3 py-1.5 text-sm font-bold text-white shadow-[2px_2px_0_rgba(0,0,0,0.1)] transition-all duration-200 hover:shadow-[1px_1px_0_rgba(0,0,0,0.1)] hover:brightness-110"
             on:click={handleLogin}
             title="Login with GitHub"
           >
@@ -286,35 +290,35 @@ $: if ($page) {
   <!-- Mobile menu -->
   {#if mobileMenuOpen}
     <div
-      class="mt-3 border-t border-[var(--color-border)] bg-[var(--color-secondary)] px-4 py-4 shadow-md lg:hidden"
+      class="mt-3 border-t-2 border-[var(--color-border)] bg-[var(--color-secondary)] px-4 py-4 shadow-[2px_2px_0_rgba(0,0,0,0.1)] lg:hidden"
     >
       <nav class="flex flex-col gap-4">
         <ul class="m-0 flex list-none flex-col gap-4 p-0">
           <li>
             <a
               href="/"
-              class="block py-2 text-base font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/' ? 'text-[var(--color-accent)]' : ''}"
+              class="block py-2 text-base font-bold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/' ? 'text-[var(--color-accent)]' : ''}"
               >Problems</a
             >
           </li>
           <li>
             <a
               href="/contests"
-              class="block py-2 text-base font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/contests' ? 'text-[var(--color-accent)]' : ''}"
+              class="block py-2 text-base font-bold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/contests' ? 'text-[var(--color-accent)]' : ''}"
               >Contests</a
             >
           </li>
           <li>
             <a
               href="/leaderboard"
-              class="block py-2 text-base font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/leaderboard' ? 'text-[var(--color-accent)]' : ''}"
+              class="block py-2 text-base font-bold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/leaderboard' ? 'text-[var(--color-accent)]' : ''}"
               >Leaderboard</a
             >
           </li>
           <li>
             <a
               href="/about"
-              class="block py-2 text-base font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/about' ? 'text-[var(--color-accent)]' : ''}"
+              class="block py-2 text-base font-bold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/about' ? 'text-[var(--color-accent)]' : ''}"
               >About</a
             >
           </li>
@@ -322,7 +326,7 @@ $: if ($page) {
             <li>
               <a
                 href="/submit"
-                class="block py-2 text-base font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/submit' ? 'text-[var(--color-accent)]' : ''}"
+                class="block py-2 text-base font-bold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/submit' ? 'text-[var(--color-accent)]' : ''}"
                 >Submit</a
               >
             </li>
@@ -367,14 +371,14 @@ $: if ($page) {
               </a>
             </div>
             <button
-              class="cursor-pointer rounded border border-[var(--color-border)] bg-transparent px-3 py-1.5 text-sm font-semibold text-[var(--color-text)] transition-all duration-200 hover:bg-[color-mix(in_oklab,black_5%,transparent)]"
+              class="cursor-pointer rounded border-2 border-[var(--color-border)] bg-transparent px-3 py-1.5 text-sm font-bold text-[var(--color-text)] shadow-[1px_1px_0_rgba(0,0,0,0.1)] transition-all duration-200 hover:bg-[var(--color-tertiary)]"
               on:click={handleLogout}
             >
               Logout
             </button>
           {:else}
             <button
-              class="cursor-pointer rounded border border-[#4285f4] bg-[#4285f4] px-3 py-1.5 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:border-[#3367d6] hover:bg-[#3367d6] hover:shadow"
+              class="cursor-pointer rounded border-2 border-[var(--color-accent)] bg-[var(--color-accent)] px-3 py-1.5 text-sm font-bold text-white shadow-[2px_2px_0_rgba(0,0,0,0.1)] transition-all duration-200 hover:shadow-[1px_1px_0_rgba(0,0,0,0.1)] hover:brightness-110"
               on:click={handleLogin}
               title="Login with GitHub"
             >
@@ -410,12 +414,24 @@ header {
   right: 0;
 }
 
-/* Ensure username is always purple */
+/* Ensure username is always blue */
 a[href*='github.com'] {
   color: var(--color-username) !important;
+  text-decoration: none;
+  position: relative;
 }
 
 a[href*='github.com']:hover {
   color: color-mix(in oklab, var(--color-username) 80%, white) !important;
 }
+
+/* Add retro underline effect to nav links */
+li.relative a:hover {
+  text-decoration: none;
+}
+
+/* Add pixel-style border to buttons on hover */
+button:hover {
+  transform: translateY(1px);
+}
 </style>
diff --git a/src/lib/components/ProblemTable.svelte b/src/lib/components/ProblemTable.svelte
index d068212..43594cb 100644
--- a/src/lib/components/ProblemTable.svelte
+++ b/src/lib/components/ProblemTable.svelte
@@ -127,14 +127,16 @@ function getDifficultyTooltip(problem: Problem): string {
 </script>
 
 <div class="mt-4 w-full">
-  <div class="table-wrapper rounded-lg bg-[var(--color-secondary)] shadow-sm">
+  <div
+    class="table-wrapper rounded-md border-2 border-[var(--color-border)] bg-[var(--color-secondary)] shadow-[2px_2px_0_rgba(0,0,0,0.1)]"
+  >
     <table
-      class="w-full min-w-[900px] table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)]"
+      class="w-full min-w-[900px] table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)] font-mono text-sm"
     >
       <thead>
         <tr>
           <th
-            class="sticky top-0 z-10 w-[5%] cursor-pointer bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
+            class="sticky top-0 z-10 w-[5%] cursor-pointer border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
             on:click={handleSolvedFilter}
             title="Filter by solved status"
           >
@@ -194,7 +196,7 @@ function getDifficultyTooltip(problem: Problem): string {
             </div>
           </th>
           <th
-            class="sticky top-0 z-10 w-[5%] cursor-pointer bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
+            class="sticky top-0 z-10 w-[5%] cursor-pointer border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
             on:click={handleSourceFilter}
             title="Filter by source"
           >
@@ -236,11 +238,12 @@ function getDifficultyTooltip(problem: Problem): string {
               {/if}
             </div>
           </th>
-          <th class="sticky top-0 z-10 w-[25%] bg-[var(--color-tertiary)] p-3 text-left font-bold"
+          <th
+            class="sticky top-0 z-10 w-[25%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-left font-bold"
             >Problem</th
           >
           <th
-            class="sticky top-0 z-10 w-[10%] cursor-pointer bg-[var(--color-tertiary)] p-3 py-4 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
+            class="sticky top-0 z-10 w-[10%] cursor-pointer border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 py-4 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
             on:click={handleDifficultySort}
             title="Click to sort by difficulty"
           >
@@ -260,10 +263,13 @@ function getDifficultyTooltip(problem: Problem): string {
               <span class="font-bold">Difficulty</span>
             </div>
           </th>
-          <th class="sticky top-0 z-10 w-[10%] bg-[var(--color-tertiary)] p-3 text-left font-bold"
+          <th
+            class="sticky top-0 z-10 w-[10%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-left font-bold"
             >Topic</th
           >
-          <th class="sticky top-0 z-10 w-[22%] bg-[var(--color-tertiary)] p-3 text-left font-bold">
+          <th
+            class="sticky top-0 z-10 w-[22%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-left font-bold"
+          >
             <div class="flex items-center gap-2">
               <RecommendersFilter
                 authors={uniqueAuthors}
@@ -275,7 +281,8 @@ function getDifficultyTooltip(problem: Problem): string {
               />
             </div>
           </th>
-          <th class="sticky top-0 z-10 w-[20%] bg-[var(--color-tertiary)] p-3 text-right font-bold"
+          <th
+            class="sticky top-0 z-10 w-[20%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-right font-bold"
           ></th>
         </tr>
       </thead>
@@ -285,16 +292,16 @@ function getDifficultyTooltip(problem: Problem): string {
             class="relative border-b border-[var(--color-border)] transition-colors duration-200 last:border-b-0
             ${problem.id && userSolvedProblems.has(problem.id)
               ? 'border-l-4 border-l-[rgb(34_197_94)] bg-[var(--color-solved-row)]'
-              : 'hover:bg-black/5'}"
+              : 'hover:bg-[var(--color-tertiary)]/30'}"
           >
             <td class="p-3 text-center">
               {#if problem.id}
                 {@const isSolved = userSolvedProblems.has(problem.id)}
                 <button
-                  class={`flex h-8 w-8 cursor-pointer items-center justify-center rounded-full shadow-sm transition-all duration-300
+                  class={`flex h-8 w-8 cursor-pointer items-center justify-center rounded shadow-[1px_1px_0_rgba(0,0,0,0.1)] transition-all duration-300
                     ${isSolved
                       ? 'solved-button bg-[rgb(34_197_94)] text-white shadow-[0_0_8px_rgba(34,197,94,0.4)]'
-                      : 'border border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[rgb(34_197_94)] hover:bg-[color-mix(in_oklab,rgb(34_197_94)_10%,transparent)] hover:text-[rgb(34_197_94)] hover:shadow-[0_0_5px_rgba(34,197,94,0.2)]'
+                      : 'border-2 border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[rgb(34_197_94)] hover:bg-[color-mix(in_oklab,rgb(34_197_94)_10%,transparent)] hover:text-[rgb(34_197_94)] hover:shadow-[0_0_5px_rgba(34,197,94,0.2)]'
                     } ${!isAuthenticated ? 'cursor-not-allowed opacity-50' : ''}`}
                   on:click={() => isAuthenticated && onToggleSolved(problem.id!, !isSolved)}
                   title={!isAuthenticated
@@ -336,7 +343,7 @@ function getDifficultyTooltip(problem: Problem): string {
                 href={problem.url}
                 target="_blank"
                 rel="noopener noreferrer"
-                class="text-[var(--color-text)] hover:text-[var(--color-accent)] hover:underline"
+                class="font-bold text-[var(--color-text)] hover:text-[var(--color-accent)] hover:underline"
                 title={problem.name}
               >
                 {problem.name}
@@ -344,7 +351,7 @@ function getDifficultyTooltip(problem: Problem): string {
             </td>
             <td class="p-3 text-center">
               <span
-                class="group relative inline-block rounded px-2 py-1 font-bold
+                class="group relative inline-block rounded border px-2 py-1 font-bold
                   text-white
                    {problem.source === 'codeforces' ? 'cursor-default' : 'cursor-help'}"
                 style="background-color: var(--color-{getRatingColor(problem.difficulty)})"
@@ -362,7 +369,7 @@ function getDifficultyTooltip(problem: Problem): string {
             <td class="p-3">
               {#if problem.type}
                 <span
-                  class="inline-block rounded bg-[var(--color-tertiary)] px-2 py-1 text-sm text-[var(--color-text)]"
+                  class="inline-block rounded border border-[var(--color-border)] bg-[var(--color-tertiary)] px-2 py-1 text-sm text-[var(--color-text)]"
                 >
                   {problem.type}
                 </span>
@@ -389,7 +396,7 @@ function getDifficultyTooltip(problem: Problem): string {
 
                   <!-- Like button -->
                   <button
-                    class={`flex cursor-pointer items-center gap-1 rounded border px-2 py-1 transition-all duration-200
+                    class={`flex cursor-pointer items-center gap-1 rounded border-2 px-2 py-1 shadow-[1px_1px_0_rgba(0,0,0,0.1)] transition-all duration-200
                       ${hasLiked
                         ? 'border-[color-mix(in_oklab,rgb(34_197_94)_50%,transparent)] bg-[color-mix(in_oklab,rgb(34_197_94)_10%,transparent)] text-[rgb(34_197_94)]'
                         : 'border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[color-mix(in_oklab,rgb(34_197_94)_50%,transparent)] hover:bg-[color-mix(in_oklab,rgb(34_197_94)_10%,transparent)] hover:text-[rgb(34_197_94)]'
@@ -423,7 +430,7 @@ function getDifficultyTooltip(problem: Problem): string {
 
                   <!-- Dislike button -->
                   <button
-                    class={`flex cursor-pointer items-center gap-1 rounded border px-2 py-1 transition-all duration-200
+                    class={`flex cursor-pointer items-center gap-1 rounded border-2 px-2 py-1 shadow-[1px_1px_0_rgba(0,0,0,0.1)] transition-all duration-200
                       ${hasDisliked
                         ? 'border-[color-mix(in_oklab,rgb(239_68_68)_50%,transparent)] bg-[color-mix(in_oklab,rgb(239_68_68)_10%,transparent)] text-[rgb(239_68_68)]'
                         : 'border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[color-mix(in_oklab,rgb(239_68_68)_50%,transparent)] hover:bg-[color-mix(in_oklab,rgb(239_68_68)_10%,transparent)] hover:text-[rgb(239_68_68)]'
@@ -522,13 +529,20 @@ th {
 
 /* Select styling is now handled in the RecommendersFilter component */
 
-/* Ensure username is always purple */
+/* Ensure username is always blue */
 a[href*='github.com'] {
   color: var(--color-username) !important;
+  text-decoration: none;
 }
 
 a[href*='github.com']:hover {
   color: color-mix(in oklab, var(--color-username) 80%, white) !important;
+  text-decoration: underline;
+}
+
+/* Add pixel-style border to buttons on hover */
+button:hover {
+  transform: translateY(1px);
 }
 
 @keyframes pulse {
diff --git a/src/lib/theme.js b/src/lib/theme.js
new file mode 100644
index 0000000..c2cf686
--- /dev/null
+++ b/src/lib/theme.js
@@ -0,0 +1,7 @@
+// Theme configuration
+export const theme = {
+  name: 'retro-mint',
+  description: 'A retro-inspired theme with mint green background and orange accents',
+  author: 'gitgud team',
+  version: '1.0.0'
+};

From cdcd85a64add3023e6877190b488dc5987599685 Mon Sep 17 00:00:00 2001
From: Cameron Custer <custer.cameron@gmail.com>
Date: Sat, 19 Apr 2025 14:14:04 -0700
Subject: [PATCH 2/7] blue retro theme

---
 src/app.css                             | 20 +++---
 src/lib/components/ThemeSwitcher.svelte | 83 +++++++++++++++++++++++++
 src/lib/theme-options/retro-beige.js    | 25 ++++++++
 src/lib/theme-options/retro-purple.js   | 25 ++++++++
 src/lib/theme-options/retro-teal.js     | 25 ++++++++
 src/lib/theme.js                        |  4 +-
 6 files changed, 170 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/components/ThemeSwitcher.svelte
 create mode 100644 src/lib/theme-options/retro-beige.js
 create mode 100644 src/lib/theme-options/retro-purple.js
 create mode 100644 src/lib/theme-options/retro-teal.js

diff --git a/src/app.css b/src/app.css
index da906d5..6dbb541 100644
--- a/src/app.css
+++ b/src/app.css
@@ -8,22 +8,22 @@
     --font-sans: 'Courier New', Courier, monospace;
     --font-mono: 'Fira Mono', monospace;
 
-    /* Colors - Retro Computer Theme */
+    /* Colors - Retro Computer Theme - Blue & Pink */
     --color-white: oklch(1 0 0);
     --color-black: oklch(0 0 0);
-    --color-primary: oklch(0.85 0.03 140); /* Light mint green background */
-    --color-secondary: oklch(0.9 0.02 140); /* Lighter mint green for cards */
-    --color-tertiary: oklch(0.8 0.04 140); /* Slightly darker mint for headers */
-    --color-accent: oklch(0.6 0.25 30); /* Orange accent */
+    --color-primary: oklch(0.9 0.03 240); /* Light blue background */
+    --color-secondary: oklch(0.95 0.02 240); /* Lighter blue for cards */
+    --color-tertiary: oklch(0.85 0.04 240); /* Slightly darker blue for headers */
+    --color-accent: oklch(0.7 0.2 350); /* Pink accent */
     --color-heading: oklch(0.2 0 0 / 0.9); /* Dark text for headings */
     --color-text: oklch(0.2 0 0 / 0.8); /* Dark text for body */
     --color-text-muted: oklch(0.2 0 0 / 0.5); /* Muted dark text */
-    --color-background: oklch(0.85 0.03 140 / 0.7); /* Transparent mint background */
-    --color-border: oklch(0.7 0.05 140); /* Border color */
-    --color-link: oklch(0.6 0.25 30); /* Orange links */
-    --color-link-subtle: oklch(0.65 0.2 30); /* Subtle orange links */
+    --color-background: oklch(0.9 0.03 240 / 0.7); /* Transparent blue background */
+    --color-border: oklch(0.75 0.05 240); /* Border color */
+    --color-link: oklch(0.7 0.2 350); /* Pink links */
+    --color-link-subtle: oklch(0.75 0.15 350); /* Subtle pink links */
     --color-link-nav: oklch(0.2 0 0 / 0.9); /* Dark nav links */
-    --color-username: oklch(0.5 0.25 270); /* Blue for usernames */
+    --color-username: oklch(0.6 0.25 30); /* Orange for usernames */
     --color-solved-row: color-mix(
       in oklab,
       rgb(34 197 94) 15%,
diff --git a/src/lib/components/ThemeSwitcher.svelte b/src/lib/components/ThemeSwitcher.svelte
new file mode 100644
index 0000000..eeb5e2b
--- /dev/null
+++ b/src/lib/components/ThemeSwitcher.svelte
@@ -0,0 +1,83 @@
+<script>
+  import { retroBeigeTheme } from '../theme-options/retro-beige';
+  import { retroPurpleTheme } from '../theme-options/retro-purple';
+  import { retroTealTheme } from '../theme-options/retro-teal';
+  
+  // Current theme (default is the blue-pink theme we've already applied)
+  let currentTheme = 'retro-blue-pink';
+  
+  // All available themes
+  const themes = [
+    { id: 'retro-blue-pink', name: 'Blue & Pink', description: 'Light blue background with pink accents' },
+    { id: 'retro-beige', name: 'Beige & Brown', description: 'Warm beige background with brown accents' },
+    { id: 'retro-purple', name: 'Purple & Yellow', description: 'Vibrant purple background with yellow accents' },
+    { id: 'retro-teal', name: 'Teal & Coral', description: 'Fresh teal background with coral accents' }
+  ];
+  
+  // Function to apply a theme
+  function applyTheme(themeId) {
+    currentTheme = themeId;
+    
+    // Get the root element to apply CSS variables
+    const root = document.documentElement;
+    
+    // Apply the selected theme
+    let themeColors = '';
+    
+    switch(themeId) {
+      case 'retro-beige':
+        themeColors = retroBeigeTheme.colors;
+        break;
+      case 'retro-purple':
+        themeColors = retroPurpleTheme.colors;
+        break;
+      case 'retro-teal':
+        themeColors = retroTealTheme.colors;
+        break;
+      default:
+        // Use the blue-pink theme that's already in app.css
+        break;
+    }
+    
+    // If we have theme colors to apply, create a style element and add it to the head
+    if (themeColors) {
+      // Remove any existing theme style element
+      const existingTheme = document.getElementById('theme-colors');
+      if (existingTheme) {
+        existingTheme.remove();
+      }
+      
+      // Create a new style element
+      const style = document.createElement('style');
+      style.id = 'theme-colors';
+      style.textContent = `:root {${themeColors}}`;
+      document.head.appendChild(style);
+    }
+  }
+</script>
+
+<div class="theme-switcher rounded border-2 border-[var(--color-border)] bg-[var(--color-secondary)] p-4 shadow-[2px_2px_0_rgba(0,0,0,0.1)]">
+  <h3 class="mb-3 font-bold">Theme Switcher</h3>
+  <div class="flex flex-wrap gap-2">
+    {#each themes as theme}
+      <button
+        class="rounded border-2 border-[var(--color-border)] px-3 py-2 text-sm font-bold shadow-[1px_1px_0_rgba(0,0,0,0.1)] transition-all duration-200 hover:bg-[var(--color-tertiary)] hover:shadow-none {currentTheme === theme.id ? 'bg-[var(--color-accent)] text-white' : 'bg-[var(--color-secondary)] text-[var(--color-text)]'}"
+        on:click={() => applyTheme(theme.id)}
+        title={theme.description}
+      >
+        {theme.name}
+      </button>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .theme-switcher {
+    max-width: 100%;
+    margin-bottom: 1rem;
+  }
+  
+  button:hover {
+    transform: translateY(1px);
+  }
+</style>
diff --git a/src/lib/theme-options/retro-beige.js b/src/lib/theme-options/retro-beige.js
new file mode 100644
index 0000000..b09882f
--- /dev/null
+++ b/src/lib/theme-options/retro-beige.js
@@ -0,0 +1,25 @@
+// Retro Beige Theme Configuration
+export const retroBeigeTheme = {
+  name: 'retro-beige',
+  description: 'A warm retro-inspired theme with beige background and brown accents',
+  author: 'gitgud team',
+  version: '1.0.0',
+  colors: `
+    /* Colors - Retro Beige Theme */
+    --color-white: oklch(1 0 0);
+    --color-black: oklch(0 0 0);
+    --color-primary: oklch(0.9 0.05 90); /* Light beige background */
+    --color-secondary: oklch(0.95 0.03 90); /* Lighter beige for cards */
+    --color-tertiary: oklch(0.85 0.07 90); /* Slightly darker beige for headers */
+    --color-accent: oklch(0.55 0.15 60); /* Brown accent */
+    --color-heading: oklch(0.2 0 0 / 0.9); /* Dark text for headings */
+    --color-text: oklch(0.2 0 0 / 0.8); /* Dark text for body */
+    --color-text-muted: oklch(0.2 0 0 / 0.5); /* Muted dark text */
+    --color-background: oklch(0.9 0.05 90 / 0.7); /* Transparent beige background */
+    --color-border: oklch(0.75 0.1 90); /* Border color */
+    --color-link: oklch(0.55 0.15 60); /* Brown links */
+    --color-link-subtle: oklch(0.6 0.1 60); /* Subtle brown links */
+    --color-link-nav: oklch(0.2 0 0 / 0.9); /* Dark nav links */
+    --color-username: oklch(0.5 0.2 200); /* Teal for usernames */
+  `
+};
diff --git a/src/lib/theme-options/retro-purple.js b/src/lib/theme-options/retro-purple.js
new file mode 100644
index 0000000..48daf3d
--- /dev/null
+++ b/src/lib/theme-options/retro-purple.js
@@ -0,0 +1,25 @@
+// Retro Purple Theme Configuration
+export const retroPurpleTheme = {
+  name: 'retro-purple',
+  description: 'A vibrant retro-inspired theme with purple background and yellow accents',
+  author: 'gitgud team',
+  version: '1.0.0',
+  colors: `
+    /* Colors - Retro Purple Theme */
+    --color-white: oklch(1 0 0);
+    --color-black: oklch(0 0 0);
+    --color-primary: oklch(0.8 0.1 300); /* Light purple background */
+    --color-secondary: oklch(0.85 0.08 300); /* Lighter purple for cards */
+    --color-tertiary: oklch(0.75 0.12 300); /* Slightly darker purple for headers */
+    --color-accent: oklch(0.8 0.18 90); /* Yellow accent */
+    --color-heading: oklch(0.2 0 0 / 0.9); /* Dark text for headings */
+    --color-text: oklch(0.2 0 0 / 0.8); /* Dark text for body */
+    --color-text-muted: oklch(0.2 0 0 / 0.5); /* Muted dark text */
+    --color-background: oklch(0.8 0.1 300 / 0.7); /* Transparent purple background */
+    --color-border: oklch(0.7 0.15 300); /* Border color */
+    --color-link: oklch(0.8 0.18 90); /* Yellow links */
+    --color-link-subtle: oklch(0.75 0.15 90); /* Subtle yellow links */
+    --color-link-nav: oklch(0.2 0 0 / 0.9); /* Dark nav links */
+    --color-username: oklch(0.7 0.2 160); /* Green for usernames */
+  `
+};
diff --git a/src/lib/theme-options/retro-teal.js b/src/lib/theme-options/retro-teal.js
new file mode 100644
index 0000000..612cd65
--- /dev/null
+++ b/src/lib/theme-options/retro-teal.js
@@ -0,0 +1,25 @@
+// Retro Teal Theme Configuration
+export const retroTealTheme = {
+  name: 'retro-teal',
+  description: 'A fresh retro-inspired theme with teal background and coral accents',
+  author: 'gitgud team',
+  version: '1.0.0',
+  colors: `
+    /* Colors - Retro Teal Theme */
+    --color-white: oklch(1 0 0);
+    --color-black: oklch(0 0 0);
+    --color-primary: oklch(0.85 0.1 190); /* Light teal background */
+    --color-secondary: oklch(0.9 0.08 190); /* Lighter teal for cards */
+    --color-tertiary: oklch(0.8 0.12 190); /* Slightly darker teal for headers */
+    --color-accent: oklch(0.7 0.18 30); /* Coral accent */
+    --color-heading: oklch(0.2 0 0 / 0.9); /* Dark text for headings */
+    --color-text: oklch(0.2 0 0 / 0.8); /* Dark text for body */
+    --color-text-muted: oklch(0.2 0 0 / 0.5); /* Muted dark text */
+    --color-background: oklch(0.85 0.1 190 / 0.7); /* Transparent teal background */
+    --color-border: oklch(0.75 0.15 190); /* Border color */
+    --color-link: oklch(0.7 0.18 30); /* Coral links */
+    --color-link-subtle: oklch(0.75 0.15 30); /* Subtle coral links */
+    --color-link-nav: oklch(0.2 0 0 / 0.9); /* Dark nav links */
+    --color-username: oklch(0.6 0.2 270); /* Purple for usernames */
+  `
+};
diff --git a/src/lib/theme.js b/src/lib/theme.js
index c2cf686..30b4109 100644
--- a/src/lib/theme.js
+++ b/src/lib/theme.js
@@ -1,7 +1,7 @@
 // Theme configuration
 export const theme = {
-  name: 'retro-mint',
-  description: 'A retro-inspired theme with mint green background and orange accents',
+  name: 'retro-blue-pink',
+  description: 'A retro-inspired theme with light blue background and pink accents',
   author: 'gitgud team',
   version: '1.0.0'
 };

From be2dcf08fef46faf88b6b988558f30b8b7eeb675 Mon Sep 17 00:00:00 2001
From: Cameron Custer <custer.cameron@gmail.com>
Date: Sat, 19 Apr 2025 15:36:56 -0700
Subject: [PATCH 3/7] theming

---
 src/app.css                                |   2 +
 src/app.html                               |  36 +++++
 src/lib/components/ContestTable.svelte     |   2 +-
 src/lib/components/LeaderboardTable.svelte |   2 +-
 src/lib/components/ThemeSwitcher.svelte    | 147 ++++++++++++---------
 src/lib/components/TopicSidebar.svelte     |  16 +--
 src/lib/theme-options/retro-blue-dark.js   |  30 +++++
 src/lib/theme-options/retro-blue-light.js  |  30 +++++
 src/lib/theme.js                           |  42 +++++-
 src/routes/about/+page.svelte              |   6 +-
 src/routes/settings/+page.svelte           |  33 +++++
 11 files changed, 270 insertions(+), 76 deletions(-)
 create mode 100644 src/lib/theme-options/retro-blue-dark.js
 create mode 100644 src/lib/theme-options/retro-blue-light.js

diff --git a/src/app.css b/src/app.css
index 6dbb541..78e5aa8 100644
--- a/src/app.css
+++ b/src/app.css
@@ -9,6 +9,8 @@
     --font-mono: 'Fira Mono', monospace;
 
     /* Colors - Retro Computer Theme - Blue & Pink */
+    /* These are the default colors that will be overridden by theme selection */
+    /* The same variables are defined in src/lib/theme-options/retro-blue-light.js */
     --color-white: oklch(1 0 0);
     --color-black: oklch(0 0 0);
     --color-primary: oklch(0.9 0.03 240); /* Light blue background */
diff --git a/src/app.html b/src/app.html
index 7c51eb5..d53a8b2 100644
--- a/src/app.html
+++ b/src/app.html
@@ -7,6 +7,42 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
     />
+    <!-- Theme initialization script to prevent flashing -->
+    <script>
+      (function() {
+        try {
+          const savedTheme = localStorage.getItem('gitgud-theme');
+          if (savedTheme) {
+            // Apply theme colors from theme files
+            let themeColors = '';
+
+            // We can't import the theme files directly, so we'll need to hardcode the dark theme colors
+            // This is just for the initial load to prevent flashing
+            if (savedTheme === 'retro-blue-dark') {
+              themeColors = `
+                --color-primary: oklch(0.2 0.05 240);
+                --color-secondary: oklch(0.25 0.04 240);
+                --color-tertiary: oklch(0.15 0.06 240);
+                --color-heading: oklch(0.9 0 0 / 0.9);
+                --color-text: oklch(0.9 0 0 / 0.8);
+                --color-text-muted: oklch(0.9 0 0 / 0.5);
+                --color-background: oklch(0.2 0.05 240 / 0.7);
+                --color-border: oklch(0.3 0.08 240);
+                --color-link-nav: oklch(0.9 0 0 / 0.9);
+              `;
+
+              // Create a style element and add it to the head
+              const style = document.createElement('style');
+              style.id = 'theme-init';
+              style.textContent = `:root {${themeColors}}`;
+              document.head.appendChild(style);
+            }
+          }
+        } catch (e) {
+          console.error('Error initializing theme:', e);
+        }
+      })();
+    </script>
     %sveltekit.head%
   </head>
   <body>
diff --git a/src/lib/components/ContestTable.svelte b/src/lib/components/ContestTable.svelte
index e06c386..6e0605f 100644
--- a/src/lib/components/ContestTable.svelte
+++ b/src/lib/components/ContestTable.svelte
@@ -308,7 +308,7 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
             class="relative border-b border-[var(--color-border)] transition-colors duration-200 last:border-b-0
             ${contest.id && userParticipation.has(contest.id)
               ? 'border-l-4 border-l-[rgb(34_197_94)] bg-[var(--color-solved-row)]'
-              : 'hover:bg-black/5'}"
+              : 'hover:bg-[var(--color-tertiary)]/30'}"
           >
             <td class="p-3 text-center">
               {#if contest.id}
diff --git a/src/lib/components/LeaderboardTable.svelte b/src/lib/components/LeaderboardTable.svelte
index ac1be4e..24b2c27 100644
--- a/src/lib/components/LeaderboardTable.svelte
+++ b/src/lib/components/LeaderboardTable.svelte
@@ -35,7 +35,7 @@ function formatNumber(num: number): string {
       <tbody>
         {#each leaderboardEntries as entry}
           <tr
-            class="relative border-b border-[var(--color-border)] transition-colors duration-200 last:border-b-0 hover:bg-black/5"
+            class="relative border-b border-[var(--color-border)] transition-colors duration-200 last:border-b-0 hover:bg-[var(--color-tertiary)]/30"
           >
             <td class="p-2 text-center sm:p-3">
               <!-- Rank with special styling for top 3 -->
diff --git a/src/lib/components/ThemeSwitcher.svelte b/src/lib/components/ThemeSwitcher.svelte
index eeb5e2b..b66923a 100644
--- a/src/lib/components/ThemeSwitcher.svelte
+++ b/src/lib/components/ThemeSwitcher.svelte
@@ -1,62 +1,85 @@
-<script>
-  import { retroBeigeTheme } from '../theme-options/retro-beige';
-  import { retroPurpleTheme } from '../theme-options/retro-purple';
-  import { retroTealTheme } from '../theme-options/retro-teal';
-  
-  // Current theme (default is the blue-pink theme we've already applied)
-  let currentTheme = 'retro-blue-pink';
-  
-  // All available themes
-  const themes = [
-    { id: 'retro-blue-pink', name: 'Blue & Pink', description: 'Light blue background with pink accents' },
-    { id: 'retro-beige', name: 'Beige & Brown', description: 'Warm beige background with brown accents' },
-    { id: 'retro-purple', name: 'Purple & Yellow', description: 'Vibrant purple background with yellow accents' },
-    { id: 'retro-teal', name: 'Teal & Coral', description: 'Fresh teal background with coral accents' }
-  ];
-  
-  // Function to apply a theme
-  function applyTheme(themeId) {
-    currentTheme = themeId;
-    
-    // Get the root element to apply CSS variables
-    const root = document.documentElement;
-    
-    // Apply the selected theme
-    let themeColors = '';
-    
-    switch(themeId) {
-      case 'retro-beige':
-        themeColors = retroBeigeTheme.colors;
-        break;
-      case 'retro-purple':
-        themeColors = retroPurpleTheme.colors;
-        break;
-      case 'retro-teal':
-        themeColors = retroTealTheme.colors;
-        break;
-      default:
-        // Use the blue-pink theme that's already in app.css
-        break;
+<script lang="ts">
+import { browser } from '$app/environment';
+import { onMount } from 'svelte';
+import { AVAILABLE_THEMES } from '../theme';
+import { retroBeigeTheme } from '../theme-options/retro-beige';
+import { retroPurpleTheme } from '../theme-options/retro-purple';
+import { retroTealTheme } from '../theme-options/retro-teal';
+import { retroBlueLightTheme } from '../theme-options/retro-blue-light';
+import { retroBlueDarkTheme } from '../theme-options/retro-blue-dark';
+
+// Current theme (default is the blue light theme)
+let currentTheme = 'retro-blue-light';
+
+// Use the themes from the constants
+const themes = AVAILABLE_THEMES;
+
+// Load theme from localStorage on mount
+onMount(() => {
+  if (browser) {
+    const savedTheme = localStorage.getItem('gitgud-theme');
+    if (savedTheme) {
+      applyTheme(savedTheme);
+    } else {
+      // Apply default theme (blue light)
+      applyTheme('retro-blue-light');
     }
-    
-    // If we have theme colors to apply, create a style element and add it to the head
-    if (themeColors) {
-      // Remove any existing theme style element
-      const existingTheme = document.getElementById('theme-colors');
-      if (existingTheme) {
-        existingTheme.remove();
-      }
-      
-      // Create a new style element
-      const style = document.createElement('style');
-      style.id = 'theme-colors';
-      style.textContent = `:root {${themeColors}}`;
-      document.head.appendChild(style);
+  }
+});
+
+// Function to apply a theme
+function applyTheme(themeId: string) {
+  currentTheme = themeId;
+
+  // Save theme preference to localStorage
+  if (browser) {
+    localStorage.setItem('gitgud-theme', themeId);
+  }
+
+  // Apply the selected theme
+  let themeColors = '';
+
+  switch (themeId) {
+    case 'retro-blue-light':
+      themeColors = retroBlueLightTheme.colors;
+      break;
+    case 'retro-blue-dark':
+      themeColors = retroBlueDarkTheme.colors;
+      break;
+    case 'retro-beige':
+      themeColors = retroBeigeTheme.colors;
+      break;
+    case 'retro-purple':
+      themeColors = retroPurpleTheme.colors;
+      break;
+    case 'retro-teal':
+      themeColors = retroTealTheme.colors;
+      break;
+    default:
+      // Use the blue-pink theme that's already in app.css
+      break;
+  }
+
+  // If we have theme colors to apply, create a style element and add it to the head
+  if (themeColors) {
+    // Remove any existing theme style element
+    const existingTheme = document.getElementById('theme-colors');
+    if (existingTheme) {
+      existingTheme.remove();
     }
+
+    // Create a new style element
+    const style = document.createElement('style');
+    style.id = 'theme-colors';
+    style.textContent = `:root {${themeColors}}`;
+    document.head.appendChild(style);
   }
+}
 </script>
 
-<div class="theme-switcher rounded border-2 border-[var(--color-border)] bg-[var(--color-secondary)] p-4 shadow-[2px_2px_0_rgba(0,0,0,0.1)]">
+<div
+  class="theme-switcher rounded border-2 border-[var(--color-border)] bg-[var(--color-secondary)] p-4 shadow-[2px_2px_0_rgba(0,0,0,0.1)]"
+>
   <h3 class="mb-3 font-bold">Theme Switcher</h3>
   <div class="flex flex-wrap gap-2">
     {#each themes as theme}
@@ -72,12 +95,12 @@
 </div>
 
 <style>
-  .theme-switcher {
-    max-width: 100%;
-    margin-bottom: 1rem;
-  }
-  
-  button:hover {
-    transform: translateY(1px);
-  }
+.theme-switcher {
+  max-width: 100%;
+  margin-bottom: 1rem;
+}
+
+button:hover {
+  transform: translateY(1px);
+}
 </style>
diff --git a/src/lib/components/TopicSidebar.svelte b/src/lib/components/TopicSidebar.svelte
index 60a112c..9b69ff5 100644
--- a/src/lib/components/TopicSidebar.svelte
+++ b/src/lib/components/TopicSidebar.svelte
@@ -106,8 +106,8 @@ onMount(() => {
       <button
         class={`w-full rounded-md px-3 py-2 text-left transition-all duration-200 ${
           selectedTopic === null
-            ? 'scale-102 bg-[var(--color-secondary)] text-white shadow-sm'
-            : 'text-[var(--color-text)] hover:scale-102 hover:bg-[var(--color-tertiary)] hover:shadow-sm'
+            ? 'scale-102 bg-[var(--color-accent)] text-white shadow-sm'
+            : 'text-[var(--color-heading)] hover:scale-102 hover:bg-[var(--color-tertiary)] hover:text-[var(--color-heading)] hover:shadow-sm'
         }`}
         on:click={() => onSelectTopic(null)}
       >
@@ -118,8 +118,8 @@ onMount(() => {
         <button
           class={`w-full rounded-md px-3 py-2 text-left transition-all duration-200 ${
             selectedTopic === topic
-              ? 'scale-102 bg-[var(--color-secondary)] text-white shadow-sm'
-              : 'text-[var(--color-text)] hover:scale-102 hover:bg-[var(--color-tertiary)] hover:shadow-sm'
+              ? 'scale-102 bg-[var(--color-accent)] text-white shadow-sm'
+              : 'text-[var(--color-heading)] hover:scale-102 hover:bg-[var(--color-tertiary)] hover:text-[var(--color-heading)] hover:shadow-sm'
           }`}
           on:click={() => onSelectTopic(topic)}
         >
@@ -140,8 +140,8 @@ onMount(() => {
       <button
         class={`w-full rounded-md px-3 py-2 text-left transition-all duration-200 ${
           selectedTopic === null
-            ? 'scale-102 bg-[var(--color-primary)] text-white shadow-sm'
-            : 'text-[var(--color-text)] hover:scale-102 hover:bg-[var(--color-tertiary)] hover:shadow-sm'
+            ? 'scale-102 bg-[var(--color-accent)] text-white shadow-sm'
+            : 'text-[var(--color-heading)] hover:scale-102 hover:bg-[var(--color-tertiary)] hover:text-[var(--color-heading)] hover:shadow-sm'
         }`}
         on:click={() => onSelectTopic(null)}
       >
@@ -152,8 +152,8 @@ onMount(() => {
         <button
           class={`w-full rounded-md px-3 py-2 text-left transition-all duration-200 ${
             selectedTopic === topic
-              ? 'scale-102 bg-[var(--color-primary)] text-white shadow-sm'
-              : 'text-[var(--color-text)] hover:scale-102 hover:bg-[var(--color-tertiary)] hover:shadow-sm'
+              ? 'scale-102 bg-[var(--color-accent)] text-white shadow-sm'
+              : 'text-[var(--color-heading)] hover:scale-102 hover:bg-[var(--color-tertiary)] hover:text-[var(--color-heading)] hover:shadow-sm'
           }`}
           on:click={() => onSelectTopic(topic)}
         >
diff --git a/src/lib/theme-options/retro-blue-dark.js b/src/lib/theme-options/retro-blue-dark.js
new file mode 100644
index 0000000..1d94813
--- /dev/null
+++ b/src/lib/theme-options/retro-blue-dark.js
@@ -0,0 +1,30 @@
+// Retro Blue Dark Theme Configuration
+export const retroBlueDarkTheme = {
+  name: 'retro-blue-dark',
+  description: 'A dark retro-inspired theme with deep blue background and pink accents',
+  author: 'gitgud team',
+  version: '1.0.0',
+  colors: `
+    /* Colors - Retro Blue Dark Theme */
+    --color-white: oklch(1 0 0);
+    --color-black: oklch(0 0 0);
+    --color-primary: oklch(0.2 0.05 240); /* Dark blue background */
+    --color-secondary: oklch(0.25 0.04 240); /* Slightly lighter blue for cards */
+    --color-tertiary: oklch(0.15 0.06 240); /* Darker blue for headers */
+    --color-accent: oklch(0.7 0.2 350); /* Pink accent - same as light theme */
+    --color-heading: oklch(0.9 0 0 / 0.9); /* Light text for headings */
+    --color-text: oklch(0.9 0 0 / 0.8); /* Light text for body */
+    --color-text-muted: oklch(0.9 0 0 / 0.5); /* Muted light text */
+    --color-background: oklch(0.2 0.05 240 / 0.7); /* Transparent dark blue background */
+    --color-border: oklch(0.3 0.08 240); /* Border color */
+    --color-link: oklch(0.7 0.2 350); /* Pink links */
+    --color-link-subtle: oklch(0.75 0.15 350); /* Subtle pink links */
+    --color-link-nav: oklch(0.9 0 0 / 0.9); /* Light nav links */
+    --color-username: oklch(0.6 0.25 30); /* Orange for usernames */
+    --color-solved-row: color-mix(
+      in oklab,
+      rgb(34 197 94) 25%,
+      transparent
+    ); /* Dark green for solved rows */
+  `
+};
diff --git a/src/lib/theme-options/retro-blue-light.js b/src/lib/theme-options/retro-blue-light.js
new file mode 100644
index 0000000..c75a6e5
--- /dev/null
+++ b/src/lib/theme-options/retro-blue-light.js
@@ -0,0 +1,30 @@
+// Retro Blue Light Theme Configuration
+export const retroBlueLightTheme = {
+  name: 'retro-blue-light',
+  description: 'A retro-inspired theme with light blue background and pink accents',
+  author: 'gitgud team',
+  version: '1.0.0',
+  colors: `
+    /* Colors - Retro Blue Light Theme */
+    --color-white: oklch(1 0 0);
+    --color-black: oklch(0 0 0);
+    --color-primary: oklch(0.9 0.03 240); /* Light blue background */
+    --color-secondary: oklch(0.95 0.02 240); /* Lighter blue for cards */
+    --color-tertiary: oklch(0.85 0.04 240); /* Slightly darker blue for headers */
+    --color-accent: oklch(0.7 0.2 350); /* Pink accent */
+    --color-heading: oklch(0.2 0 0 / 0.9); /* Dark text for headings */
+    --color-text: oklch(0.2 0 0 / 0.8); /* Dark text for body */
+    --color-text-muted: oklch(0.2 0 0 / 0.5); /* Muted dark text */
+    --color-background: oklch(0.9 0.03 240 / 0.7); /* Transparent blue background */
+    --color-border: oklch(0.75 0.05 240); /* Border color */
+    --color-link: oklch(0.7 0.2 350); /* Pink links */
+    --color-link-subtle: oklch(0.75 0.15 350); /* Subtle pink links */
+    --color-link-nav: oklch(0.2 0 0 / 0.9); /* Dark nav links */
+    --color-username: oklch(0.6 0.25 30); /* Orange for usernames */
+    --color-solved-row: color-mix(
+      in oklab,
+      rgb(34 197 94) 15%,
+      transparent
+    ); /* Light green for solved rows */
+  `
+};
diff --git a/src/lib/theme.js b/src/lib/theme.js
index 30b4109..11cd571 100644
--- a/src/lib/theme.js
+++ b/src/lib/theme.js
@@ -1,7 +1,47 @@
 // Theme configuration
 export const theme = {
-  name: 'retro-blue-pink',
+  name: 'retro-blue-light',
   description: 'A retro-inspired theme with light blue background and pink accents',
   author: 'gitgud team',
   version: '1.0.0'
 };
+
+// Theme types
+export const THEME_TYPES = {
+  LIGHT: 'light',
+  DARK: 'dark'
+};
+
+// Available themes
+export const AVAILABLE_THEMES = [
+  {
+    id: 'retro-blue-light',
+    name: 'Blue Light',
+    type: THEME_TYPES.LIGHT,
+    description: 'Light blue background with pink accents'
+  },
+  {
+    id: 'retro-blue-dark',
+    name: 'Blue Dark',
+    type: THEME_TYPES.DARK,
+    description: 'Dark blue background with pink accents'
+  },
+  {
+    id: 'retro-beige',
+    name: 'Beige & Brown',
+    type: THEME_TYPES.LIGHT,
+    description: 'Warm beige background with brown accents'
+  },
+  {
+    id: 'retro-purple',
+    name: 'Purple & Yellow',
+    type: THEME_TYPES.LIGHT,
+    description: 'Vibrant purple background with yellow accents'
+  },
+  {
+    id: 'retro-teal',
+    name: 'Teal & Coral',
+    type: THEME_TYPES.LIGHT,
+    description: 'Fresh teal background with coral accents'
+  }
+];
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index f736757..504c673 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -9,7 +9,7 @@
 
 <div class="mx-auto max-w-3xl px-4 py-8">
   <section class="mb-10">
-    <h2 class="text-accent mb-4 text-2xl">gitgud</h2>
+    <h2 class="mb-4 text-2xl text-[var(--color-accent)]">gitgud</h2>
     <p class="mb-4 leading-relaxed">
       gitgud is a collection of hand-picked problems. If you are new to competitive programming you
       can learn the fundamentals at some of these sites:
@@ -113,7 +113,7 @@
       </li>
     </ul>
 
-    <h3 class="text-accent mb-4 text-xl">Optimized for ICPC</h3>
+    <h3 class="mb-4 text-xl text-[var(--color-accent)]">Optimized for ICPC</h3>
     <ul class="mb-4 ml-6">
       <li class="mb-2 leading-relaxed">
         <a
@@ -245,7 +245,7 @@
   </section>
 
   <section class="mb-10">
-    <h2 class="text-accent mb-4 text-2xl">Contribute</h2>
+    <h2 class="mb-4 text-2xl text-[var(--color-accent)]">Contribute</h2>
     <p class="mb-4 leading-relaxed">
       gitgud is an open-source project, and we welcome contributions from the community. If you'd
       like to help improve gitgud, please check out our <a
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 1d4dac9..64205e6 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -6,6 +6,7 @@ import { fetchUserPreferences, updateUserPreferences } from '$lib/services/user'
 import type { UserPreferences } from '$lib/services/user';
 import type { Unsubscriber } from 'svelte/store';
 import { supabase } from '$lib/services/database';
+import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
 
 let preferences: UserPreferences = {
   hideFromLeaderboard: false
@@ -267,5 +268,37 @@ onMount(() => {
         </div>
       </div>
     </div>
+
+    <!-- Theme Settings Section -->
+    {#if !loading}
+      <div class="mt-6 overflow-hidden rounded">
+        <div class="border-b border-[var(--color-border)] bg-[var(--color-tertiary)] p-4">
+          <div class="flex items-center gap-2">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-5 w-5 text-[var(--color-text-muted)]"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path
+                d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"
+              />
+            </svg>
+            <span class="font-bold text-[var(--color-heading)]">Theme</span>
+          </div>
+        </div>
+
+        <div class="bg-[var(--color-secondary)] p-4">
+          <ThemeSwitcher />
+          <p class="mt-2 text-sm text-[var(--color-text-muted)]">
+            Choose your preferred theme. Your selection will be remembered when you return.
+          </p>
+        </div>
+      </div>
+    {/if}
   {/if}
 </div>

From c49706851a96c9c841b1383eeb0ed619fcdc147d Mon Sep 17 00:00:00 2001
From: Cameron Custer <custer.cameron@gmail.com>
Date: Sat, 19 Apr 2025 15:41:56 -0700
Subject: [PATCH 4/7] align tables

---
 src/lib/components/ContestTable.svelte     | 49 ++++++++++++----------
 src/lib/components/LeaderboardTable.svelte | 24 ++++++-----
 src/lib/components/ProblemTable.svelte     | 31 ++++----------
 3 files changed, 51 insertions(+), 53 deletions(-)

diff --git a/src/lib/components/ContestTable.svelte b/src/lib/components/ContestTable.svelte
index 6e0605f..7780ff6 100644
--- a/src/lib/components/ContestTable.svelte
+++ b/src/lib/components/ContestTable.svelte
@@ -148,14 +148,16 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
 </script>
 
 <div class="mt-4 w-full">
-  <div class="table-wrapper rounded-lg bg-[var(--color-secondary)] shadow-sm">
+  <div
+    class="table-wrapper rounded-md border-2 border-[var(--color-border)] bg-[var(--color-secondary)] shadow-[2px_2px_0_rgba(0,0,0,0.1)]"
+  >
     <table
-      class="w-full min-w-[900px] table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)]"
+      class="w-full min-w-[900px] table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)] font-mono text-sm"
     >
       <thead>
         <tr>
           <th
-            class="sticky top-0 z-10 w-[5%] cursor-pointer bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
+            class="sticky top-0 z-10 w-[5%] cursor-pointer border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
             on:click={handleParticipatedFilter}
             title="Filter by participation status"
           >
@@ -213,7 +215,7 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
             </div>
           </th>
           <th
-            class="sticky top-0 z-10 w-[6%] cursor-pointer bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
+            class="sticky top-0 z-10 w-[6%] cursor-pointer border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
             style="min-width: 50px;"
             on:click={handleTypeFilter}
             title="Filter by contest type"
@@ -224,7 +226,7 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
                   <div class="relative">
                     <img src={icpcLogo} alt="ICPC" class="h-6 w-6 object-contain" />
                     <div
-                      class="absolute -right-1 -bottom-1 h-3 w-3 rounded-full border border-white bg-[rgb(34_197_94)]"
+                      class="absolute -right-1 -bottom-1 h-3 w-3 rounded border border-white bg-[rgb(34_197_94)]"
                     ></div>
                   </div>
                 </span>
@@ -233,7 +235,7 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
                   <div class="relative">
                     <img src={codeforcesLogo} alt="Codeforces" class="h-5 w-5 object-contain" />
                     <div
-                      class="absolute -right-1 -bottom-1 h-3 w-3 rounded-full border border-white bg-[rgb(239_68_68)]"
+                      class="absolute -right-1 -bottom-1 h-3 w-3 rounded border border-white bg-[rgb(239_68_68)]"
                     ></div>
                   </div>
                 </span>
@@ -256,16 +258,18 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
               {/if}
             </div>
           </th>
-          <th class="sticky top-0 z-10 w-[34%] bg-[var(--color-tertiary)] p-3 text-left font-bold">
+          <th
+            class="sticky top-0 z-10 w-[34%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-left font-bold"
+          >
             Contest
           </th>
           <th
-            class="sticky top-0 z-10 w-[12%] bg-[var(--color-tertiary)] p-3 text-center font-bold"
+            class="sticky top-0 z-10 w-[12%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-center font-bold"
           >
             Duration
           </th>
           <th
-            class="sticky top-0 z-10 w-[15%] cursor-pointer bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
+            class="sticky top-0 z-10 w-[15%] cursor-pointer border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
             on:click={handleDifficultySort}
             title="Click to sort by difficulty"
           >
@@ -285,7 +289,9 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
               <span>Difficulty</span>
             </div>
           </th>
-          <th class="sticky top-0 z-10 w-[21%] bg-[var(--color-tertiary)] p-3 text-left font-bold">
+          <th
+            class="sticky top-0 z-10 w-[21%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-left font-bold"
+          >
             <div class="flex items-center gap-2">
               <RecommendersFilter
                 authors={uniqueAuthors}
@@ -298,7 +304,8 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
               />
             </div>
           </th>
-          <th class="sticky top-0 z-10 w-[5%] bg-[var(--color-tertiary)] p-3 text-right font-bold"
+          <th
+            class="sticky top-0 z-10 w-[5%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-right font-bold"
           ></th>
         </tr>
       </thead>
@@ -314,10 +321,10 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
               {#if contest.id}
                 {@const hasParticipated = userParticipation.has(contest.id)}
                 <button
-                  class={`flex h-8 w-8 cursor-pointer items-center justify-center rounded-full shadow-sm transition-all duration-300
+                  class={`flex h-8 w-8 cursor-pointer items-center justify-center rounded shadow-[1px_1px_0_rgba(0,0,0,0.1)] transition-all duration-300
                     ${hasParticipated
-                      ? 'solved-button bg-[rgb(34_197_94)] text-white shadow-[0_0_8px_rgba(34,197,94,0.4)]'
-                      : 'border border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[rgb(34_197_94)] hover:bg-[color-mix(in_oklab,rgb(34_197_94)_10%,transparent)] hover:text-[rgb(34_197_94)] hover:shadow-[0_0_5px_rgba(34,197,94,0.2)]'
+                      ? 'bg-[rgb(34_197_94)] text-white'
+                      : 'border-2 border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[rgb(34_197_94)] hover:bg-[color-mix(in_oklab,rgb(34_197_94)_10%,transparent)] hover:text-[rgb(34_197_94)]'
                     } ${!isAuthenticated ? 'cursor-not-allowed opacity-50' : ''}`}
                   on:click={() => isAuthenticated && onToggleParticipation(contest.id!, !hasParticipated)}
                   title={hasParticipated ? 'Mark as not participated' : 'Mark as participated'}
@@ -392,7 +399,7 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
 
                   <!-- Like button -->
                   <button
-                    class={`flex cursor-pointer items-center gap-1 rounded border px-2 py-1 transition-all duration-200
+                    class={`flex cursor-pointer items-center gap-1 rounded border-2 px-2 py-1 transition-all duration-200
                       ${hasLiked
                         ? 'border-[color-mix(in_oklab,rgb(34_197_94)_50%,transparent)] bg-[color-mix(in_oklab,rgb(34_197_94)_10%,transparent)] text-[rgb(34_197_94)]'
                         : 'border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[color-mix(in_oklab,rgb(34_197_94)_50%,transparent)] hover:bg-[color-mix(in_oklab,rgb(34_197_94)_10%,transparent)] hover:text-[rgb(34_197_94)]'
@@ -426,7 +433,7 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
 
                   <!-- Dislike button -->
                   <button
-                    class={`flex cursor-pointer items-center gap-1 rounded border px-2 py-1 transition-all duration-200
+                    class={`flex cursor-pointer items-center gap-1 rounded border-2 px-2 py-1 transition-all duration-200
                       ${hasDisliked
                         ? 'border-[color-mix(in_oklab,rgb(239_68_68)_50%,transparent)] bg-[color-mix(in_oklab,rgb(239_68_68)_10%,transparent)] text-[rgb(239_68_68)]'
                         : 'border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[color-mix(in_oklab,rgb(239_68_68)_50%,transparent)] hover:bg-[color-mix(in_oklab,rgb(239_68_68)_10%,transparent)] hover:text-[rgb(239_68_68)]'
@@ -474,14 +481,14 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
   position: relative;
 }
 
-/* Add smooth transitions for solved button */
-.solved-button {
-  transition: all 0.3s ease;
+/* Add smooth transitions for buttons */
+button {
+  transition: all 0.2s ease;
 }
 
 /* Add hover effects */
-tr:hover .solved-button:not(:hover) {
-  transform: scale(1.05);
+button:hover {
+  transform: translateY(1px);
 }
 
 /* Ensure proper text truncation */
diff --git a/src/lib/components/LeaderboardTable.svelte b/src/lib/components/LeaderboardTable.svelte
index 24b2c27..0cc92da 100644
--- a/src/lib/components/LeaderboardTable.svelte
+++ b/src/lib/components/LeaderboardTable.svelte
@@ -11,22 +11,26 @@ function formatNumber(num: number): string {
 </script>
 
 <div class="mt-4 w-full">
-  <div class="table-wrapper rounded-lg bg-[var(--color-secondary)] shadow-sm">
-    <table class="w-full table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)]">
+  <div
+    class="table-wrapper rounded-md border-2 border-[var(--color-border)] bg-[var(--color-secondary)] shadow-[2px_2px_0_rgba(0,0,0,0.1)]"
+  >
+    <table
+      class="w-full table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)] font-mono text-sm"
+    >
       <thead>
         <tr>
           <th
-            class="sticky top-0 z-10 w-[15%] bg-[var(--color-tertiary)] p-2 text-center font-bold sm:w-[10%] sm:p-3"
+            class="sticky top-0 z-10 w-[15%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-center font-bold sm:w-[10%] sm:p-3"
           >
             Rank
           </th>
           <th
-            class="sticky top-0 z-10 w-[55%] bg-[var(--color-tertiary)] p-2 text-left font-bold sm:w-[60%] sm:p-3"
+            class="sticky top-0 z-10 w-[55%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-left font-bold sm:w-[60%] sm:p-3"
           >
             User
           </th>
           <th
-            class="sticky top-0 z-10 w-[30%] bg-[var(--color-tertiary)] p-2 text-center font-bold sm:p-3"
+            class="sticky top-0 z-10 w-[30%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-center font-bold sm:p-3"
           >
             Solves
           </th>
@@ -41,19 +45,19 @@ function formatNumber(num: number): string {
               <!-- Rank with special styling for top 3 -->
               {#if entry.rank === 1}
                 <span
-                  class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-[var(--color-legendary-grandmaster)] font-bold text-white"
+                  class="inline-flex h-8 w-8 items-center justify-center rounded bg-[var(--color-legendary-grandmaster)] font-bold text-white shadow-[1px_1px_0_rgba(0,0,0,0.1)]"
                 >
                   {entry.rank}
                 </span>
               {:else if entry.rank === 2}
                 <span
-                  class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-[var(--color-specialist)] font-bold text-white"
+                  class="inline-flex h-8 w-8 items-center justify-center rounded bg-[var(--color-specialist)] font-bold text-white shadow-[1px_1px_0_rgba(0,0,0,0.1)]"
                 >
                   {entry.rank}
                 </span>
               {:else if entry.rank === 3}
                 <span
-                  class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-[var(--color-pupil)] font-bold text-white"
+                  class="inline-flex h-8 w-8 items-center justify-center rounded bg-[var(--color-pupil)] font-bold text-white shadow-[1px_1px_0_rgba(0,0,0,0.1)]"
                 >
                   {entry.rank}
                 </span>
@@ -67,11 +71,11 @@ function formatNumber(num: number): string {
                   <img
                     src={entry.avatarUrl}
                     alt={entry.username}
-                    class="h-8 w-8 rounded-full border border-[var(--color-border)] sm:h-10 sm:w-10"
+                    class="h-8 w-8 rounded border-2 border-[var(--color-border)] sm:h-10 sm:w-10"
                   />
                 {:else}
                   <div
-                    class="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--color-tertiary)] text-xs font-medium sm:h-10 sm:w-10 sm:text-sm"
+                    class="flex h-8 w-8 items-center justify-center rounded bg-[var(--color-tertiary)] text-xs font-medium shadow-[1px_1px_0_rgba(0,0,0,0.1)] sm:h-10 sm:w-10 sm:text-sm"
                   >
                     {entry.username.substring(0, 2).toUpperCase()}
                   </div>
diff --git a/src/lib/components/ProblemTable.svelte b/src/lib/components/ProblemTable.svelte
index 43594cb..f1d2095 100644
--- a/src/lib/components/ProblemTable.svelte
+++ b/src/lib/components/ProblemTable.svelte
@@ -206,7 +206,7 @@ function getDifficultyTooltip(problem: Problem): string {
                   <div class="relative">
                     <img src={codeforcesLogo} alt="Codeforces" class="h-5 w-5 object-contain" />
                     <div
-                      class="absolute -right-1 -bottom-1 h-3 w-3 rounded-full border border-white bg-[#3B5998]"
+                      class="absolute -right-1 -bottom-1 h-3 w-3 rounded border border-white bg-[#3B5998]"
                     ></div>
                   </div>
                 </span>
@@ -215,7 +215,7 @@ function getDifficultyTooltip(problem: Problem): string {
                   <div class="relative">
                     <img src={kattisLogo} alt="Kattis" class="h-5 w-5 object-contain" />
                     <div
-                      class="absolute -right-1 -bottom-1 h-3 w-3 rounded-full border border-white bg-[#f2ae00]"
+                      class="absolute -right-1 -bottom-1 h-3 w-3 rounded border border-white bg-[#f2ae00]"
                     ></div>
                   </div>
                 </span>
@@ -300,8 +300,8 @@ function getDifficultyTooltip(problem: Problem): string {
                 <button
                   class={`flex h-8 w-8 cursor-pointer items-center justify-center rounded shadow-[1px_1px_0_rgba(0,0,0,0.1)] transition-all duration-300
                     ${isSolved
-                      ? 'solved-button bg-[rgb(34_197_94)] text-white shadow-[0_0_8px_rgba(34,197,94,0.4)]'
-                      : 'border-2 border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[rgb(34_197_94)] hover:bg-[color-mix(in_oklab,rgb(34_197_94)_10%,transparent)] hover:text-[rgb(34_197_94)] hover:shadow-[0_0_5px_rgba(34,197,94,0.2)]'
+                      ? 'bg-[rgb(34_197_94)] text-white'
+                      : 'border-2 border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[rgb(34_197_94)] hover:bg-[color-mix(in_oklab,rgb(34_197_94)_10%,transparent)] hover:text-[rgb(34_197_94)]'
                     } ${!isAuthenticated ? 'cursor-not-allowed opacity-50' : ''}`}
                   on:click={() => isAuthenticated && onToggleSolved(problem.id!, !isSolved)}
                   title={!isAuthenticated
@@ -504,22 +504,18 @@ td:last-child {
   width: 100%;
 }
 
-/* Add subtle animation for solved problems */
+/* Basic styling for elements */
 tr {
   overflow: hidden;
 }
 
-/* Checkmark animation */
-.solved-button {
-  animation: pulse 1.5s infinite alternate;
+/* Button transitions */
+button {
+  transition: all 0.2s ease;
 }
 
 .checkmark-icon {
-  transition: transform 0.3s ease;
-}
-
-.solved-button .checkmark-icon {
-  transform: scale(1.1);
+  transition: transform 0.2s ease;
 }
 
 /* Sortable header styles */
@@ -544,13 +540,4 @@ a[href*='github.com']:hover {
 button:hover {
   transform: translateY(1px);
 }
-
-@keyframes pulse {
-  0% {
-    box-shadow: 0 0 5px rgba(34, 197, 94, 0.4);
-  }
-  100% {
-    box-shadow: 0 0 10px rgba(34, 197, 94, 0.7);
-  }
-}
 </style>

From 497b009eef8659575ce6e75a0436a6a36cb1be02 Mon Sep 17 00:00:00 2001
From: Cameron Custer <custer.cameron@gmail.com>
Date: Sat, 19 Apr 2025 15:42:20 -0700
Subject: [PATCH 5/7] update about

---
 src/routes/about/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 504c673..37fe6a1 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -9,7 +9,7 @@
 
 <div class="mx-auto max-w-3xl px-4 py-8">
   <section class="mb-10">
-    <h2 class="mb-4 text-2xl text-[var(--color-accent)]">gitgud</h2>
+    <h2 class="mb-4 text-2xl text-[var(--color-accent)]">gitgud.cc</h2>
     <p class="mb-4 leading-relaxed">
       gitgud is a collection of hand-picked problems. If you are new to competitive programming you
       can learn the fundamentals at some of these sites:

From c1706e74722dc81e135921fc5207cacb617182bd Mon Sep 17 00:00:00 2001
From: Cameron Custer <custer.cameron@gmail.com>
Date: Sat, 19 Apr 2025 16:21:00 -0700
Subject: [PATCH 6/7] checkpoint

---
 sql/auth/user_preferences.sql              |  24 +++--
 src/app.html                               |  65 ++++++------
 src/lib/components/ContestTable.svelte     |  14 +--
 src/lib/components/LeaderboardTable.svelte |   2 +-
 src/lib/services/theme.ts                  | 107 ++++++++++++++++++++
 src/lib/services/user.ts                   |  14 ++-
 src/lib/theme.js                           |  30 ++----
 src/routes/+layout.svelte                  |  24 ++++-
 src/routes/settings/+page.svelte           | 109 ++++++++++++++++-----
 9 files changed, 290 insertions(+), 99 deletions(-)
 create mode 100644 src/lib/services/theme.ts

diff --git a/sql/auth/user_preferences.sql b/sql/auth/user_preferences.sql
index b16b5ab..8078c4f 100644
--- a/sql/auth/user_preferences.sql
+++ b/sql/auth/user_preferences.sql
@@ -3,37 +3,35 @@ CREATE TABLE IF NOT EXISTS user_preferences (
   id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
   user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
   hide_from_leaderboard BOOLEAN NOT NULL DEFAULT false,
+  theme TEXT NOT NULL DEFAULT 'light',
   created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
   updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
   UNIQUE(user_id)
 );
-
 -- Create RLS policies for user_preferences table
 ALTER TABLE user_preferences ENABLE ROW LEVEL SECURITY;
-
+-- Drop existing policies if they exist
+DROP POLICY IF EXISTS "Users can read their own preferences" ON user_preferences;
+DROP POLICY IF EXISTS "Users can insert their own preferences" ON user_preferences;
+DROP POLICY IF EXISTS "Users can update their own preferences" ON user_preferences;
 -- Users can read their own preferences
 CREATE POLICY "Users can read their own preferences" ON user_preferences FOR
 SELECT USING (auth.uid() = user_id);
-
 -- Users can insert their own preferences
 CREATE POLICY "Users can insert their own preferences" ON user_preferences FOR
 INSERT WITH CHECK (auth.uid() = user_id);
-
 -- Users can update their own preferences
 CREATE POLICY "Users can update their own preferences" ON user_preferences FOR
 UPDATE USING (auth.uid() = user_id);
-
 -- Create function to automatically create user preferences on new user creation
-CREATE OR REPLACE FUNCTION public.handle_new_user_preferences() RETURNS TRIGGER AS $$ 
-BEGIN
-  INSERT INTO public.user_preferences (user_id, hide_from_leaderboard)
-  VALUES (NEW.id, false);
-  RETURN NEW;
+CREATE OR REPLACE FUNCTION public.handle_new_user_preferences() RETURNS TRIGGER AS $$ BEGIN
+INSERT INTO public.user_preferences (user_id, hide_from_leaderboard, theme)
+VALUES (NEW.id, false, 'light');
+RETURN NEW;
 END;
 $$ LANGUAGE plpgsql SECURITY DEFINER;
-
 -- Create trigger to call the function when a new user is created
 DROP TRIGGER IF EXISTS on_auth_user_created_preferences ON auth.users;
 CREATE TRIGGER on_auth_user_created_preferences
-AFTER INSERT ON auth.users 
-FOR EACH ROW EXECUTE FUNCTION public.handle_new_user_preferences();
+AFTER
+INSERT ON auth.users FOR EACH ROW EXECUTE FUNCTION public.handle_new_user_preferences();
\ No newline at end of file
diff --git a/src/app.html b/src/app.html
index d53a8b2..2900f83 100644
--- a/src/app.html
+++ b/src/app.html
@@ -7,39 +7,48 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
     />
-    <!-- Theme initialization script to prevent flashing -->
+    <!-- Preload styles to prevent theme flashing -->
+    <style>
+      :root {
+        /* Default light theme colors to prevent flashing */
+        --color-primary: oklch(0.9 0.03 240);
+        --color-secondary: oklch(0.95 0.02 240);
+        --color-tertiary: oklch(0.85 0.04 240);
+        --color-accent: oklch(0.7 0.2 350);
+        --color-heading: oklch(0.2 0 0 / 0.9);
+        --color-text: oklch(0.2 0 0 / 0.8);
+        --color-text-muted: oklch(0.2 0 0 / 0.5);
+        --color-background: oklch(0.9 0.03 240 / 0.7);
+        --color-border: oklch(0.75 0.05 240);
+      }
+
+      body {
+        background-color: var(--color-primary);
+        color: var(--color-text);
+        font-family: 'Courier New', Courier, monospace;
+        transition: background-color 0.3s ease, color 0.3s ease;
+      }
+    </style>
+
+    <!-- Script to apply theme from localStorage immediately -->
     <script>
       (function() {
         try {
-          const savedTheme = localStorage.getItem('gitgud-theme');
-          if (savedTheme) {
-            // Apply theme colors from theme files
-            let themeColors = '';
-
-            // We can't import the theme files directly, so we'll need to hardcode the dark theme colors
-            // This is just for the initial load to prevent flashing
-            if (savedTheme === 'retro-blue-dark') {
-              themeColors = `
-                --color-primary: oklch(0.2 0.05 240);
-                --color-secondary: oklch(0.25 0.04 240);
-                --color-tertiary: oklch(0.15 0.06 240);
-                --color-heading: oklch(0.9 0 0 / 0.9);
-                --color-text: oklch(0.9 0 0 / 0.8);
-                --color-text-muted: oklch(0.9 0 0 / 0.5);
-                --color-background: oklch(0.2 0.05 240 / 0.7);
-                --color-border: oklch(0.3 0.08 240);
-                --color-link-nav: oklch(0.9 0 0 / 0.9);
-              `;
-
-              // Create a style element and add it to the head
-              const style = document.createElement('style');
-              style.id = 'theme-init';
-              style.textContent = `:root {${themeColors}}`;
-              document.head.appendChild(style);
-            }
+          const storedTheme = localStorage.getItem('gitgud-theme');
+          if (storedTheme === 'dark') {
+            // Apply dark theme immediately
+            document.documentElement.style.setProperty('--color-primary', 'oklch(0.2 0.05 240)');
+            document.documentElement.style.setProperty('--color-secondary', 'oklch(0.25 0.04 240)');
+            document.documentElement.style.setProperty('--color-tertiary', 'oklch(0.15 0.06 240)');
+            document.documentElement.style.setProperty('--color-heading', 'oklch(0.9 0 0 / 0.9)');
+            document.documentElement.style.setProperty('--color-text', 'oklch(0.9 0 0 / 0.8)');
+            document.documentElement.style.setProperty('--color-text-muted', 'oklch(0.9 0 0 / 0.5)');
+            document.documentElement.style.setProperty('--color-background', 'oklch(0.2 0.05 240 / 0.7)');
+            document.documentElement.style.setProperty('--color-border', 'oklch(0.3 0.08 240)');
+            document.documentElement.style.setProperty('--color-link-nav', 'oklch(0.9 0 0 / 0.9)');
           }
         } catch (e) {
-          console.error('Error initializing theme:', e);
+          console.error('Error applying theme:', e);
         }
       })();
     </script>
diff --git a/src/lib/components/ContestTable.svelte b/src/lib/components/ContestTable.svelte
index 7780ff6..c1df5f5 100644
--- a/src/lib/components/ContestTable.svelte
+++ b/src/lib/components/ContestTable.svelte
@@ -333,8 +333,8 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
+                    width="18"
+                    height="18"
                     viewBox="0 0 24 24"
                     fill="none"
                     stroke="currentColor"
@@ -374,7 +374,7 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
             </td>
             <td class="p-3 text-center">
               {#if contest.difficulty !== undefined}
-                <span class={`text-lg font-bold ${getDifficultyColorClass(contest.difficulty)}`}>
+                <span class={`text-2xl font-bold ${getDifficultyColorClass(contest.difficulty)}`}>
                   {getDifficultyStars(contest.difficulty)}
                 </span>
               {:else}
@@ -414,8 +414,8 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
                   >
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
+                      width="18"
+                      height="18"
                       viewBox="0 0 24 24"
                       fill="none"
                       stroke="currentColor"
@@ -448,8 +448,8 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
                   >
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
+                      width="18"
+                      height="18"
                       viewBox="0 0 24 24"
                       fill="none"
                       stroke="currentColor"
diff --git a/src/lib/components/LeaderboardTable.svelte b/src/lib/components/LeaderboardTable.svelte
index 0cc92da..4120230 100644
--- a/src/lib/components/LeaderboardTable.svelte
+++ b/src/lib/components/LeaderboardTable.svelte
@@ -71,7 +71,7 @@ function formatNumber(num: number): string {
                   <img
                     src={entry.avatarUrl}
                     alt={entry.username}
-                    class="h-8 w-8 rounded border-2 border-[var(--color-border)] sm:h-10 sm:w-10"
+                    class="h-8 w-8 rounded sm:h-10 sm:w-10"
                   />
                 {:else}
                   <div
diff --git a/src/lib/services/theme.ts b/src/lib/services/theme.ts
new file mode 100644
index 0000000..989aa49
--- /dev/null
+++ b/src/lib/services/theme.ts
@@ -0,0 +1,107 @@
+/**
+ * Theme management service
+ */
+import { browser } from '$app/environment';
+import { writable, get } from 'svelte/store';
+import { retroBlueLightTheme } from '../theme-options/retro-blue-light';
+import { retroBlueDarkTheme } from '../theme-options/retro-blue-dark';
+import { fetchUserPreferences, updateUserPreferences } from './user';
+import { user } from './auth';
+
+// Theme store
+export const currentTheme = writable<string>('light');
+
+/**
+ * Apply a theme to the document
+ * @param theme - The theme to apply ('light' or 'dark')
+ */
+export function applyTheme(theme: string): void {
+  if (!browser) return;
+
+  currentTheme.set(theme);
+
+  // Apply the selected theme
+  let themeColors = '';
+
+  switch (theme) {
+    case 'dark':
+      themeColors = retroBlueDarkTheme.colors;
+      break;
+    case 'light':
+    default:
+      themeColors = retroBlueLightTheme.colors;
+      break;
+  }
+
+  // If we have theme colors to apply, create a style element and add it to the head
+  if (themeColors) {
+    // Remove any existing theme style element
+    const existingTheme = document.getElementById('theme-colors');
+    if (existingTheme) {
+      existingTheme.remove();
+    }
+
+    // Create a new style element
+    const style = document.createElement('style');
+    style.id = 'theme-colors';
+    style.textContent = `:root {${themeColors}}`;
+    document.head.appendChild(style);
+  }
+}
+
+/**
+ * Save theme preference to database
+ * @param theme - The theme to save ('light' or 'dark')
+ */
+export async function saveThemePreference(theme: string): Promise<boolean> {
+  if (!browser) return false;
+
+  // Check if user is authenticated
+  const currentUser = get(user);
+  if (!currentUser) return false;
+
+  try {
+    // Get current preferences
+    const preferences = await fetchUserPreferences();
+    if (!preferences) return false;
+
+    // Update theme preference
+    preferences.theme = theme;
+
+    // Save to database
+    return await updateUserPreferences(preferences);
+  } catch (err) {
+    console.error('Failed to save theme preference:', err);
+    return false;
+  }
+}
+
+/**
+ * Load theme preference from database
+ */
+export async function loadThemePreference(): Promise<void> {
+  if (!browser) return;
+
+  try {
+    // Get current preferences
+    const preferences = await fetchUserPreferences();
+    if (!preferences) return;
+
+    // Apply theme
+    applyTheme(preferences.theme);
+
+    // Also save to localStorage for faster loading on next visit
+    localStorage.setItem('gitgud-theme', preferences.theme);
+  } catch (err) {
+    console.error('Failed to load theme preference:', err);
+  }
+}
+
+/**
+ * Toggle between light and dark themes
+ */
+export async function toggleTheme(): Promise<void> {
+  const theme = get(currentTheme) === 'light' ? 'dark' : 'light';
+  applyTheme(theme);
+  await saveThemePreference(theme);
+}
diff --git a/src/lib/services/user.ts b/src/lib/services/user.ts
index 750a781..f5ee9e7 100644
--- a/src/lib/services/user.ts
+++ b/src/lib/services/user.ts
@@ -10,6 +10,7 @@ import { get } from 'svelte/store';
  */
 export type UserPreferences = {
   hideFromLeaderboard: boolean;
+  theme: string;
 };
 
 /**
@@ -19,6 +20,7 @@ export type UserPreferencesRecord = {
   id: string;
   user_id: string;
   hide_from_leaderboard: boolean;
+  theme: string;
   created_at: string;
   updated_at: string;
 };
@@ -65,13 +67,15 @@ export async function fetchUserPreferences(): Promise<UserPreferences | null> {
         console.log('fetchUserPreferences: No preferences found, creating default');
         // Create default preferences
         const result = await updateUserPreferences({
-          hideFromLeaderboard: false
+          hideFromLeaderboard: false,
+          theme: 'light'
         });
 
         if (result) {
           console.log('fetchUserPreferences: Default preferences created');
           return {
-            hideFromLeaderboard: false
+            hideFromLeaderboard: false,
+            theme: 'light'
           };
         }
       }
@@ -86,7 +90,8 @@ export async function fetchUserPreferences(): Promise<UserPreferences | null> {
     console.log('fetchUserPreferences: Preferences found', data);
     const record = data as UserPreferencesRecord;
     return {
-      hideFromLeaderboard: record.hide_from_leaderboard
+      hideFromLeaderboard: record.hide_from_leaderboard,
+      theme: record.theme || 'light' // Provide default if not present
     };
   } catch (err) {
     console.error('fetchUserPreferences: Exception', err);
@@ -144,6 +149,7 @@ export async function updateUserPreferences(preferences: UserPreferences): Promi
         .from('user_preferences')
         .update({
           hide_from_leaderboard: preferences.hideFromLeaderboard,
+          theme: preferences.theme,
           updated_at: new Date().toISOString()
         })
         .eq('user_id', currentUser.id);
@@ -153,6 +159,7 @@ export async function updateUserPreferences(preferences: UserPreferences): Promi
       result = await supabase.from('user_preferences').insert({
         user_id: currentUser.id,
         hide_from_leaderboard: preferences.hideFromLeaderboard,
+        theme: preferences.theme,
         created_at: new Date().toISOString(),
         updated_at: new Date().toISOString()
       });
@@ -171,6 +178,7 @@ export async function updateUserPreferences(preferences: UserPreferences): Promi
           .from('user_preferences')
           .update({
             hide_from_leaderboard: preferences.hideFromLeaderboard,
+            theme: preferences.theme,
             updated_at: new Date().toISOString()
           })
           .eq('user_id', currentUser.id);
diff --git a/src/lib/theme.js b/src/lib/theme.js
index 11cd571..4bf4082 100644
--- a/src/lib/theme.js
+++ b/src/lib/theme.js
@@ -1,7 +1,7 @@
 // Theme configuration
 export const theme = {
-  name: 'retro-blue-light',
-  description: 'A retro-inspired theme with light blue background and pink accents',
+  name: 'retro-blue',
+  description: 'A retro-inspired theme with blue background and pink accents',
   author: 'gitgud team',
   version: '1.0.0'
 };
@@ -15,33 +15,15 @@ export const THEME_TYPES = {
 // Available themes
 export const AVAILABLE_THEMES = [
   {
-    id: 'retro-blue-light',
-    name: 'Blue Light',
+    id: 'light',
+    name: 'Light Mode',
     type: THEME_TYPES.LIGHT,
     description: 'Light blue background with pink accents'
   },
   {
-    id: 'retro-blue-dark',
-    name: 'Blue Dark',
+    id: 'dark',
+    name: 'Dark Mode',
     type: THEME_TYPES.DARK,
     description: 'Dark blue background with pink accents'
-  },
-  {
-    id: 'retro-beige',
-    name: 'Beige & Brown',
-    type: THEME_TYPES.LIGHT,
-    description: 'Warm beige background with brown accents'
-  },
-  {
-    id: 'retro-purple',
-    name: 'Purple & Yellow',
-    type: THEME_TYPES.LIGHT,
-    description: 'Vibrant purple background with yellow accents'
-  },
-  {
-    id: 'retro-teal',
-    name: 'Teal & Coral',
-    type: THEME_TYPES.LIGHT,
-    description: 'Fresh teal background with coral accents'
   }
 ];
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 62089e5..0a40015 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,7 +3,9 @@ import Footer from '$lib/components/Footer.svelte';
 import Header from '$lib/components/Header.svelte';
 import '../app.css';
 import { onMount } from 'svelte';
-import { initAuth } from '$lib/services/auth';
+import { initAuth, user } from '$lib/services/auth';
+import { loadThemePreference, applyTheme } from '$lib/services/theme';
+import { browser } from '$app/environment';
 
 let authSubscription: { subscription: { unsubscribe: () => void } } | null = null;
 
@@ -11,6 +13,26 @@ onMount(() => {
   // Initialize authentication
   const initializeAuth = async () => {
     authSubscription = await initAuth();
+
+    // Apply theme immediately to prevent flashing
+    if (browser) {
+      // Try to get theme from localStorage first for immediate application
+      // This prevents flashing while we wait for the database
+      const storedTheme = localStorage.getItem('gitgud-theme');
+      if (storedTheme) {
+        applyTheme(storedTheme);
+      } else {
+        // Default to light theme if nothing in localStorage
+        applyTheme('light');
+      }
+
+      // Load user's theme preference from database once authenticated
+      user.subscribe(async (currentUser) => {
+        if (currentUser) {
+          await loadThemePreference();
+        }
+      });
+    }
   };
 
   initializeAuth();
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 64205e6..66377c9 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -6,10 +6,11 @@ import { fetchUserPreferences, updateUserPreferences } from '$lib/services/user'
 import type { UserPreferences } from '$lib/services/user';
 import type { Unsubscriber } from 'svelte/store';
 import { supabase } from '$lib/services/database';
-import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
+import { applyTheme } from '$lib/services/theme';
 
 let preferences: UserPreferences = {
-  hideFromLeaderboard: false
+  hideFromLeaderboard: false,
+  theme: 'light'
 };
 
 let loading: boolean = true;
@@ -29,18 +30,23 @@ async function loadPreferences(): Promise<void> {
     if (userPrefs) {
       console.log('loadPreferences: User preferences loaded', userPrefs);
       preferences = userPrefs;
+
+      // Apply theme immediately
+      applyTheme(preferences.theme);
     } else {
       console.log('loadPreferences: No preferences returned, using defaults');
       // If no preferences were returned, try to create them
       const result = await updateUserPreferences({
-        hideFromLeaderboard: false
+        hideFromLeaderboard: false,
+        theme: 'light'
       });
 
       if (result) {
         console.log('loadPreferences: Default preferences created');
         // Set the default preferences in the UI
         preferences = {
-          hideFromLeaderboard: false
+          hideFromLeaderboard: false,
+          theme: 'light'
         };
       } else {
         console.log('loadPreferences: Failed to create default preferences');
@@ -87,6 +93,17 @@ function toggleHideFromLeaderboard(): void {
   savePreferences();
 }
 
+// Toggle the theme setting
+function toggleTheme(): void {
+  preferences.theme = preferences.theme === 'light' ? 'dark' : 'light';
+  // Apply theme immediately for better UX
+  applyTheme(preferences.theme);
+  // Save to localStorage for immediate persistence
+  localStorage.setItem('gitgud-theme', preferences.theme);
+  // Save to database
+  savePreferences();
+}
+
 // Initialize auth state and load preferences
 onMount(() => {
   // Create a flag to track if we've already checked auth
@@ -129,15 +146,19 @@ onMount(() => {
 
           const { data: prefData, error } = await supabase
             .from('user_preferences')
-            .select('hide_from_leaderboard')
+            .select('hide_from_leaderboard, theme')
             .eq('user_id', userId)
             .single();
 
           if (prefData && !error) {
             console.log('Direct preference check result:', prefData);
             preferences = {
-              hideFromLeaderboard: prefData.hide_from_leaderboard
+              hideFromLeaderboard: prefData.hide_from_leaderboard,
+              theme: prefData.theme || 'light'
             };
+
+            // Apply the theme immediately
+            applyTheme(preferences.theme);
             loading = false;
             return;
           } else {
@@ -204,10 +225,24 @@ onMount(() => {
 
 <div class="mx-auto w-full max-w-[1200px] px-4 py-6">
   {#if loading}
-    <div class="flex h-[200px] items-center justify-center">
-      <div
-        class="h-8 w-8 animate-spin rounded-full border-2 border-[var(--color-tertiary)] border-t-[var(--color-primary)]"
-      ></div>
+    <div class="flex h-[calc(100vh-4rem)] items-center justify-center py-2 text-center">
+      <div>
+        <svg
+          class="mx-auto h-10 w-10 animate-spin"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
+          ></circle>
+          <path
+            class="opacity-75"
+            fill="var(--color-primary)"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
+        </svg>
+        <p class="mt-2 text-[var(--color-text-muted)]">Loading settings...</p>
+      </div>
     </div>
   {:else}
     <div class="mb-4 flex h-6 justify-end">
@@ -219,8 +254,10 @@ onMount(() => {
       {/if}
     </div>
 
-    <div class="overflow-hidden rounded">
-      <div class="border-b border-[var(--color-border)] bg-[var(--color-tertiary)] p-4">
+    <div
+      class="overflow-hidden rounded-none border-2 border-[var(--color-border)] shadow-[2px_2px_0_rgba(0,0,0,0.1)]"
+    >
+      <div class="border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-4">
         <div class="flex items-center gap-2">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -241,10 +278,13 @@ onMount(() => {
         </div>
       </div>
 
-      <div class="bg-[var(--color-tertiary)] p-4">
+      <div class="bg-[var(--color-secondary)] p-4">
         <div class="flex items-center justify-between">
           <div>
             <p class="font-medium text-[var(--color-text)]">Hide from leaderboard</p>
+            <p class="text-sm text-[var(--color-text-muted)]">
+              Your profile will not be visible on the public leaderboard
+            </p>
           </div>
 
           <div class="w-11 flex-shrink-0">
@@ -252,16 +292,16 @@ onMount(() => {
               type="button"
               role="switch"
               aria-checked={preferences.hideFromLeaderboard}
-              class="relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2 focus:outline-none"
+              class="relative inline-flex h-6 w-11 cursor-pointer items-center rounded focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2 focus:outline-none"
               on:click={toggleHideFromLeaderboard}
               disabled={saving}
             >
               <span class="sr-only">Hide from leaderboard</span>
               <span
-                class="absolute h-full w-full rounded-full transition-colors duration-200 {preferences.hideFromLeaderboard ? 'bg-[var(--color-accent)]' : 'bg-[var(--color-text-muted)]'} {saving ? 'opacity-50' : ''}"
+                class="absolute h-full w-full rounded transition-colors duration-200 {preferences.hideFromLeaderboard ? 'bg-[var(--color-accent)]' : 'bg-[var(--color-text-muted)]'} {saving ? 'opacity-50' : ''}"
               ></span>
               <span
-                class="absolute top-0.5 left-0.5 h-5 w-5 transform rounded-full bg-white transition-transform duration-200 {preferences.hideFromLeaderboard ? 'translate-x-5' : ''} {saving ? 'opacity-50' : ''}"
+                class="absolute top-0.5 left-0.5 h-5 w-5 transform rounded bg-white transition-transform duration-200 {preferences.hideFromLeaderboard ? 'translate-x-5' : ''} {saving ? 'opacity-50' : ''}"
               ></span>
             </button>
           </div>
@@ -271,8 +311,10 @@ onMount(() => {
 
     <!-- Theme Settings Section -->
     {#if !loading}
-      <div class="mt-6 overflow-hidden rounded">
-        <div class="border-b border-[var(--color-border)] bg-[var(--color-tertiary)] p-4">
+      <div
+        class="mt-6 overflow-hidden rounded-none border-2 border-[var(--color-border)] shadow-[2px_2px_0_rgba(0,0,0,0.1)]"
+      >
+        <div class="border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-4">
           <div class="flex items-center gap-2">
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -293,10 +335,33 @@ onMount(() => {
         </div>
 
         <div class="bg-[var(--color-secondary)] p-4">
-          <ThemeSwitcher />
-          <p class="mt-2 text-sm text-[var(--color-text-muted)]">
-            Choose your preferred theme. Your selection will be remembered when you return.
-          </p>
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="font-medium text-[var(--color-text)]">Dark mode</p>
+              <p class="text-sm text-[var(--color-text-muted)]">
+                Switch between light and dark theme
+              </p>
+            </div>
+
+            <div class="w-11 flex-shrink-0">
+              <button
+                type="button"
+                role="switch"
+                aria-checked={preferences.theme === 'dark'}
+                class="relative inline-flex h-6 w-11 cursor-pointer items-center rounded focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2 focus:outline-none"
+                on:click={toggleTheme}
+                disabled={saving}
+              >
+                <span class="sr-only">Toggle dark mode</span>
+                <span
+                  class="absolute h-full w-full rounded transition-colors duration-200 {preferences.theme === 'dark' ? 'bg-[var(--color-accent)]' : 'bg-[var(--color-text-muted)]'} {saving ? 'opacity-50' : ''}"
+                ></span>
+                <span
+                  class="absolute top-0.5 left-0.5 h-5 w-5 transform rounded bg-white transition-transform duration-200 {preferences.theme === 'dark' ? 'translate-x-5' : ''} {saving ? 'opacity-50' : ''}"
+                ></span>
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     {/if}

From 64cf7d1482a058a290f8adda056c408abfd2ceec Mon Sep 17 00:00:00 2001
From: Cameron Custer <custer.cameron@gmail.com>
Date: Sat, 19 Apr 2025 16:24:59 -0700
Subject: [PATCH 7/7] fix bugs

---
 src/app.css                              | 11 ++++++++++
 src/app.html                             | 26 ++++++++++++++++++++----
 src/lib/services/theme.ts                |  7 +++++++
 src/lib/theme-options/retro-blue-dark.js |  6 +++---
 src/routes/settings/+page.svelte         | 14 ++++++++++---
 5 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/src/app.css b/src/app.css
index 78e5aa8..54ff7d0 100644
--- a/src/app.css
+++ b/src/app.css
@@ -314,3 +314,14 @@ img {
   width: 100%;
   margin: 0 auto;
 }
+
+/* Dark theme specific overrides */
+body.dark-theme .text-red-500,
+body.dark-theme .text-red-600,
+body.dark-theme .text-red-700 {
+  color: rgb(252, 165, 165) !important; /* lighter red for dark theme */
+}
+
+body.dark-theme .text-[var(--color-accent)] {
+  color: rgb(252, 165, 165) !important; /* lighter red for dark theme */
+}
diff --git a/src/app.html b/src/app.html
index 2900f83..c7852f5 100644
--- a/src/app.html
+++ b/src/app.html
@@ -26,26 +26,44 @@
         background-color: var(--color-primary);
         color: var(--color-text);
         font-family: 'Courier New', Courier, monospace;
-        transition: background-color 0.3s ease, color 0.3s ease;
+        transition:
+          background-color 0.3s ease,
+          color 0.3s ease;
       }
     </style>
 
     <!-- Script to apply theme from localStorage immediately -->
     <script>
-      (function() {
+      (function () {
         try {
           const storedTheme = localStorage.getItem('gitgud-theme');
           if (storedTheme === 'dark') {
+            // Add dark theme class to body
+            document.body.classList.add('dark-theme');
+            document.body.classList.remove('light-theme');
+
             // Apply dark theme immediately
             document.documentElement.style.setProperty('--color-primary', 'oklch(0.2 0.05 240)');
             document.documentElement.style.setProperty('--color-secondary', 'oklch(0.25 0.04 240)');
             document.documentElement.style.setProperty('--color-tertiary', 'oklch(0.15 0.06 240)');
             document.documentElement.style.setProperty('--color-heading', 'oklch(0.9 0 0 / 0.9)');
             document.documentElement.style.setProperty('--color-text', 'oklch(0.9 0 0 / 0.8)');
-            document.documentElement.style.setProperty('--color-text-muted', 'oklch(0.9 0 0 / 0.5)');
-            document.documentElement.style.setProperty('--color-background', 'oklch(0.2 0.05 240 / 0.7)');
+            document.documentElement.style.setProperty(
+              '--color-text-muted',
+              'oklch(0.9 0 0 / 0.5)'
+            );
+            document.documentElement.style.setProperty(
+              '--color-background',
+              'oklch(0.2 0.05 240 / 0.7)'
+            );
             document.documentElement.style.setProperty('--color-border', 'oklch(0.3 0.08 240)');
             document.documentElement.style.setProperty('--color-link-nav', 'oklch(0.9 0 0 / 0.9)');
+            document.documentElement.style.setProperty('--color-link', 'oklch(0.85 0.25 350)');
+            document.documentElement.style.setProperty('--color-link-subtle', 'oklch(0.8 0.2 350)');
+          } else {
+            // Add light theme class to body
+            document.body.classList.add('light-theme');
+            document.body.classList.remove('dark-theme');
           }
         } catch (e) {
           console.error('Error applying theme:', e);
diff --git a/src/lib/services/theme.ts b/src/lib/services/theme.ts
index 989aa49..c057121 100644
--- a/src/lib/services/theme.ts
+++ b/src/lib/services/theme.ts
@@ -18,6 +18,7 @@ export const currentTheme = writable<string>('light');
 export function applyTheme(theme: string): void {
   if (!browser) return;
 
+  // Update the store
   currentTheme.set(theme);
 
   // Apply the selected theme
@@ -26,10 +27,16 @@ export function applyTheme(theme: string): void {
   switch (theme) {
     case 'dark':
       themeColors = retroBlueDarkTheme.colors;
+      // Add a class to the body for easier CSS targeting
+      document.body.classList.add('dark-theme');
+      document.body.classList.remove('light-theme');
       break;
     case 'light':
     default:
       themeColors = retroBlueLightTheme.colors;
+      // Add a class to the body for easier CSS targeting
+      document.body.classList.add('light-theme');
+      document.body.classList.remove('dark-theme');
       break;
   }
 
diff --git a/src/lib/theme-options/retro-blue-dark.js b/src/lib/theme-options/retro-blue-dark.js
index 1d94813..c44889d 100644
--- a/src/lib/theme-options/retro-blue-dark.js
+++ b/src/lib/theme-options/retro-blue-dark.js
@@ -11,14 +11,14 @@ export const retroBlueDarkTheme = {
     --color-primary: oklch(0.2 0.05 240); /* Dark blue background */
     --color-secondary: oklch(0.25 0.04 240); /* Slightly lighter blue for cards */
     --color-tertiary: oklch(0.15 0.06 240); /* Darker blue for headers */
-    --color-accent: oklch(0.7 0.2 350); /* Pink accent - same as light theme */
+    --color-accent: oklch(0.8 0.25 350); /* Brighter pink accent for dark theme */
     --color-heading: oklch(0.9 0 0 / 0.9); /* Light text for headings */
     --color-text: oklch(0.9 0 0 / 0.8); /* Light text for body */
     --color-text-muted: oklch(0.9 0 0 / 0.5); /* Muted light text */
     --color-background: oklch(0.2 0.05 240 / 0.7); /* Transparent dark blue background */
     --color-border: oklch(0.3 0.08 240); /* Border color */
-    --color-link: oklch(0.7 0.2 350); /* Pink links */
-    --color-link-subtle: oklch(0.75 0.15 350); /* Subtle pink links */
+    --color-link: oklch(0.85 0.25 350); /* Brighter pink links for better visibility */
+    --color-link-subtle: oklch(0.8 0.2 350); /* Brighter subtle pink links */
     --color-link-nav: oklch(0.9 0 0 / 0.9); /* Light nav links */
     --color-username: oklch(0.6 0.25 30); /* Orange for usernames */
     --color-solved-row: color-mix(
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 66377c9..988cb51 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -95,11 +95,19 @@ function toggleHideFromLeaderboard(): void {
 
 // Toggle the theme setting
 function toggleTheme(): void {
-  preferences.theme = preferences.theme === 'light' ? 'dark' : 'light';
+  // Toggle the theme
+  const newTheme = preferences.theme === 'light' ? 'dark' : 'light';
+  preferences.theme = newTheme;
+
   // Apply theme immediately for better UX
-  applyTheme(preferences.theme);
+  applyTheme(newTheme);
+
   // Save to localStorage for immediate persistence
-  localStorage.setItem('gitgud-theme', preferences.theme);
+  localStorage.setItem('gitgud-theme', newTheme);
+
+  // Force a re-render by creating a new object
+  preferences = { ...preferences };
+
   // Save to database
   savePreferences();
 }