I'm using nuxt.js and have installed Vuetify and have added a dark theme to one of my layout pages. So I have two layout pages (Light and Dark). I have mounted this to my layout to switch out the theme, so I can either use a dark theme page or a light one.
mounted(){
setTimeout(() => this.$vuetify.theme.dark = false, 0);
}
When the theme switches to dark it goes a grey colour by default. I want to change this grey colour to a dark blue colour. How can I change the variables to change the base black-gray colour to a base dark blue color?
I don't want to create a "Dark theme" in the nuxt.config.js file. This is not what I want to do because I then have to add, color="primary" to my dark theme everywhere.
I want to do is set my base colour to dark-blue instead of black-grey and then all colours in my theme will change. How can I do this?
Have you checked the docs for information about customizing the theme color palette.
The docs say that you can define this way the color definitions with colors of your choice.
This is an example plugin of the docs:
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import colors from 'vuetify/lib/util/colors'
const vuetify = new Vuetify({
theme: {
themes: {
dark: {
primary: colors.blue.lighten3,
},
},
},
})
Related
How do I change link color without changing the primary color in theme for vuetify?
I tried this also:
$material-light: (
"background": $telenor-color-background,
"text": (
"link": red,
),
);
But it doesn't work.
By default, Vuetify sets the anchors <a> color to the primary color of the theme. You can override this default with a custom color from a vuetify theme configuration.
From the documentation:
By default, the theme service will use your application’s primary color for anchor tags. You can override this by adding an anchor property to the theme
const vuetify = new Vuetify({
theme: {
themes: {
light: {
anchor: '#8c9eff', // defaults to 'primary', overrided to another color
},
},
},
})
In my layout project I want to change layout color.
layout/default.vue
<v-app>
....
</v-ap>
I need to change v-app color, but this doesn't work:
<v-app color="secondary">
How can I do it?
note: I just want to use a Vuetify variable, like primary, secondary, accent, etc., and not CSS code.
i found it
in layout page i added this
#app {
background-color: var(--v-background-base) !important;
}
and in the nuxt config , in vuetify config
themes: {
light: {
background :'#eee'
},
dark :{
background :'#fff'
}
}
Maybe my question was simple but I could not find any solution to that until now. I am using Vuetify in my Nuxt app. I used the dark theme of that. according to Theme configuration of the official website we can change primary or secondary or other colors of the theme with our desired colors. But when we set for example dark theme the default text and background colors are set to white and black. I could not find any solution to change them. I know that we can set for example class="primary" to an element to change its background-color. But I want to set a default color for text or background like this:
body {
color: var(--v-info-base);
}
/* or */
#app {
color: var(--v-info-base);
}
Where the colors of my website was defined in my nuxt.config.js file like this:
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: true,
options: { customProperties: true },
themes: {
dark: {
primary: {
base: "#099b63",
darken1: "#04c279"
},
accent: "#250032",
secondary: "#97812F",
info: {
base: "#1FFFF1",
darken1: "#450b5a",
darken2: "#1125c0",
darken3: "#40bfa4"
},
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3,
anchor: "#1FFFF1"
}
},
}
},
But that does not work for me!!!
to achieve this you have to rewrite vuetify's sass variables, example on how to use in the Doc
so for example in your variables.scss you can have the following code:
$material-dark: (
'background': #464994,
'text': (
'theme': #944646,
)
);
this will rewrite the default colors for the background and text color in the dark mode.
I have set up a button that when clicked, will change the theme. This initially worked fine until I wanted to change the card color to the secondary theme color. Like this:
<v-card
color="secondary"
>
This works as expected with the current theme, however, when I change the theme using the button, everything else changes except this component. I need this to change to the other theme's secondary color when the theme changes.
You can configure your Vuetify themes globally in Vuetify config object like this:
const vuetify = new Vuetify({
theme: {
themes: {
light: {
primary: '#3f51b5',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#b71c1c',
},
},
},
})
More info
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',
},
});