Vuetify: [Feature Request] Installing a light or dark theme from CSS

[cawa-93]

Problem to solve

Now the only way to indicate a light or dark theme is to transfer a special attribute when compiling the template. This makes it difficult to mimic the theme's settings from the user's system settings.

Even if at the stage of compilation of the template to determine the system configuration and set the appropriate attribute, when changing the system settings need to reload the page. The theme of a webpage can not be changed dynamically.

Proposed solution

Now the class is used like a theme--dark and a theme--light. I suggest adding another class theme--system. Here is an example:

.theme--dark {
  color: #fff
}

.theme--light {
  color: #000
}

.theme--system {
  @media (prefers-color-scheme: dark) {
    @extend .theme--dark
  }

  @media (prefers-color-scheme: light) {
    @extend .theme--light
  }
}

// I'm not familiar with the stylus. So please forgive if the syntax is not very correct. I just want to demonstrate the idea.

This way the theme will automatically follow the user's system settings and change without the need to reload the page.

Of course, this solution is not very well supported by browsers. However, I am sure that this will be improved in the future.

[KaelWD]

The theme of a webpage can not be changed dynamically

It can only be changed dynamically.

const mq = window.matchMedia('(prefers-color-scheme: dark)')

export const vuetify = new Vuetify({
  theme: { dark: mq.matches }
})

mq.addEventListener('change', (e) => {
  vuetify.framework.theme.dark = e.matches
})

[johnleider]

Thank you for the Feature Request and interest in improving Vuetify. After careful consideration the team has decided that this is not functionality that we are looking to implement at this time.

If you have any additional questions, please reach out to us in our Discord community.

[ThomasKientz]

@KaelWD

mq.addEventListener('change', (e) => {
  vuetify.theme.dark = e.matches
})

Doesn't work as vuetify.theme is not defined here. Have to call this.$vuetify.theme in components.. Any idea how to properly achieve this here ?

[jellehak]

vuetify.theme.dark => vuetify.framework.theme.dark

const mq = window.matchMedia('(prefers-color-scheme: dark)')

export const vuetify = new Vuetify({
  theme: { dark: mq.matches }
})

mq.addEventListener('change', (e) => {
  vuetify.framework.theme.dark = e.matches
})

[kemiljk]

vuetify.theme.dark => vuetify.framework.theme.dark

const mq = window.matchMedia('(prefers-color-scheme: dark)')

export const vuetify = new Vuetify({
  theme: { dark: mq.matches }
})

mq.addEventListener('change', (e) => {
  vuetify.framework.theme.dark = e.matches
})

This has saved me SO much pain. Thank you @jellehak!