Trying to detect what is the users system preference

[AdamBD]

I am using the following line to set the users color mode preference:
this.$nuxt.$colorMode.preference = this.checked ? "dark" : "light";

As I understand it this should set the default preference of the user. When requesting the preference of the user I am then getting this.$nuxt.$colorMode.preference = 'system'

I assume that here system is representing that this module will check for the stored cookie on the users browser and take the literal string value from there.

When trying to check what that value is I am still getting system (However when printing the entire ColorMode object I am actually getting 'dark'.

What is the correct way to understand what is the VALUE of the system preference?

[nklsw]

I encounter the same issue (using v3.0.1). Any updates?

[FayKn]

Yes, preference is just what the user set as what they prefer (handy for a mode switcher).

colormode value = the device's preference if colormode preference = system

[greetfish]

mounted() {
    setTimeout(() => {
      console.log(this.$colorMode.value);
    }, 200);
    console.log(this.$colorMode);
  }

i get the right result: light must ensure it run on client side

and you can get preference by media query : console.log('is dark ?:' + window.matchMedia('(prefers-color-scheme: dark)').matches);