Android Chrome showing $colorMode.value as system instead of the real value(light or dark) about color-mode HOT 6 CLOSED

I have tested it with several other android 10 phones. None of them has a problem. I think the problem I am facing only happens on a specific phone model. The test phone I am using is Nokia 7 plus.

from color-mode.

I'm having the same issue.

from color-mode.

Hi @wcsiu, hope you don't mind if I join in,
does it work fine on other platforms i.e. pc?
Do you have set the target option to "server" or "static"?
I have never used the "static" mode so maybe my knowledge is not complete but if you have "server", then aren't you getting an error i.e. "window is not defined"?

Hopefully, this might help you:

according to the official Nuxt's docs:

fetch is called on server-side when rendering the route, and on the client-side when navigating.

and according to the nuxt-color-module's docs

When $colorMode.preference is set to 'system', using $colorMode in your Vue template will lead to a flash. This is because we cannot know the user preferences when pre-rendering the page since they are detected on the client-side.

In fact, a had a very similar problem (I also have the ^2.0.3 version of the plugin) or rather a misunderstanding in the mounted hook of one of my components:

mounted() {
    console.log(this.$colorMode.preference) // logs system
    console.log(this.$colorMode.value) // logs system
  },

It puzzled me but then I read the caveats in the docs and added:

mounted() {
    console.log(this.$colorMode.preference) // logs system
    console.log(this.$colorMode.value) // logs system
    console.log(this.$colorMode.unknown) // logs true

    setTimeout(() => {
      console.log(this.$colorMode.preference) // logs system
      console.log(this.$colorMode.value) // logs light
      console.log(this.$colorMode.unknown) // logs false
    }, 2000)
  },

So I guess that's because of the flash mentioned in the docs, however, I don't know why it still happens in the mounted hook which is, as far as I know, called on the client-side???
Anyway, It does not make implementing dark mode impossible or harder, at least in my case - it's rather an innocent quirk. 🐛💡🍺

from color-mode.

@Matb85 Not at all! I need all the help I can get.

I just have just tried it again for Firefox on PC, it also prints system for this.$colorMode.value so I guess it may not be the root cause that I can't use color mode module on Android chrome.

The problem only happens on android chrome. There wouldn't be a problem if I switch to Firefox using the same android phone. It also works fine on PC. The target option is server. For fetch(), I don't have the undefined problem even when the page is rendered on the server side.

I am just wondering if there is anyone also not being able to use the module for android chrome.

from color-mode.

I have prepared another simpler example.

<template>
<ColorScheme placeholder="" tag="div">
<div>{{ $colorMode.value }}</div>
</ColorScheme>
</template>

For android chrome, it would be system. For others, it is either dark or light.

from color-mode.

Interesting, as for me, everything works fine
here is my component:

<template>
  <aside class="fixed right-4 bottom-4 z-50">
    <button
      id="color-mode-switch"
      class="w-14 h-14 bg-white rounded-full items-center overflow-hidden flex flex-nowrap"
      @click="switchColorMode"
    ></button>
    <div>{{ $colorMode.value }}</div>
  </aside>
</template>

<script lang="ts">
import Vue from "vue"
export default Vue.extend({
  methods: {
    switchColorMode() {
      if (this.$colorMode.unknown) return
      if (this.$colorMode.value === "light") this.$colorMode.value = "dark"
      else this.$colorMode.value = "light"
    },
  },
})
</script>

here is a screenshot with dark mode on (Android 10, Chrome 88.0.4324.181)

Nevertheless, I admit there is a lag/flash - it shows "system" until the page is fully loaded and then switches to the valid value, so maybe you just need to wait a bit longer.

from color-mode.