// App.vue
<template>
  <router-view />
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  // ตรวจสอบธีมที่บันทึกไว้ใน localStorage (ถ้ามี) หรือใช้ 'light' เป็นค่าเริ่มต้น
  const savedTheme = localStorage.getItem('theme') || 'light';
  document.documentElement.setAttribute('data-theme', savedTheme);

  const themeController = document.querySelector('.theme-controller');
  if (themeController) {
    // ตั้งค่า toggle ให้ตรงกับธีมที่โหลดมา
    themeController.checked = (savedTheme === themeController.value);

    themeController.addEventListener('change', (e) => {
      const newTheme = e.target.checked ? e.target.value : 'light'; // ใช้ 'light' เป็น default เมื่อ toggle ปิด
      document.documentElement.setAttribute('data-theme', newTheme);
      localStorage.setItem('theme', newTheme); // บันทึกธีมลง localStorage
    });
  }
});
</script>

<style>
/* สไตล์ที่นี่จะเป็น Global CSS ที่มีผลต่อทั้งแอปพลิเคชัน
  ควรจะย้ายไปที่นี่ หรือใน src/assets/main.css
*/

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>