In my index.js file I have manually override the Vuetify theme object with my company's color:
Vue.use(Vuetify, {
theme: {
primary: '#377ef9',
secondary: '#1b3e70',
accent: '#ff643d',
error: '#ff643d'
...
}
Now, I can use these colors from my templates like so:
<my-text-field name="input text"
label="text"
value="text text text text..."
type="text"
color="primary">
</my-text-field>
What I'm after is using the primary or any other variable in the theme object defined above, inside my template style:
<script>
import { VTextField } from 'vuetify'
export default {
extends: VTextField
}
</script>
<style scoped lang="stylus">
label
color: <seconday color> <-- this is what I'm after
color: #1b3e70 <-- this works, but not quite good enough for me
</style>
I can easily just write the hex value of my colors in the style section, but I don't want to repeat myself, and would rather use my theme object so it will also be easier for my to easily change the colors everywhere, and avoid typos which will lead to mistakes in the colors definitions.
Edit (2018/10/11)
Since version 1.2. we can enable CSS variables
NOTE: allegedly it won't work in IE (Edge should work), and possibly some Safari versions?
From docs (see Custom Properties)
Enabling customProperties will also generate a css variable for each
theme color, which you can then use in your components'
blocks.
Vue.use(Vuetify, {
options: {
customProperties: true
}
})
<style scoped>
.something {
color: var(--v-primary-base)
background-color: var(--v-accent-lighten2)
}
</style>
For custom values e.g.
yourcustomvariablename: '#607D8B'
use --v-yourcustomvariablename-base (so base is default).
Original answer:
There is a Feature Request on github: Access theme colors in stylus files
#KaelWD (one of devs) wrote:
This is something you'll have to implement yourself. I've tried doing
something similar before but it doesn't really work on a framework
level.
Issue is labeled wontfix
Edit (2018/10/11)
Also see this updated thread:
https://github.com/vuetifyjs/vuetify/issues/827 (Feature request: Native css variables)
There is a way to go around this by utilizing :style attributes. It can be used to set custom CSS properties reactively.
Add a computed property:
computed: {
cssProps () {
return {
'--secondary-color': this.$vuetify.theme.secondary
}
}
Bind style to cssProps:
<div id="app" :style="cssProps">
Then, in your style:
<style scoped>
label
color: var(--secondary-color);
</style>
Adapted from this discussion: https://github.com/vuejs/vue/issues/7346
For anyone stumbling over this from Vuetify V2 onwards, you can do the following to get access to the SCSS colour variables.
// Import the Vuetify styles somewhere global
#import '~vuetify/src/styles/styles.sass';
// Now in your components you can access the colour variables using map-get
div {
background: map-get($grey, lighten-4);
}
All the colours can be found in /node_modules/vuetify/styles/settings/_colors.scss.
From above answers, if you want to include all vuetify colors, put this code in App.vue template
<v-app :style="cssProps">
App.vue script
computed: {
cssProps () {
var themeColors = {}
Object.keys(this.$vuetify.theme.themes.light).forEach((color) => {
themeColors[`--v-${color}`] = this.$vuetify.theme.themes.light[color]
})
return themeColors
}
}
Let say if you have this color in vuetify.js
export default new Vuetify({
treeShake: true,
theme: {
themes: {
light: {
darkRed: "#CD3300",
}
}
}
})
Then, in any component:
<style scoped>
.label {
color: var(--v-darkRed);
}
</style>
Maybe I am late the most efficient way to do is as mentioned in the docs https://vuetifyjs.com/en/features/theme/#custom-properties
I will provide a working example for the same.
you need only three changes to be done for this to get working.
Mention the option which does the magic and your theme color
export default new Vuetify({
theme: {
options: {
customProperties: true
},
themes: {
light: {
primary: "#3DCFD3",
secondary: "#171b34",
accent: "3D87E4"
}
}
}
});
Mention the class name in the tag where you want your theme to get applied
<h4 class="blue-header">Yash Oswal</h4>
CSS to apply your theme.
<style lang="scss">
.blue-header {
color: var(--v-primary-base);
}
</style>
For vutify 3+:
inside vuetify.js file declare theme color variable colors:{green:'#00ff00'}
// src/plugins/vuetify.js
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
export default createVuetify({
theme: {
defaultTheme: 'myCustomTheme',
themes: {
myCustomTheme: {
dark: false,
colors: {
..., // We have omitted the standard color properties here to emphasize the custom one that we've added
green: '#00ff00'
}
}
}
}
})
inside .vue component file use rgb(var(--v-theme-green)):
<template>
<div class="custom-class">background color with appropriate text color contrast</div>
</template>
<style>
.custom-class {
background: rgb(var(--v-theme-green))
}
</style>
Example of switching theme (helpfull link):
<v-app :dark="setTheme"
:style="{background: $vuetify.theme.themes[theme].background}"
>
JS:
computed: {
setTheme() {
this.$vuetify.theme.dark = this.goDark;
}
},
data() {
return {
goDark: false
}
}
Related
Considering my code:
<template>
<section
class="bg-gradient-to-br h-40"
:class="
'from-palettes-' +
palette +
'-primary to-palettes-' +
palette +
'-secondary'
"
>
Topbar
</section>
</template>
<script>
export default {
data: function () {
return {
menuOpen: false,
palette: "green-dark",
};
},
methods: {},
};
</script>
<style>
</style>
And my tailwind file:
extend: {
colors: {
palettes: {
"green-dark": {
primary: "#57876E", //dark color
secondary: "#92BFA8", //light color
gray: "#333453",
accent: "#f8f2f2", //slight offset from white
white: "#FAF9FA",
},
},
},
},
Color is not loaded. When I check the console there are no errors, when I check source code, the class name is applied as it should. The corresponding class is however not found/applied. What am I doing wrong?
The most important implication of how Tailwind extracts class names is
that it will only find classes that exist as complete unbroken strings
in your source files.
If you use string interpolation or concatenate partial class names
together, Tailwind will not find them and therefore will not generate
the corresponding CSS.
https://tailwindcss.com/docs/content-configuration#dynamic-class-names
Below was the old question, I realize the issue is not with the custom properties, but rather I have a component like the below, and 'active-class' is not being applied.
I tried to change the prop name to activeClass, doesn't seem to be working
<VListGroup
key={item.text}
class='drawer-item'
active-class='drawer-active-item'
>
I'm working on a new project using Vue, and trying to convert some old components (.vue) files to be using render functions and typescript (.tsx), and trying to separate the style contained in the <style/> blocks into a separate .less file.
While the template syntax, v-if and all can be converted quite easily, however I'm stuck on the part where if my style contains customProperties, https://vuetifyjs.com/en/features/theme/#custom-properties]]
specifically --v-primary-base, as the below
I have the below
.drawer-active-item {
color: white;
&::before {
background-color: var(--v-primary-base);
opacity: 1;
}
&:hover::before {
opacity: 0.8;
}
&::after {
background-color: var(--v-primary-base);
opacity: 1;
}
&:hover::after {
background-color: var(--v-primary-base);
opacity: 0.8;
}
}
Is there a way to access these custom css variables from the .less file? I've been googling things like 'access customProperties in less file` and things related, but I feel like perhaps I'm not asking the right question, or looking at the right resource for what I'm trying to achieve, pointers would be great, thank you.
I have a theme config that currently looks like the below, just for some context.
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import colors from 'vuetify/lib/util/colors';
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'md',
},
theme: {
options: {
customProperties: true,
},
themes: {
light: {
primary: colors.blue.darken3,
},
dark: {
primary: colors.blue.darken3,
anchor: colors.blue.base,
},
},
},
});
I'm using vuetify on my application. The design team create a flat design and I want to change the theme of vuetify to match with mockups
I try to find an option to disable ripple effect easily all over the application but it doesn't exist.
I try to create a component extension to avoid repeating :ripple="false"on each component I use.
I'll take a button component as an example.
<v-btn :ripple="false">My Button</v-btn>
each button on my application need to have ripple=false
My aim is to create a component like this
<my-button>My Button</my-button>
I try to extend v-btn in another component like this.
<template>
<v-btn v-bind="options" :ripple="false"></v-btn>
</template>
<script>
import { VBtn } from 'vuetify';
export default {
name: 'MyButton',
extend: VBtn,
computed: {
options() {
return this.props;
},
},
};
</script>
<style scoped>
I try this way to avoid copy/paste all the props of v-btn.
All solutions that I've tried failed.
You can modify Vue.js components globally even after they've been registered.
In this case, you can simply do this :
const VBtn = Vue.component('VBtn')
VBtn.options.props.ripple.default = false
You can add that in your vuetify.js file before the export default new Vuetify (...) for instance.
- Tested with Vuetify 2.1.14
You can set the complete container to not visible.
.v-ripple__container {
display:none !important;
}
According to Vuetify documentation you can modify the Stylus variables - so you can try to redefine these to your taste, e.g. by setting them to none:
$ripple-animation-transition-in := transform .25s $transition.fast-out-slow-in, opacity .1s $transition.fast-out-slow-in
$ripple-animation-transition-out := opacity .3s $transition.fast-out-slow-in
$ripple-animation-visible-opacity := .15
Override ripple directive with global mixin in main.js
let overrideRipple = {
directives:{
ripple:{
inserted: ()=> {
console.log("Ripple overrided")
}
}
}
}
Vue.mixin(overrideRipple);
With the release of Vuetify 2.0 you can actually just turn off ripples globally by modifying your vuetify.js file like so.
export default new Vuetify({
global: {
ripples: false
},
icons: {
iconfont: 'mdi',
},
});
How to change Vuetify v-text-fields input text color. I tried many ways but none of them is worked.
enter image description here
I tried to change the "Hello" text to red. It is not working.
if you want to change color to white just add props dark to v-text-input
There are few ways to do this.
One convenient way is to set a class on the v-text-field, then using specificity set the color of the input.
Note that you need to use the !important flag when not editing the Vuetify theme directly.
In the template,
<v-text-field class="text-green"></v-text-field>
In the CSS (e.g. style tag),
.text-green input {
color: green !important;
}
Live Snippet:
new Vue({
el: '#app',
data: () => ({
name: 'John'
})
})
.text-green input{
color: green !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.js"></script>
<div id="app">
<v-app>
<v-text-field class="text-green" v-model="name"></v-text-field>
</v-app>
</div>
What worked for me is exporting the themes colors as css variables (custom properties). Code below
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
export default new Vuetify({
theme: {
options: {
customProperties: true,
},
},
})
and then in the scss using the following code:
.v-text-field {
input {
color: var(--v-primary-base);
}
}
This works:
<v-text-field class="text-input-blue"/>
In combination with CSS:
.text-input-blue .v-text-field__slot input {
color: #00f !important;
}
One of the downsides of Javascript frameworks is that the CSS is often hard to customize.
In case you are using v-custom the below scss override will work for you:
<div class="input-text-wrapper">
<v-text-field class="input-text"/>
</div>
Style:
<style scoped lang="scss">
.input-text {
::v-deep {
.v-text-field {
input {
color: blue;
}
}
}
}
</style>
You need to create a file related to CSS styles in the Styles section and name it Override. In that file, you can make any desired changes you need. Put the following code in that file, you can change the color of the border:
.v-text-field {
input {
color: rgba(169, 169, 169, 0.33);
}
}
I want to apply custom CSS and override some default Vuetify colors. For example, success button can be easily overridden:
.success-button {
background-color: $sb--color-success !important;
}
But is there a way to do the same without using !important? I tried both:
body .success-button {
background-color: $sb--color-success;
}
button .success-button {
background-color: $sb--color-success;
}
How to do it without !important?
You can try something along this lines
// src/index.js
// Libraries
import Vue from 'vue'
import Vuetify from 'vuetify'
// Helpers
import colors from 'vuetify/es5/util/colors'
Vue.use(Vuetify, {
theme: {
primary: colors.red.darken1, // #E53935
secondary: colors.red.lighten4, // #FFCDD2
accent: colors.indigo.base // #3F51B5
}
})
Or something like this
<h1 class="subheading grey--text">DASHBOARD</h1>