Vuetify support about color-mode HOT 13 CLOSED

Thanks for the feedback, using a watcher is a great idea but on my side I want to load it the earliest time possible. One solution is the plugin directory but since vuetify is a nuxt module i don't think we can access it from there
@suppeep it could fix your white screen flash this way

from color-mode.

I used this method:

watch: {
    '$colorMode.value': function () {
      this.$vuetify.theme.dark = this.$colorMode.value === 'dark'
    },
  },

from color-mode.

@GautierDele @radudiaconu0 @suppeep

What are you guys missing with what already provide Vuetify ?

See : https://vuetifyjs.com/en/customization/theme

Vuetify provides dark mode & theme feature which can be changed at runtime :

Dark/Light mode

this.$vuetify.theme.dark = true // Set dark mode
this.$vuetify.theme.dark = false // Set light mode
this.$vuetify.theme.dark = !this.$vuetify.theme.dark // Toggle mode

Theming

this.$vuetify.theme.themes.dark.primary = true // Change primary color of dark theme
this.$vuetify.theme.themes.light.primary = true // Change primary color of light theme

Still, it's your job storing in a cookie the user preference.

from color-mode.

@GautierDele I also had my problems with the vuetify darkmode. But since a few weeks I am good with it. My only problem is that if the darkmode is on and I reload the page I still see a white screen at the beginning, maybe because it doesnt work correctly on ssr

from color-mode.

If you use vuetify and color mode as modules you can create a plugin to avoid flickering.

export default ({ $vuetify, $colorMode }) => {
  $vuetify.theme.dark = $colorMode.preference === 'dark';
};

from color-mode.

@nasermirzaei89 It doesn't work on the server that way, tho...

from color-mode.

i want this too but it seems no one answered your issue =(

from color-mode.

@kevinmarrec yes thanks i know the vuetify documentation
The user preference is already stored in the cookies as you can read in the README

The only examples we have are not progammatically as the code you gave.

I thought that it would be interesting to provide a much easier way to make it accessible.
Actually i'm doing this without this extension in the store and I don't like the idea. I would prefer going with a file in the plugins directory but vuetify is not accessible from their if i'm right.
I might be missing something but I don't think it's actually possible

from color-mode.

You can use a watcher for $colorMode.value; it works fine on ssr on my setup.

from color-mode.

Just came back on this task.
You can create a plugin with:

export default ({ $vuetify }) => {
  // Your code
}

As simple as that

from color-mode.

If you use vuetify and color mode as modules you can create a plugin to avoid flickering.

export default ({ $vuetify, $colorMode }) => {
  $vuetify.theme.dark = $colorMode.preference === 'dark';
};

Use value instead of preference for "system" setting:

$vuetify.theme.dark = $colorMode.value === "dark";

from color-mode.

I used the following, so when prefrence is system, check the value.
Else maybe the user has already altered his preference and it could be something else.

export default ({ $vuetify, $colorMode }) => {
  if ($colorMode.preference === 'system') {
    $vuetify.theme.dark = $colorMode.value === 'dark'
  } else {
    $vuetify.theme.dark = $colorMode.preference === 'dark'
  }
}

Then I have this toggle to switch mode:

<v-switch
        v-model="$vuetify.theme.dark"
        prepend-icon="mdi-weather-sunny"
        append-icon="mdi-weather-night"
        hide-details
      />

And watch that so that when it changes, I also change the preference of the colormode:

watch: {
    '$vuetify.theme.dark' () {
      this.$colorMode.preference = this.$vuetify.theme.dark ? 'dark' : 'light'
    }
  }

from color-mode.

If you use vuetify and color mode as modules you can create a plugin to avoid flickering.

export default ({ $vuetify, $colorMode }) => {
  $vuetify.theme.dark = $colorMode.preference === 'dark';
};

Can you more details show

from color-mode.