influence/layouts/designdefault.vue

<template>
  <v-app class="mode-wrap" :class="[isDarkmode ? 'darkmode' : '']">
    <div class="container">
      <headerLayout @click:mode-chg="mode"></headerLayout>
      <div class="content">
        <NuxtPage />
      </div>
      <footerLayout></footerLayout>
    </div>
  </v-app>
</template>

<script setup>
  import headerLayout from '../components/design/header'
  import footerLayout from '../components/design/footer'
  let isDarkmode = ref(false)

  const mode = (e) => {
    isDarkmode = !(e.value);
    if(isDarkmode){
      document.querySelector(".mode-wrap").classList.add("darkmode");
    }else{
      document.querySelector(".mode-wrap").classList.remove("darkmode");
    }
  }
</script>

<style lang="scss" scoped>
</style>