Question

我在更新vuetify主题的颜色时遇到麻烦。我尝试了这种方法，但它没有更新按钮的颜色。

App.js

require('./bootstrap');

window.Vue = require('vue');

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify, {
    theme: {
    primary: '#ff0000',
    secondary: '#ff0000',
    accent: '#ff0000',
    error: '#ff0000'
 }
 });

// components here

const app = new Vue({
    el: '#app',
    vuetify: new Vuetify()
});

Component.vue

<template v-slot:activator="{ on }">
  <v-btn color="primary" dark class="mb-2" v-on="on">Add Department</v-btn>
</template>

Main.blade.php

    <div id="content-wrapper" class="d-flex flex-column">
      <div id="content" class="bg-white" style="background-color:white!important;">
        @include('layouts.topbar')

        <div class="container-fluid">
          <v-app id="app">
          @yield('content') //This is where my components are located
          </v-app>
        </div>
      </div>
        @yield('DashboardView-main-footer')
    </div>

Answer 1

您应该使用v-app这样的vuetify标记

Component.vue

<template v-slot:activator="{ on }">
  <v-app>
    <v-btn color="primary" dark class="mb-2" v-on="on">Add Department</v-btn>
  </v-app>
</template>

Answer 2

那是因为您必须更改浅色主题，因为您没有将黑暗变为真实，所以我认为您正在使用该主题。

Vue.use(Vuetify, {
   theme: {
     themes: {
       light: {
         primary: '#ff0000',
         secondary: '#ff0000',
         accent: '#ff0000',
         error: '#ff0000' 
       } 
     } 
   }
});

使用Laravel修改vuetify主题

2 个答案: