Vuetifyjs how to set custom RGBA color?

Question

As explained here vuetify colors can be customized as

Vue.use(Vuetify, {
  theme: {
    primary: '#3f51b5',
    secondary: '#b0bec5',
    accent: '#8c9eff',
    error: '#b71c1c'
  }
})

but how can I use a custom RGBA color?

Answer 1

Vuetify's creators have said there is not their priorities to implement this feature...

Answer 2

You can use Pseudo-class: ::after or ::before ,set background:var(--v-background-base); and opacity:0.4;.

for example:

  .liveServer__title {
    position: relative;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: var(--v-background-base);
      opacity: 0.4;
      z-index: -1;
    }
  }