Vuetify – Cómo configurar el color de fondo

Nuestro grupo redactor ha estado por horas buscando para darle solución a tu búsqueda, te regalamos la soluciones y deseamos resultarte de mucha ayuda.

Solución:

Con Vuetify 2.0, me gustaría proponer mi solución:

Referencia del tema Vuetifty

Siga la documentación como de costumbre con la configuración de temas personalizados, excepto agregar otra variable (fondo en mi caso).

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

import colors from 'vuetify/lib/util/colors'

const vuetify = new Vuetify(
  theme: 
    themes: 
      light: 
        primary: colors.purple,
        secondary: colors.grey.darken1,
        accent: colors.shades.black,
        error: colors.red.accent3,
        background: colors.indigo.lighten5, // Not automatically applied
        ...
      ,
      dark: 
        primary: colors.blue.lighten3, 
        background: colors.indigo.base, // If not using lighten/darken, use base to return hex
        ...
      ,
    ,
  ,
)

¡Pero no hemos terminado! los background la variable no lo corta. tenemos que armar v-app para alternar los fondos claros/oscuros.

Tienes el enfoque correcto. Solo necesita importar primero el archivo de tema de vuetify para que el material-light variable se define:

// main.styl

@import '~vuetify/src/stylus/theme.styl'

$material-light.background = #fff

@import '~vuetify/src/stylus/main.styl'

---

Actualización de Vuetify 2.0

Vuetify cambió a SASS en 2.0, por lo que la sintaxis es ligeramente diferente. Siga la guía para configurar sass-loader correctamente, luego agregue esto a su archivo variables.scss:

$material-light: (
  'background': #fff
);

El tema y las importaciones principales ya no son necesarios, y los mapas se fusionan con vuetify para que solo tenga que definir keys quieres cambiar

Para anular el color de fondo del tema oscuro

Personalmente, creo que esta es una forma muy limpia. Establezca su color de fondo en vuetify.js así:

export default new Vuetify(
  theme: 
    options: 
      customProperties: true,
    ,
    themes: 
      dark: 
        background: '#292930',
      ,
    ,
      dark: true,
  ,
);

Luego agregue esto a su archivo css (por ejemplo, “app.css”, en la raíz del proyecto):

.v-application 
    background-color: var(--v-background-base) !important;

Y en su App.Vue, simplemente importe el archivo css:

import styles from './app.css'

Recuerda mostrar este escrito si te ayudó.

---

---

Utiliza Nuestro Buscador