Skip to content

Instantly share code, notes, and snippets.

@hkamran80
Last active November 11, 2021 23:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hkamran80/9bba61e1d2f0c2cfae8209e7d8dca4f1 to your computer and use it in GitHub Desktop.
Save hkamran80/9bba61e1d2f0c2cfae8209e7d8dca4f1 to your computer and use it in GitHub Desktop.
In combination with my revised article on Vuetify's dark mode state
<template>
<v-btn icon @click="toggleDarkMode">
<v-icon>mdi-theme-light-dark</v-icon>
</v-btn>
</template>
<script>
export default {
name: "Example",
methods: {
toggleDarkMode: function() {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
localStorage.setItem("darkTheme", this.$vuetify.theme.dark.toString());
}
},
mounted() {
const theme = localStorage.getItem("darkTheme");
if (theme) {
if (theme === "true") {
this.$vuetify.theme.dark = true;
} else {
this.$vuetify.theme.dark = false;
}
} else if (
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches
) {
this.$vuetify.theme.dark = true;
localStorage.setItem(
"darkTheme",
this.$vuetify.theme.dark.toString()
);
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment