Add light mode with theme switcher

src/components/AnimatedStars.astro

@@ -69,11 +69,11 @@
     width: 100%;
     height: 100%;
     background-image:
-      radial-gradient(2px 2px at 20% 15%, rgba(255,255,255,0.8), transparent),
+      radial-gradient(2px 2px at 20% 15%, oklch(1 0 0 / 0.8), transparent),
       radial-gradient(1px 1px at 45% 35%, white, transparent),
-      radial-gradient(1px 1px at 65% 55%, rgba(255,255,255,0.7), transparent),
+      radial-gradient(1px 1px at 65% 55%, oklch(1 0 0 / 0.7), transparent),
       radial-gradient(2px 2px at 80% 25%, white, transparent),
-      radial-gradient(1px 1px at 35% 75%, rgba(255,255,255,0.9), transparent),
+      radial-gradient(1px 1px at 35% 75%, oklch(1 0 0 / 0.9), transparent),
       radial-gradient(1px 1px at 55% 45%, white, transparent);
     background-size:
       300px 300px,

src/components/Footer.astro

@@ -9,7 +9,7 @@ const gitVersion = __GIT_VERSION__;
 
 <footer>
   <div class="footer-flowers-bg" aria-hidden="true"></div>
-  <div class="text-white max-w-4xl lg:max-w-6xl mx-auto py-10 px-6 footer-inner">
+  <div class="text-[var(--color-text)] max-w-4xl lg:max-w-6xl mx-auto py-10 px-6 footer-inner">
     <div class="footer-top-row">
       <div>
         <p class="footer-title"><span class="footer-title-ep">#EP</span><span class="footer-title-year">2026</span></p>
@@ -51,24 +51,24 @@ const gitVersion = __GIT_VERSION__;
   </div>
 
   <div class="flex flex-wrap gap-2 justify-between">
-    <div class="w-full py-2 border-t border-b border-white/10">
+    <div class="w-full py-2 border-t border-b border-[var(--color-border)]">
       <div
         class="flex flex-col lg:flex-row self-center gap-2 lg:gap-12 justify-end"
       >
         <div
-          class="flex flex-col text-white/60 w-full lg:w-2/3 p-5 items-center text-center"
+          class="flex flex-col text-[var(--color-text-faint)] w-full lg:w-2/3 p-5 items-center text-center"
         >
           <p>
             Excited about our mission? Want to collaborate or contribute? Let's
             connect! We're open to partnership opportunities and would love to
             hear your ideas.
-            <a class="text-white/80 hover:text-white underline" href="mailto:helpdesk@europython.eu"
+            <a class="text-[var(--color-text-secondary)] hover:text-[var(--color-text)] underline" href="mailto:helpdesk@europython.eu"
               >helpdesk@europython.eu</a
             >
           </p>
         </div>
         <div
-          class="flex text-white/60 w-full lg:w-1/3 justify-center text-start mb-4 lg:mb-0"
+          class="flex text-[var(--color-text-faint)] w-full lg:w-1/3 justify-center text-start mb-4 lg:mb-0"
         >
           <div>
             <EPSLogo width="90" height="90" class="w-[90px] mr-4 h-auto" />
@@ -93,7 +93,7 @@ const gitVersion = __GIT_VERSION__;
           links.terms.map((item) => (
             <a
               href={item.path}
-              class="text-white/80 hover:text-primary-hover transition-colors duration-200 mx-2"
+              class="text-[var(--color-text-secondary)] hover:text-[var(--color-primary-hover)] transition-colors duration-200 mx-2"
             >
               {item.name}
               {item.path.startsWith("http") && (
@@ -116,7 +116,7 @@ const gitVersion = __GIT_VERSION__;
     </div>
   </div>
 
-  <p class="mb-16 text-white/80 text-center">
+  <p class="mb-16 text-[var(--color-text-secondary)] text-center">
     version: {gitVersion} @ {buildTimestamp}
   </p>
 </div>
@@ -126,7 +126,7 @@ const gitVersion = __GIT_VERSION__;
   footer {
     position: relative;
     overflow: hidden;
-    background: var(--color-footer-bg, #0a0003);
+    background: var(--color-footer-bg);
   }
 
   .footer-inner {
@@ -147,16 +147,16 @@ const gitVersion = __GIT_VERSION__;
   }
 
   .footer-title-ep {
-    color: #fff;
+    color: var(--color-text);
   }
 
   .footer-title-year {
-    color: var(--color-footer-red, #d4003a);
+    color: var(--color-footer-red);
   }
 
   .footer-subtitle {
     font-size: 1rem;
-    color: var(--color-footer-text-muted, rgba(255,255,255,0.70));
+    color: var(--color-footer-text-muted);
     margin-bottom: 3rem;
     letter-spacing: 0.1em;
   }
@@ -176,7 +176,7 @@ const gitVersion = __GIT_VERSION__;
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 1.5rem;
-    border-top: 3px solid var(--color-footer-gray, #222);
+    border-top: 3px solid var(--color-footer-gray);
     padding: 2rem 0;
     margin: 1rem 0;
   }
@@ -185,7 +185,7 @@ const gitVersion = __GIT_VERSION__;
     font-weight: 700;
     font-size: 1rem;
     text-transform: uppercase;
-    color: var(--color-footer-accent, #f0c040);
+    color: var(--color-text);
     margin-bottom: 1rem;
   }
 
@@ -200,12 +200,12 @@ const gitVersion = __GIT_VERSION__;
 
   .footer-links a {
     font-size: 1.1rem;
-    color: var(--color-footer-text-secondary, rgba(255,255,255,0.78));
+    color: var(--color-footer-text-secondary);
     text-decoration: none;
   }
 
   .footer-links a:hover {
-    color: #fff;
+    color: var(--color-text);
     text-decoration: underline;
   }
 

src/components/Header.astro

@@ -1,6 +1,7 @@
 ---
 import HeaderLogo from "@components/header/header-logo.astro";
 import Search from "@components/Search.astro";
+import ThemeToggle from "@components/ThemeToggle.astro";
 
 import links from "@data/links.json";
 
@@ -57,6 +58,7 @@ interface NavItem {
       )
     ))}
   </ul>
+  <ThemeToggle />
   <button class="nav-search-btn" id="nav-search-btn" aria-label="Search">
     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
       <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
@@ -78,13 +80,13 @@ nav {
   display: flex;
   align-items: center;
   gap: 0.25rem;
-  background: rgba(10,10,20,0.95);
+  background: oklch(0.155 0.034 281.7 / 0.95); /* #0a0a1a */
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px);
-  border-bottom: 1px solid rgba(255,255,255,0.08);
+  border-bottom: 1px solid var(--color-surface-medium);
   padding: 0.55rem calc((100% - 1200px) / 2);
   white-space: nowrap;
-  box-shadow: 0 2px 20px rgba(0,0,0,0.5);
+  box-shadow: 0 2px 20px oklch(0 0 0 / 0.05);
   transition: transform 0.3s ease-in-out;
   transform: translateY(0);
 }
@@ -111,7 +113,7 @@ nav {
   font-size: 0.9rem;
   text-transform: uppercase;
   letter-spacing: 0.07em;
-  color: rgba(255,255,255,0.93);
+  color: var(--color-text-primary);
   text-decoration: none;
   border-radius: 2px;
   transition: color 0.15s, background 0.15s;
@@ -120,8 +122,8 @@ nav {
 .nav-item > a:hover,
 .nav-item:hover > a,
 .nav-item > a:focus {
-  color: #ffffff;
-  background: rgba(255,255,255,0.10);
+  color: var(--color-text);
+  background: var(--color-border);
 }
 
 .nav-arrow {
@@ -155,11 +157,11 @@ nav {
 }
 
 .nav-dropdown-inner {
-  background: rgba(10,10,20,0.95);
-  border: 1px solid rgba(255,255,255,0.25);
+  background: oklch(0.155 0.034 281.7 / 0.95); /* #0a0a1a */
+  border: 1px solid var(--color-border-bright);
   border-radius: 2px;
   padding: 0.5rem;
-  box-shadow: 0 16px 48px rgba(0,0,0,0.75), 0 4px 12px rgba(0,0,0,0.4);
+  box-shadow: 0 16px 48px var(--color-scrim-15), 0 4px 12px var(--color-scrim-15);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
 }
@@ -176,7 +178,7 @@ nav {
   font-family: 'Roboto', sans-serif;
   font-weight: 600;
   font-size: 0.95rem;
-  color: rgba(255,255,255,0.93);
+  color: var(--color-text-primary);
   text-decoration: none;
   border-radius: 2px;
   letter-spacing: 0.02em;
@@ -185,8 +187,8 @@ nav {
   white-space: nowrap;
 }
 .nav-dropdown li a:hover {
-  color: #ffffff;
-  background: rgba(255,255,255,0.15);
+  color: var(--color-text);
+  background: var(--color-border-strong);
 }
 
 .nav-ext {
@@ -201,31 +203,31 @@ nav {
   display: flex;
   align-items: center;
   gap: 0.45rem;
-  background: rgba(255,255,255,0.08);
-  border: 1px solid rgba(255,255,255,0.15);
+  background: var(--color-surface-medium);
+  border: 1px solid var(--color-border-strong);
   border-radius: 4px;
   padding: 0.45rem 0.9rem;
   margin-left: auto;
   margin-right: 0.5rem;
   cursor: pointer;
-  color: rgba(255,255,255,0.78);
+  color: var(--color-text-secondary);
   font-family: 'Roboto', sans-serif;
   font-size: 1rem;
   transition: background 0.15s, color 0.15s;
   flex-shrink: 0;
 }
 
 .nav-search-btn:hover {
-  background: rgba(255,255,255,0.15);
-  color: #ffffff;
+  background: var(--color-border-strong);
+  color: var(--color-text);
 }
 
 .nav-cta {
   font-size: 0.88rem;
   letter-spacing: 0.07em;
   text-transform: uppercase;
-  color: #ffffff;
-  background: linear-gradient(to bottom, #d62020, #8a0020);
+  color: var(--color-white);
+  background: linear-gradient(to bottom, var(--color-cta-red), var(--color-cta-red-dark));
   border-radius: 2px;
   padding: 0.6rem 1.5rem;
   text-decoration: none;
@@ -263,7 +265,7 @@ nav {
     display: block;
     width: 24px;
     height: 2px;
-    background: rgba(255,255,255,0.93);
+    background: var(--color-text-primary);
     border-radius: 1px;
     transition: transform 0.2s, opacity 0.2s;
   }
@@ -277,7 +279,7 @@ nav {
     position: fixed;
     inset: 0;
     height: 100dvh;
-    background: rgba(10,10,20,0.95);
+    background: oklch(0.155 0.034 281.7 / 0.95); /* #0a0a1a */
     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(18px);
     flex-direction: column;
@@ -293,7 +295,7 @@ nav {
   .nav-item > a {
     font-size: 1.1rem;
     padding: 0.8rem 0;
-    border-bottom: 1px solid rgba(255,255,255,0.10);
+    border-bottom: 1px solid var(--color-border);
   }
 
   .nav-search-btn {
@@ -315,10 +317,10 @@ nav {
     font-size: 1.1rem;
     text-transform: uppercase;
     letter-spacing: 0.07em;
-    color: rgba(255,255,255,0.93);
+    color: var(--color-text-primary);
     background: none;
     border: none;
-    border-bottom: 1px solid rgba(255,255,255,0.10);
+    border-bottom: 1px solid var(--color-border);
     cursor: pointer;
     text-align: left;
   }
@@ -363,6 +365,50 @@ nav {
 .nav-hidden {
   transform: translateY(-100%);
 }
+
+:global(.light) nav {
+  background: oklch(1 0 0 / 0.95) !important;
+  border-bottom-color: oklch(0 0 0 / 0.1) !important;
+}
+
+:global(.light) nav a:not(.nav-cta),
+:global(.light) .nav-item > a,
+:global(.light) .nav-toggle span,
+:global(.light) .theme-toggle {
+  color: oklch(0.228 0.038 282.9) !important; /* #1a1a2e */
+}
+
+:global(.light) .nav-search-btn {
+  background: oklch(0 0 0 / 0.04) !important;
+  border-color: var(--color-scrim-15) !important;
+  color: var(--color-scrim-50) !important;
+}
+
+:global(.light) .nav-search-btn:hover {
+  color: oklch(0.228 0.038 282.9) !important; /* #1a1a2e */
+}
+
+:global(.light) a.nav-cta {
+  background: linear-gradient(to bottom, var(--color-cta-red), var(--color-cta-red-dark)) !important;
+  color: var(--color-white) !important;
+}
+
+:global(.light) .nav-dropdown-inner {
+  background: oklch(1 0 0 / 0.95) !important;
+  border-color: var(--color-scrim-15) !important;
+}
+
+:global(.light) .nav-dropdown li a {
+  color: oklch(0.228 0.038 282.9) !important; /* #1a1a2e */
+}
+
+:global(.light) .nav-dropdown li a:hover {
+  background: oklch(0 0 0 / 0.04) !important;
+}
+
+:global(.light) .nav-links {
+  background: oklch(1 0 0 / 0.95) !important;
+}
 </style>
 
 <script>

src/components/InstallPWA.astro

@@ -21,7 +21,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  background: #4caf50;
+  background: oklch(0.673 0.162 144.2); /* #4caf50 */
   color: white;
   text-align: center;
   padding: 1rem;

src/components/JobCard.astro

@@ -91,7 +91,7 @@ const { title, location, type, level, salary, description, responsibilities, min
     border: 1px solid transparent;
     text-decoration: none;
     transition: all 0.1s ease;
-    background: linear-gradient(to right, #16a34a, #22c55e);
+    background: linear-gradient(to right, oklch(0.627 0.17 149.2) /* #16a34a */, oklch(0.723 0.192 149.6) /* #22c55e */);
   }
 
   .apply-btn:hover {

src/components/NavItems.astro

@@ -21,7 +21,7 @@ const { items, inverted = false, level = 1 } = Astro.props;
   class={clsx(
     level === 1 && "ml-1 flex flex-col xl:flex-row",
     level === 2 && "mb-3 xl:bg-secondary xl:mt-2 xl:rounded-[30px] xl:min-w-[220px]",
-    level === 3 && "bg-[#1c294b] xl:rounded-[20px] xl:my-1 xl:mx-2 xl:min-w-[200px]",
+    level === 3 && "bg-[var(--color-nav-level)] xl:rounded-[20px] xl:my-1 xl:mx-2 xl:min-w-[200px]",
     level > 1 && "shadow-lg"
   )}
   role={level === 1 ? "menubar" : "menu"}
@@ -181,7 +181,7 @@ const { items, inverted = false, level = 1 } = Astro.props;
 
   /* Focus styles for keyboard navigation */
   [role="menuitem"]:focus-visible {
-    outline: 2px solid #3583E2;
+    outline: 2px solid oklch(0.61 0.163 255.4); /* #3583E2 */
     outline-offset: -2px;
     border-radius: 50%;
   }