Theming

---
// src/components/shared/ThemeSwitcher.astro:1-44
---

<button
  class='theme-toggle p-2 rounded-md flex items-center justify-center hover:bg-accent transition-colors relative'
  aria-label='Toggle theme'
>
  <!-- Sun icon (Light theme) -->
  <svg
    class='w-5 h-5 rotate-0 scale-100 transition-all dark:rotate-90 dark:scale-0 retro:rotate-90 retro:scale-0'
    fill='none'
    viewBox='0 0 24 24'
    stroke='currentColor'
  >
    <path
      stroke-linecap='round'
      stroke-linejoin='round'
      stroke-width='2'
      d='M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z'
    ></path>
  </svg>
  
  <!-- Moon icon (Dark theme) -->
  <svg
    class='absolute w-5 h-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 retro:rotate-90 retro:scale-0'
    fill='none'
    viewBox='0 0 24 24'
    stroke='currentColor'
  >
    <path
      stroke-linecap='round'
      stroke-linejoin='round'
      stroke-width='2'
      d='M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z'
    ></path>
  </svg>
  
  <!-- Retro icon (Retro theme) -->
  <svg
    class='absolute w-5 h-5 rotate-90 scale-0 transition-all retro:rotate-0 retro:scale-100'
    fill='none'
    viewBox='0 0 24 24'
    stroke='currentColor'
  >
    <path
      stroke-linecap='round'
      stroke-linejoin='round'
      stroke-width='2'
      d='M20 7h-3m-3 10a6 6 0 01-6-6V7a2 2 0 012-2h6a2 2 0 012 2v4a6 6 0 01-1 3.33m0 0A6 6 0 0120 11v2a2 2 0 01-2 2h-1'
    ></path>
  </svg>
</button>

<script>
  // Theme switching logic
</script>

// src/components/shared/ThemeSwitcher.astro:71-82
function initThemeToggle() {
  const themeToggles = document.querySelectorAll('.theme-toggle');
  themeToggles.forEach((toggle) => {
    toggle.addEventListener('click', cycleTheme);
  });
  setTheme(getTheme());
}

initThemeToggle();

// Re-initialize after Astro view transitions
document.addEventListener('astro:after-swap', initThemeToggle);

<!-- Element visible only in light theme -->
<div class='block dark:hidden retro:hidden'>
  Light theme content
</div>

<!-- Element visible only in dark theme -->
<div class='hidden dark:block retro:hidden'>
  Dark theme content
</div>

<!-- Element visible only in retro theme -->
<div class='hidden dark:hidden retro:block'>
  Retro theme content
</div>

<!-- Different colors per theme -->
<h1 class='text-gray-900 dark:text-gray-100 retro:text-amber-900'>
  Theme-aware heading
</h1>

<!-- Shows in light theme -->
<svg class='rotate-0 scale-100 dark:rotate-90 dark:scale-0 retro:rotate-90 retro:scale-0'>
  <!-- Sun icon -->
</svg>

<!-- Shows in dark theme -->
<svg class='rotate-90 scale-0 dark:rotate-0 dark:scale-100 retro:rotate-90 retro:scale-0'>
  <!-- Moon icon -->
</svg>

<!-- Shows in retro theme -->
<svg class='rotate-90 scale-0 retro:rotate-0 retro:scale-100'>
  <!-- Retro icon -->
</svg>

/* Global styles */
:root {
  --color-primary: #3b82f6;
  --color-background: #ffffff;
  --color-text: #1f2937;
}

.dark {
  --color-primary: #60a5fa;
  --color-background: #1f2937;
  --color-text: #f9fafb;
}

.retro {
  --color-primary: #d97706;
  --color-background: #fef3c7;
  --color-text: #78350f;
}

<div style="background-color: var(--color-background); color: var(--color-text);">
  Theme-aware content
</div>

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [
    function({ addVariant }) {
      addVariant('retro', '.retro &');
    }
  ],
};

---
// src/components/navs/Navbar.astro:110-113
import ThemeSwitcher from '@/components/shared/ThemeSwitcher.astro';
---

<nav>
  <!-- Navigation links -->
  
  <div class='flex items-center gap-2 border-l border-border pl-4'>
    <!-- <LanguageSwitcher /> -->
    <ThemeSwitcher />
  </div>
</nav>

// In ThemeSwitcher.astro
type Theme = 'light' | 'dark' | 'retro' | 'ocean';

const cycleTheme = () => {
  const themes: Theme[] = ['light', 'dark', 'retro', 'ocean'];
  const current = getTheme();
  const next = themes[(themes.indexOf(current) + 1) % themes.length];
  setTheme(next);
};

<!-- Ocean theme icon -->
<svg
  class='absolute w-5 h-5 rotate-90 scale-0 transition-all ocean:rotate-0 ocean:scale-100'
  fill='none'
  viewBox='0 0 24 24'
  stroke='currentColor'
>
  <!-- Ocean wave icon path -->
</svg>

// tailwind.config.js
plugins: [
  function({ addVariant }) {
    addVariant('retro', '.retro &');
    addVariant('ocean', '.ocean &'); // Add new variant
  }
],

.ocean {
  --color-primary: #0891b2;
  --color-background: #cffafe;
  --color-text: #164e63;
}

<div class='bg-white dark:bg-gray-900 retro:bg-amber-50 ocean:bg-cyan-50'>
  Multi-theme content
</div>

// Checks system preference if no saved theme
return window.matchMedia('(prefers-color-scheme: dark)').matches
  ? 'dark'
  : 'light';

<script is:inline>
  (function() {
    const theme = localStorage.getItem('theme') 
      || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    document.documentElement.classList.add(theme);
  })();
</script>

---
const heroImages = {
  light: '/images/hero-light.jpg',
  dark: '/images/hero-dark.jpg',
  retro: '/images/hero-retro.jpg',
};
---

<picture>
  <source srcset={heroImages.dark} media="(prefers-color-scheme: dark)">
  <img src={heroImages.light} alt="Hero" />
</picture>

<div class='hero-image light-hero dark:hidden retro:hidden'></div>
<div class='hero-image dark-hero hidden dark:block retro:hidden'></div>
<div class='hero-image retro-hero hidden retro:block'></div>

<button
  class='theme-toggle'
  aria-label='Toggle theme'
  title='Switch between light, dark, and retro themes'
>
  <!-- Icons with proper transitions -->
</button>

@media (prefers-reduced-motion: reduce) {
  .theme-toggle svg {
    transition: none;
  }
}