<template>
  <main>
    <div id="jonas-bros" @click="toggleMode"></div>
  </main>
</template>

<script setup>
// Imports
import { onMounted } from 'vue'
  
// Sound
let sound
  
// Toggle dark mode
function toggleMode() {
  // Play sound
  sound.play()
  
  // Get html tag
  let htmlTag = document.querySelector("html")
  
  // If dark
  if (htmlTag.classList.contains("dark")) {
    // Remove dark
    htmlTag.classList.remove("dark")
    
  } else {
    // Add dark
    htmlTag.classList.add("dark")
    
  }
  
}

// Initialize sound
function initializeSound() {
  // Sound
  sound = new Howl({
    src: ['https://assets.codepen.io/141041/switch.mp3']
  })  
  
}
  
// On mounted
onMounted(() => {
  // Initialize sound
  initializeSound()
  
})
</script>

<style>
  html, body, #app, main{
    height: 100%;
    width: 100%;
  }
  
  body{
    background-color: #FFF7E3;
  }
  
  main{
    align-items: center;
    display: flex;
    justify-content: center;
  }
  
  #jonas-bros{
    aspect-ratio: 1170/472;
    background-image: url(https://assets.codepen.io/141041/jonas-bros.png);
    background-size: cover;
    cursor: pointer;
    width: 50vw;
  }
  
  /* Manual Dark Mode */
  html.dark body{
    background-color: #1C1500;
  }
  
  html.dark #jonas-bros{
    animation: glow 0.1s ease-in-out infinite alternate;
    background-position: 0 100%;
    filter: drop-shadow(0 0 64px #FECA39);
  }
  
  /* System Dark Mode */
  @media (prefers-color-scheme: dark) {
    body{
      background-color: #1C1500;
    }
    
    #jonas-bros{
      animation: glow 0.1s ease-in-out infinite alternate;
      background-position: 0 100%;
      filter: drop-shadow(0 0 64px #FECA39);
    }
  }
  
  /* Sign Glow */
  @keyframes glow {
    from {
      opacity: 1;
    }
    to {
      opacity: 0.9;
    }
  }
</style>