theme-toggle.js

const themeLinks = document.querySelectorAll('.theme-toggle-dropdown-content a');
const themeToggleDiv = document.querySelector('.theme-toggle');
const themeDropdown = document.querySelector('.theme-toggle-dropdown');
const themeIcon = document.getElementById('theme-icon'); // Dropdown button icon

// Listen for clicks on the theme change options
themeLinks.forEach(link => {
  link.addEventListener('click', (event) => {
    // Prevent the link from navigating
    event.preventDefault();

    const selectedTheme = link.getAttribute('data-theme'); // Get the data-theme attribute from the clicked <a>
    if (selectedTheme) {
      applyTheme(selectedTheme); // Apply the selected theme
      localStorage.setItem('theme', selectedTheme); // Store it in localStorage
    }
  });
});

// Toggle dropdown visibility when the button is clicked
themeDropdown.addEventListener('click', (event) => {
  event.stopPropagation(); // Prevent the click event from propagating
  themeDropdown.classList.toggle('open'); // Toggle dropdown visibility
});

// Close the dropdown if clicked outside of it
document.addEventListener('click', (event) => {
  if (!themeDropdown.contains(event.target)) {
    themeDropdown.classList.remove('open');
  }
});

function applyTheme(theme) {
  // Update the theme and button icon based on selection
  if (theme === 'auto') {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
    themeIcon.className = 'fa-solid fa-circle-half-stroke'; // Change icon for auto
  } else if (theme === 'light') {
    document.documentElement.setAttribute('data-theme', 'light');
    themeIcon.className = 'fa-solid fa-sun'; // Change icon for light
  } else if (theme === 'dark') {
    document.documentElement.setAttribute('data-theme', 'dark');
    themeIcon.className = 'fa-solid fa-moon'; // Change icon for dark
  }
}

// Apply saved theme on page load
const savedTheme = localStorage.getItem('theme') || 'auto';
applyTheme(savedTheme);

// Scroll Hide Logic - Hide button when scrolling
window.addEventListener('scroll', () => {
  if (window.scrollY > 0) {
    themeToggleDiv.classList.add('hidden'); // Hide the toggle button when scrolling
  } else {
    themeToggleDiv.classList.remove('hidden'); // Show the button when at the top
  }
});