lib is ignoring initial "colorMode/preference" and switches to "system"

[piotrku]

Version

@nuxtjs/color-mode: 2.1.11 nuxt: 2.15.7

is there any reason for the lib to automatically switch always to 'system' preferences although non regarding the initial config in nuxt.config.js?

colorMode: {
    preference: 'light', // default value of $colorMode.preference
    fallback: 'light', // fallback value if not system preference found
    classSuffix: "", // removing -mode suffix for Tailwind Dark mode support
    hid: 'nuxt-color-mode-script',
    storageKey: 'nuxt-color-mode'
  },

I check this on main component mounted:

    console.log('value:', this.$colorMode.value);
    console.log('forced:', this.$colorMode.forced);
    console.log('preference:', this.$colorMode.preference);

    setTimeout(() => {
      console.log('value:', this.$colorMode.value);
      console.log('forced:', this.$colorMode.forced);
      console.log('preference:', this.$colorMode.preference);
    }, 10);

and the result is:

I expect it to stay in my initial 'light' mode - instead of switching to system's dark

[jillztom]

Is there any update on this?

[TJacoob]

I'm having the same issue using Nuxt3 and Tailwind.

[antfu]

Close as this has been stable for a long while. If you still face a similar issue with the latest module on Nuxt 3, open a new issue with minimal reproductions. Thanks.

[bayramorhan]

In your app.vue, add this code to force the color mode

<script setup>
const colorMode = useColorMode();

onMounted(async () => {
  await nextTick();
  colorMode.preference = "light";  // or dark
});
</script>