Estoy usando Vuetify con el tema claro. Por defecto, este define el fondo del contenido principal a un gris claro. Necesito que sea de color blanco.

Me gustaría reemplazar esta modificando el lápiz variables, pero me parece que no puede averiguar cuál es la variable establece el color de fondo.

He seguido todos los pasos en el docs, y puedo cambiar el tipo de letra en toda la aplicación mediante el ajuste de $body-font-family = 'Open Sans' en mi main.styl archivo (así que sé que tengo el webpack construir configurado correctamente)

He intentado $body-bg-light = '#fff' en mi main.styl, pero que no parece cambiar nada en absoluto. Si me puse $material-light.background = '#fff' me sale un error.

InformationsquelleAutor Cindy Conway | 2018-05-09

6 Comentarios

  1. 14

    Tiene el enfoque correcto. Sólo tiene que importar vuetify del archivo de tema primero para que la material-light variable se define:

    //main.styl
    
    @import '~vuetify/src/stylus/theme.styl'
    
    $material-light.background = #fff
    
    @import '~vuetify/src/stylus/main.styl'
    
  2. 3

    En el contenedor principal, la configuración de la clase de la luz por defecto el color gris como color de fondo es .application.theme--light (u oscuro, dependiendo de lo que estés usando).

    Dentro de vuetify, este color está configurado en src/stylus/settings/_theme.styl :

    $material-light := {
      status-bar: {
        regular: #E0E0E0,
        lights-out: rgba(#fff, .7)
      },
      app-bar: #F5F5F5,
      background: #FAFAFA, //here
      cards: #FFFFFF,
    

    Por desgracia, yo no encuentro ninguna manera fácil de cambiar el color de fondo de concreto (ya que el color se define directamente), así que terminó anulando toda material-light propiedad.e copiar-pegar el código por defecto y configurar el color de fondo que yo quería.

    • Yo hice lo mismo. Déjeme saber si usted encuentra una manera para sobrescribir sólo un único atributo .
    • ¿De dónde colocar el anular? Si lo pongo antes de que el lápiz de importación tengo errores y si la pongo después de la importación, la anulación no funciona. Gracias
    • Y cómo se podría hacer cuando se trabaja con un a-la-carta componentes? Se puede importar directamente sus estilos de la temática definida en la biblioteca…
  3. 3

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

    Vuetifty Tema De Referencia

    Seguimiento a la documentación como de costumbre con la configuración personalizada de los temas, excepto agregar otra variable (de 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 aún no hemos terminado! El background variable no se corte. Necesitamos rig v-app para alternar la luz/oscuridad de los orígenes.

    <template>
      <v-app id="main" :style="{background: $vuetify.theme.themes[theme].background}">
        <v-content>
            Stuff :)
        </v-content>
      </v-app>
    </template>
    
    <script>
    export default {
      name: 'App',
      computed:{
        theme(){
          return (this.$vuetify.theme.dark) ? 'dark' : 'light'
        }
      }
    };
    </script>
    
  4. 2

    Directa de la inyección de código css, que puede ser resuelto. Inspeccionar el código en el buscador y encuentre fuera de la clase o nombre de identificación. Vaya a su componente, en la sección estilo de escribir el código como por ejemplo: he inspeccionado el código y averiguar el nombre de la clase, el nombre de la clase es».v-picker_body’ dentro de la clase hay un div. necesito cambiar el div del color de fondo. Así que aquí está-

    <style>
     .v-picker__body > div{
        background-color: #F44336;
     }
    </style>
    
  5. 1

    Cambiar el color de fondo simplemente…

    <v-app class="white">
    

    para el color del texto

    <v-app class="grey--text text--darken-2">
    
  6. 0

    Echar un vistazo a Vuetify Temas, donde se podría hacer algo como:

    <v-app dark>
    ...
    </v-app>

    Para aplicar un tema oscuro, por ejemplo. Esta es la manera preferida también modifica todos los «colores estándar» que van con vuetify (tales como peligro, primaria, etc.).

    Si usted necesita para ser rápido y sucio, usted también puede aplicar classes o styles a la <v-app>:

    <v-app style="
      background: #3A1C71;
      background: -webkit-linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71);
      background: linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71);
    ">

    Que puede ser utilizado en conjunción con el tema oscuro (fuente).

Dejar respuesta

Please enter your comment!
Please enter your name here