designdefault.vue 628 B

123456789101112131415161718192021222324252627
  1. <template>
  2. <v-app class="mode-wrap" :class="[isDarkmode ? 'darkmode' : '']">
  3. <div class="container">
  4. <headerLayout @click:mode-chg="mode"></headerLayout>
  5. <div class="content">
  6. <NuxtPage />
  7. </div>
  8. <footerLayout></footerLayout>
  9. </div>
  10. </v-app>
  11. </template>
  12. <script setup>
  13. let isDarkmode = ref(false)
  14. const mode = (e) => {
  15. isDarkmode = !(e.value);
  16. if(isDarkmode){
  17. document.querySelector(".mode-wrap").classList.add("darkmode");
  18. }else{
  19. document.querySelector(".mode-wrap").classList.remove("darkmode");
  20. }
  21. }
  22. </script>
  23. <style lang="scss" scoped>
  24. </style>