<p>Maybe my problem is simple, but I couldn't find any solution until now. I'm using <strong>Vuetify</strong> in my Nuxt application. I used its dark theme. According to the theme configuration of the official website, we can change the <strong>primary</strong>, <strong>secondary</strong> or other colors of the theme with the color we want. However, when we set to a <strong>dark theme</strong>, the default text and background colors were set to white and black. I can't find any solution to change them. I know that we can set for example <code>class="primary"</code> for an element to change its background color. But I want to set a default color for text or background like this: </p> <p> <pre class="brush:css;toolbar:false;">body { color: var(--v-info-base); } /* or */ #app { color: var(--v-info-base); }</pre> </p> <p>The colors of my website are defined in my nuxt.config.js file, like this: </p> <p> <pre class="brush:js;toolbar:false;">vuetify: { customVariables: ['~/assets/variables.scss'], theme: { dark: true, options: { customProperties: true }, themes: { dark: { primary: { base: "#099b63", darken1: "#04c279" }, accent: "#250032", secondary: "#97812F", info: { base: "#1FFFF1", darken1: "#450b5a", darken2: "#1125c0", darken3: "#40bfa4" }, warning: colors.amber.base, error: colors.deepOrange.accent4, success: colors.green.accent3, anchor: "#1FFFF1" } }, } },</pre> </p> <p>But that doesn’t work for me! ! ! </p>

$material-dark: (
  'background': #464994,
  'text': (
     'theme': #944646,
   )
);