다크모드 라이트 모드추가

src/App.vue

@@ -6,6 +6,37 @@
     </normal-layout>
 </template>
 <script setup>
+import { onMounted } from 'vue';
 import NormalLayout from './layouts/NormalLayout.vue';
+
+onMounted(() => {
+    const storedStyle = localStorage.getItem('templateCustomizer-vertical-menu-template--Style');
+
+    function switchToDarkMode() {
+        // 다크 모드로 전환
+        document.documentElement.classList.add('dark-style');
+        document.documentElement.classList.remove('light-style');
+        document.querySelector('.template-customizer-core-css').setAttribute('href', '/vendor/css/rtl/core-dark.css');
+        document.querySelector('.template-customizer-theme-css').setAttribute('href', '/vendor/css/rtl/theme-default-dark.css');
+        localStorage.setItem('templateCustomizer-vertical-menu-template--Style', 'dark'); // 다크 모드로 설정
+    }
+
+    function switchToLightMode() {
+        // 라이트 모드로 전환
+
+        document.querySelector('.template-customizer-core-css').setAttribute('href', '/vendor/css/rtl/core.css');
+        document.querySelector('.template-customizer-theme-css').setAttribute('href', '/vendor/css/rtl/theme-default.css');
+        document.documentElement.classList.remove('dark-style');
+        document.documentElement.classList.add('light-style');
+        localStorage.setItem('templateCustomizer-vertical-menu-template--Style', 'light'); // 라이트 모드로 설정
+    }
+
+    if (storedStyle === 'dark') {
+        switchToDarkMode();
+    } else {
+        switchToLightMode(); // 기본 라이트 모드로 설정
+    }
+});
 </script>
-<style></style>
+<style>
+</style>

src/components/calendar/SampleCalendar.vue

@@ -17,10 +17,13 @@
                     <div class="px-6 pb-2">
                         <div>
                             <h5>Event</h5>
+
                         </div>
                     </div>
                 </div>
 
+
+
                 <div class="col app-calendar-content">
                     <div class="card shadow-none border-0">
                         <div class="card-body pb-0">