I'm working with a Vue project, and I went through and implemented a Vuetify theme into it. Applying the color theme to vuetify elements works perfectly fine (ie. v-card, v-timeline, v-flex, etc). Is it possible to apply the color themes to certain elements that aren't part of the vuetify ecosystem?
Here's my theme code:
Vue.use(Vuetify, {
iconfont: 'fa',
theme: {
primary: '#730710',
secondary: '#0D0000',
accent: '#BEBABF',
error: '#BA1B1A',
success: '#468966',
warning: '#FFB03B'
}
})
My basic HTML:
<div class="box"></div>
Styling (I was hoping to let all the elements change together):
.box {
width: 100px;
height: 100px;
background-color: --my-theme--;
}
class="primary"
works on any element anyway. See top answer in the duplicate question for custom colors also. – Traxo Jun 29 at 17:48