const toggleDarkModeButton = document.getElementById('toggleDarkMode');

toggleDarkModeButton.addEventListener('click', () => {
  const html = document.documentElement;
  html.classList.toggle('dark');

  // Save user preference to localStorage
  if (html.classList.contains('dark')) {
    localStorage.theme = 'dark';
  } else {
    localStorage.theme = 'light';
  }

  // Update data-theme attribute and button icon
  updateDataThemeAttribute();
  updateButtonIcon();
});

// Function to check system preference and set dark mode accordingly
function setDarkModePreference() {
  const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

  if (prefersDarkMode) {
    document.documentElement.classList.add('dark');
    localStorage.theme = 'dark';
  } else {
    document.documentElement.classList.remove('dark');
    localStorage.theme = 'light';
  }

  // Update data-theme attribute and button icon
  updateDataThemeAttribute();
  updateButtonIcon();
}

// Function to update the data-theme attribute
function updateDataThemeAttribute() {
  const currentTheme = localStorage.theme || 'system';
  document.documentElement.setAttribute('data-theme', currentTheme);
}

// Function to update the button icon based on the theme
function updateButtonIcon() {
  const buttonIcon = document.documentElement.classList.contains('dark') ? 'fas fa-moon' : 'fas fa-sun';
  toggleDarkModeButton.innerHTML = `<i class="${buttonIcon}"></i>`;
}

// Initialize dark mode preference, data-theme attribute, and button icon
setDarkModePreference();