web-dev-qa-db-fra.com

Vuetify - Comment définir la couleur de fond

J'utilise Vuetify avec le thème Light. Par défaut, l’arrière-plan du contenu principal est gris clair. J'ai besoin que ce soit blanc.

J'aimerais remplacer ceci en modifiant les variables du stylet, mais je n'arrive pas à comprendre quelle variable définit la couleur d'arrière-plan. 

J'ai suivi toutes les étapes dans docs , et je peux changer la police dans l'application en définissant $body-font-family = 'Open Sans' dans mon fichier main.styl (je sais donc que la version de Webpack est correctement configurée)

J'ai essayé $body-bg-light = '#fff' dans mon main.styl, mais cela ne semble rien changer du tout. Si je règle $material-light.background = '#fff' j'obtiens une erreur.

vue.jsvuetify.js
6
Cindy Conway

Vous avez la bonne approche. Il vous suffit d’importer d’abord le fichier de thème de vuetify pour que la variable material-light soit définie:

//main.styl

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

$material-light.background = #fff

@import '~vuetify/src/stylus/main.styl'
10
Ziemek Trzesicki

Sur le conteneur principal, la classe définissant la couleur gris clair par défaut comme couleur d'arrière-plan est .application.theme--light (ou sombre, selon ce que vous utilisez).

Dans Vuetify, cette couleur est définie dans src/stylus/settings/_theme.styl:

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

Malheureusement, je n’ai trouvé aucun moyen facile de remplacer la couleur d’arrière-plan de manière spécifique (car la couleur est définie directement). J’ai donc fini par surcharger la propriété material-light entière, par exemple en copiant-collant le code par défaut et en définissant la couleur d’arrière-plan que je voulais.

3
m4rtin

L'injection directe de code CSS, il peut être résolu. Inspectez le code sur votre navigateur et trouvez le nom de la classe ou de l'identifiant. Allez dans votre composant, dans la section style, écrivez votre code comme suit: J'ai inspecté le code et trouve le nom de la classe. Le nom de la classe est '.v-picker_body' dans la classe, il y a un div. J'ai besoin de changer la couleur de fond de la div. Alors voici ... 

<style>
 .v-picker__body > div{
    background-color: #F44336;
 }
</style>
2
Ziaur Rahman