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

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.

[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
})

[andrew-lyashenko]

@jellehak Thank you!!!

And if suddenly someone is looking for a solution for nuxt, then here it is:

// plugins/vuetify.ts

export default function ({ $vuetify }) {
  const mq = window.matchMedia('(prefers-color-scheme: dark)');
  $vuetify.theme.dark = mq.matches;

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

// nuxt.config.js

plugins: [
  { src: '~/plugins/vuetify.ts', ssr: false }
],