How to set the body class on page load?

Question

Vue.js

there is a default.vue template

how to check when loading the template, if it’s night then we put the body class, now everything works, but when you reload the page you can see how the white template changes to dark, but can you make it so that users do not see the change?

<template>
  <div id="app">
    <Header />
    <button @click.prevent="toggleTheme()">
      hjnkm
    </button>
    <main>
      <Nuxt />
    </main>
    <Footer />
    <HappyClientModal />
    <ProductPreviewModal />
  </div>
</template>
<script>
export default {
  data () {
    return {
      isDark: true,
      currentTime: new Date().getHours()
    }
  },
  created () {
    if (this.currentTime > 18 || this.currentTime < 6) {
      this.isDark = true
    }
  },
  beforeMount () {
    const bodyElement = document.body
    if (this.isDark) {
      bodyElement.classList.add('dark-theme')
    }
  }
}
</script>
<style lang="scss" module>
  main{
    padding-top: 90px;
  }
</style>>

Answer 1

Use preloader. Or set the theme with ssr, according to the server time.

Answer 2

google v-cloak