<div class="mood-changer-app" id="moodChanger">
  <div class="app-header">
    <h2 class="app-title">Mood Changer App</h2>
  </div>
  
  <div class="app-body">
    
    <div class="app-controls">
      <button class="theme-btn" data-theme="cyberpunk">Cyberpunk</button>
      <button class="theme-btn" data-theme="pastel">Pastel</button>
      <button class="theme-btn" data-theme="forest">Forest</button>
      <button class="theme-btn" data-theme="ocean">Ocean</button>
      <button class="theme-btn" data-theme="sunset">Sunset</button>
    </div>
    
    
    <div class="sample-content">
      <h3 class="content-header">Welcome to your space!</h3>
      <p>This is where you can see your theme in action.</p>
    </div>
  </div>
</div>

/* Theme Variables in CSS */
:root {
  /* Default theme variables */
  --theme-bg: #05080f;
  --theme-text: white;
  --theme-primary: #18e6ff;
  --theme-secondary: #b266ff;
  --theme-accent: #ff71ce;
  --theme-border: rgba(24, 230, 255, 0.3);
}

/* Cyberpunk theme */
.theme-cyberpunk {
  --theme-bg: #05080f;
  --theme-text: white;
  --theme-primary: #18e6ff;
  --theme-secondary: #b266ff;
  --theme-accent: #ff71ce;
  --theme-border: rgba(24, 230, 255, 0.3);
}

/* Pastel theme */
.theme-pastel {
  --theme-bg: #f0f4f8;
  --theme-text: #5a5a5a;
  --theme-primary: #a5b4fc;
  --theme-secondary: #fda4af;
  --theme-accent: #c084fc;
  --theme-border: rgba(165, 180, 252, 0.3);
}

/* Additional themes defined similarly... */

/* Apply theme variables to elements */
.app-header {
  background-color: var(--theme-bg);
  color: var(--theme-text);
  border-bottom: 1px solid var(--theme-border);
  transition: all 0.3s ease;
}

.app-title {
  color: var(--theme-primary);
  transition: all 0.3s ease;
}

/* More styled elements using these variables... */

// JavaScript for theme switching
document.addEventListener('DOMContentLoaded', function() {
  // Get references to our elements
  const moodChanger = document.getElementById('moodChanger');
  const themeButtons = document.querySelectorAll('.theme-btn');
  
  // Add click event listeners to all theme buttons
  themeButtons.forEach(function(button) {
    button.addEventListener('click', function() {
      // Get the theme name from the button's data attribute
      const theme = this.getAttribute('data-theme');
      
      // Apply the theme by changing the class
      applyTheme(theme);
    });
  });
  
  // Function to apply a theme
  function applyTheme(theme) {
    // Remove all existing theme classes
    moodChanger.classList.remove('theme-cyberpunk', 'theme-pastel', 'theme-forest', 'theme-ocean', 'theme-sunset');
    
    // Add the selected theme class
    moodChanger.classList.add(`theme-${theme}`);
    
    // Save the user's preference (we'll implement this next)
    saveThemePreference(theme);
  }
});

// Save theme preference to localStorage
function saveThemePreference(theme) {
  // Store the theme name in localStorage
  localStorage.setItem('preferredTheme', theme);
}

// Load saved theme preference on page load
function loadSavedTheme() {
  // Try to get the saved theme from localStorage
  const savedTheme = localStorage.getItem('preferredTheme');
  
  // If a theme was saved, apply it
  if (savedTheme) {
    applyTheme(savedTheme);
    
    // Optional: Update UI to show the active theme
    const activeButton = document.querySelector(`.theme-btn[data-theme="${savedTheme}"]`);
    if (activeButton) {
      activeButton.classList.add('active');
    }
  }
}

// Call this function when the page loads
document.addEventListener('DOMContentLoaded', function() {
  // Set up event listeners like before...
  
  // Load the saved theme preference
  loadSavedTheme();
});

// Complete Mood Changer implementation with best practices
const MoodChanger = {
  // Store all our elements and state
  elements: {
    container: null,
    buttons: null
  },
  
  themes: ['cyberpunk', 'pastel', 'forest', 'ocean', 'sunset'],
  currentTheme: 'cyberpunk', // Default theme
  
  // Initialize the app
  init: function() {
    // Get DOM elements
    this.elements.container = document.getElementById('moodChanger');
    this.elements.buttons = document.querySelectorAll('.theme-btn');
    
    if (!this.elements.container) {
      console.error('Mood changer container not found!');
      return;
    }
    
    // Load saved theme first
    this.loadSavedTheme();
    
    // Set up event listeners
    this.bindEvents();
    
    console.log('Mood Changer initialized!');
  },
  
  // Set up all event listeners
  bindEvents: function() {
    const self = this; // Store reference to use in event callbacks
    
    this.elements.buttons.forEach(function(button) {
      button.addEventListener('click', function() {
        const theme = this.getAttribute('data-theme');
        self.applyTheme(theme);
      });
    });
  },
  
  // Apply a theme to the app
  applyTheme: function(theme) {
    // Validate the theme name
    if (!this.themes.includes(theme)) {
      console.error(`Unknown theme: ${theme}`);
      return;
    }
    
    // Remove all existing theme classes
    this.themes.forEach(themeName => {
      this.elements.container.classList.remove(`theme-${themeName}`);
    });
    
    // Add the new theme class
    this.elements.container.classList.add(`theme-${theme}`);
    this.currentTheme = theme;
    
    // Update active button state
    this.updateActiveButton();
    
    // Save to localStorage
    this.saveThemePreference();
    
    // Show feedback to the user
    console.log(`Theme changed to: ${theme}`);
  },
  
  // Update which button appears active
  updateActiveButton: function() {
    // Remove active class from all buttons
    this.elements.buttons.forEach(button => {
      button.classList.remove('active');
    });
    
    // Add active class to current theme's button
    const activeButton = document.querySelector(`.theme-btn[data-theme="${this.currentTheme}"]`);
    if (activeButton) {
      activeButton.classList.add('active');
    }
  },
  
  // Save current theme to localStorage
  saveThemePreference: function() {
    localStorage.setItem('preferredTheme', this.currentTheme);
  },
  
  // Load saved theme from localStorage
  loadSavedTheme: function() {
    const savedTheme = localStorage.getItem('preferredTheme');
    
    if (savedTheme && this.themes.includes(savedTheme)) {
      this.applyTheme(savedTheme);
    }
  }
};

// Initialize when the DOM is ready
document.addEventListener('DOMContentLoaded', function() {
  MoodChanger.init();
});