How to set theme default to light?

[ganjarsetia]

I tried to change vuetify.ts to defaultTheme: 'light', it wont change to light by default. I need to click toggle dark button to make it light.

So how to set theme default to light?

Nice template btw 👍

[kingyue737]

Nice catch! defaultTheme in vuetify config will always be overridden by useDark which uses system preferred color mode by default (dark in your case). You can remove defaultTheme in vuetify.ts which does not take effect.

To set theme default to light on a system preferring dark, you can add following in AppBar.vue:

const isDark = useDark({
+ writeDefaults: true,
+ initialValue: 'light',
  onChanged(dark: boolean) {
    theme.global.name.value = dark ? 'dark' : 'light'
  },
})

[kingyue737]

Also, you may need to clear localStorage to make the change take effect as useDark caches the theme in localStorage.

[ganjarsetia]

Thanks for the reply 😄 I read the docs about useDark even the source! I don't see about initialValue, but you know it. You really smart & knowledgeable man!

My alternative solution is

// file: src/App.vue
import { THEME_KEY } from 'vue-echarts'
+ import { useColorMode } from '@vueuse/core'

const theme = useTheme()
+ const mode = useColorMode()
+ mode.value = 'light'

I never clear the localStorage, just reopen in Incognito mode.

I don't know which is better.

If you think this is a bug, should I create new issue?

Greetings from ID, South East Asia 😁

[kingyue737]

UseDarkOptions extends UseColorModeOptions which has initialValue

export interface UseDarkOptions
  extends Omit<UseColorModeOptions<BasicColorSchema>, "modes" | "onChanged"> {

Or you can trigger auto-complete in your IDE, TypeScript will tell you which options it has.

I think your solution is also good. I prefer setting initialValue, since mode.value = 'light' will force the site to be light on startup even if the user has already switched to dark once.