feat: site-wide dark mode (Tailwind class strategy); ThemeToggle island in header; persist preference; adjust brand-surface for dark

src/layouts/BaseLayout.astro

@@ -2,6 +2,7 @@
 // src/layouts/BaseLayout.astro
 import '../styles/global.css';
 import '../styles/main.css';
+import ThemeToggle from '../components/ThemeToggle.jsx';
 
 export interface Props {
   title?: string;
@@ -55,8 +56,11 @@ const { title = "Omoluabi Association Netherlands", description = "Preserving Ni
             <a href="/contact" class="text-gray-700 hover:text-nigerian-green-600 transition-colors">Contact</a>
           </div>
 
-          <!-- CTA Buttons -->
+          <!-- Right side controls -->
           <div class="hidden md:flex items-center space-x-4">
+            <astro-island>
+              <ThemeToggle client:load />
+            </astro-island>
             <a href="/donate" class="btn bg-gradient-to-r from-ankara-red-500 to-kente-gold-500 text-white hover:shadow-lg">
               ❤️ Donate
             </a>