How do I get rid of FOUC on page reload (Dark mode) | Nuxt | Page 1

floral mulch Jun 25, 2023, 6:15 PM

I have implemented a dark mode feature on a personal project I have been working on. I used js-cookie to set a cookie called darkModeEnabled to change the styling of the page. However, when I am dark mode and do a page refresh I get a little bit of FOUC. I have tried using the v-cloak directive but that was a no go. Below is the nuxt.congif.ts file I am working with:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true , extractCSS: true},
  css: ["~/assets/css/tailwind.css"],
  modules: ['@pinia/nuxt'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  app: {
    head: {
      title: 'My awesome websote title',
      htmlAttrs: { lang: 'en'},
      meta: [
        { name: 'description', content: 'My awesome website'}
      ],
      link: [
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined'},
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Rubik'}
      ],
      script: [{children: `
      import Cookies from './node_modules/js-cookie/dist/js.cookie.mjs'
      if (Cookies.get('darkModeEnabled') === 'true'){
        document.documentElement.classList.add('dark')

      } else {
        Cookies.remove('darkModeEnabled')
        document.documentElement.classList.remove('dark')

      }
      `, type:'module'},]
    }
  }
});

below is the tailwind.css file

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

html{
  background-color: #D8DEE9;
  tab-size: 4;
  scroll-behavior: smooth;
  font-family: Rubik;
  transition: 400ms;
  visibility: visible;
}

html.dark {
  background-color: #242933;
  tab-size: 4;
  scroll-behavior: smooth;
  font-family: Rubik;
  transition: 400ms;
  visibility: visible;
}

Ran out of characters. But, here is the default.vue layout I am working with as well
(script section)

<script setup>
    import Cookies from 'js-cookie'
    if (typeof document !== 'undefined'){
        if(Cookies.get('darkModeEnabled') === 'true'){
            document.documentElement.classList.add('dark')
        }else {
            document.documentElement.classList.remove('dark')            
        }
    }

    function toggleDarkMode(){
                if (Cookies.get('darkModeEnabled') === 'true'){
                    Cookies.remove('darkModeEnabled')
                    document.documentElement.classList.remove('dark')                    
                } else {
                    Cookies.set('darkModeEnabled', 'true', { expires: 7 })
                    document.documentElement.classList.add('dark')
                }
            }
</script>

I have also tried using the onMounted() vue life cycle hook to set the body styles but that did now work either. Am I just doing something drastically wrong here? I've been staring at it for a while and could use a second set of eye to glance it over (the more the merrier)

#How do I get rid of FOUC on page reload (Dark mode)