How to change background color of data tables in Vuetify?

Question

I want to change the background color of my data table as a whole. I don't want to use the dark themed or light themed. I can't seem to change it even when using !important or using available classes.

Answer 1

Just add the relevant color class e.g. class="primary" or the name of the color from the vuetify color pack.

<v-data-table class="elevation-1 primary"></v-data-table>

Answer 2

1. Add a custom class to v-data-table tag like this:

<v-data-table ... class="elevation-1 test" ...>

elevation-1 is their standard class name. I added test to illustrate the point.

2. Add necessary styling to .test .theme--light.v-table selector in your custom CSS.

E.g. .test .theme--light.v-table { background-color: #00f; }

You may need to replace the theme name in the CSS path with your theme name.

If you look inside the DOM, you'll notice that class name test was applied to a <div> container, not the <table> element.

A simple way to include your CSS is with <style> tag inside your App.vue file:

<style>
  @import './assets/styles/yourstyles.css';
</style>

How to include css files in Vue 2 has more on that.