Dark mode

[spencerwongfeilong]

In the latest release 2.4.1

There is issue with dark mode. The colours comprise of purple white and black.

When signing out and signing in, the issue resolved. However it will return after awhile. The correct colour should be purple and black.

[GOvEy1nw]

I can confirm this is happening for me too.

If the code is related/along the same path, it'd be great if this https://github.com/WongSaang/chatgpt-ui/issues/47 feature could be implemented when fixing the bug too, I'm not really a coder so don't know if that's easy or not, I just fumble through things lol.

[ghost]

I found that to put this block into layouts/default.vue

<script setup>
import { useTheme } from 'vuetify'
useColorMode().preference = "system"
useTheme().global.name.value = useColorMode().value
</script>

and change the function setTheme in components/NavigationDrawer.vue

import { useTheme } from 'vuetify'
...
const setTheme = (theme) => {
  colorMode.preference = theme
  useTheme().global.name.value = useColorMode().value
}

can solve the problem

[WongSaang]

@xesrc Thank you!

I wonder if the issue still exists in the latest version if the above code is not added. Under what circumstances does it occur?

[Jarvis73]

@xesrc Thank you!

I wonder if the issue still exists in the latest version if the above code is not added. Under what circumstances does it occur?

1. set to dark mode
2. directly refresh the browser page
3. this issue is occured

A possible official solution.

In layout/default.vue and layout/vuetifyApp.vue, use the ColorScheme to wrap the v-app. (See @Nuxtjs/color-mode -> Caveats)

Example for default.vue:

<template>
  <ColorScheme placeholder="..." tag="span">
    <v-app
        :theme="$colorMode.value"
    >
      <NavigationDrawer />
      <slot />
    </v-app>
  </ColorScheme>
</template>