Vuetify conditional dark theme

vuetify theme generator
override vuetify styles
nuxt/vuetify theme
vuetify colors
vuetify css
vuetify-loader
vuetify presets
vuetify icons

I'm using Vuetify to create my social media website. The problem that I'm facing now is that I want to use dark attribute, so user can switch between normal and dark theme. The thing is that I can't use any of Vue's conditional rendering methods, as dark is not an attribute that you can bind. Below is the part of code that you use to apply dark theme:

<v-app dark>

Yes dark or light are not attributes, they are props which can take values, in this case true or false

You can find this in vuetify's documentations.

Props are the properties which are used for communication with child components. And are prefixed with : in order to distinguish it with normal properties.

Coming to the solution.

<v-app :dark="true"> 

or

<v-app :dark="false"> 

You can replace true or false with any reactive data options or computed properties to make the theme change programmatically.

Dark Theme Switch - Vuetify v. 1.5.x, Credit: https://codepen.io/ittus/pen/dedMRE Switch from light theme to dark theme in Vuetify Vuetify supports both light and dark variants of the Material Design spec. This designation starts at the root application component, v-app and is supported by majority of components. By default, your application will use the light theme, but this can be easily overwritten by adding the dark prop.


If a component is used as the App:

<template>
   <v-app :dark="isDark"></v-app>
</template>

<script>
   export default {
      data () {
         return {
            isDark: false,
         }
      },
   }
</script>

It can also be called from the app instance

thru its instantiated object defined property app.__vue__.isDark = isDark when being instantiated like :

const app = new Vue(
    {
        data: () => ({
            isDark: false
        }),
    }
)

So it can be called from other component

[Feature Request] Any way to get current theme (dark/light) in a , A HTML attribute directive which Vuetify will automatically add CSS classes such as .theme--dark to the HTML element, then user can decide  Problem to solve With the latest version of Vuetify there was an update to the dark theme to match MD2. Would it be possible to have theme: { dark: true } take a boolean for light or MD2 dark, or a string of "md1" | "md2" for the MD1 ver


As documentation says you can just update variable this.$vuetify.theme.dark:

You can manually turn dark on and off by changing this.$vuetify.theme.dark to true or false.

Theme, Vuetify supports both light and dark variants of the Material Design spec. This designation starts at the root application component, v-app and is supported by  According to the MD spec regarding dark themes, the default background color of the v-list element when used with the dark attribute should be #303030. If users want to keep the current behavior (i.e. lists appear lighter than the background), they should wrap their lists in a card.


Icon component, Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes. name. dense. Vuetify Material Dashboard PRO is a beautiful theme built over Vuetify, Vuex and Vuejs. Vuetify Material Dashboard PRO is the official Vuejs version of the Original Material Dashboard PRO.


Selection control components, Applies the dark theme variant to the component. This will default the components color to white unless you've configured your application theme to dark or if  Dark/light theme toggle switch How do I link a v-switch to a dark and light theme variant with Vuetify? I have a vuetify.options.js configured with dark theme in my Nuxt project


Badge component, Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes. name. dot. What problem does this feature solve? I want to use a different tone of color for dark and light theme in my theme-able application. But today, there&#39;s no way to set that. What is your proposed