CODEWITHSUNDEEP
laravelvue.js
Jim E Russel
Jim E Russel

Reputation: 495

Modifying vuetify theme with laravel

I'm having trouble with updating the color of my vuetify theme. I tried this method but it is not updating my button color.

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>

Upvotes: 0

Views: 1335

Answers (2)

Jesper
Jesper

Reputation: 3834

That's because you have to change the light theme, which I assume you're using since you haven't put dark to true.

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

Upvotes: 0

Anis
Anis

Reputation: 1220

You should use v-app vuetify tag like

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>

Upvotes: 1

Related Questions