Vuetify has light and dark mode
And you can easily switch between them .
I want to add third one "blue mode" .
Is it possible ?
And how ??
No, this is NOT natively supported by Vuetify v2.
But you can always use some tricks to achieve your goals.
Source and workarounds:
https://github.com/vuetifyjs/vuetify/issues/10985
Yes it's possible! Using a component framework doesn't stop you creating additional styles.
In Vuetify, you'll probably want to use SCSS variables in order to generate new theme styles. I suggest you to go through all vuetify styles directory and check how it's done for dark and white themes. It's not rocket science but you'll have to dig into vuetify styles directory yourself for sure and find all mixins you want to use, and copy their usages inside your own scss files using your new theme.
Most important parts are:
From Vuetify/src/styles/settings you can copy one of the theme files (_light.scss or _dark.scss) and update the new file with your own style settings.
There is a mixin in vuetify you can use to generate your new styles, check how vuetify does it (Vuetify/src/styles/tools/_theme.sass). You'll have to find all usages of this mixin and copy them into your own scss styles using your new theme.
Also there is 1 more usage of theme variables ($material-dark and $material-light) inside vuetify/src/styles/elements/_headings.sass file. Each theme generates headings styles using heading mixin.
Vuetify Theme Configuration
Add custom theme
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
const vuetify = new Vuetify({
theme: {
themes: {
light: {
primary: '#3f51b5',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#b71c1c',
},
dark: {
// dark theme
},
customTheme: {
// custom theme
}
},
},
})
Related
I have a VueJS setup with Vite, Tailwind CSS and postcss, and would like to define different colors using variables in a .env.name file so that I can apply different color themes depending where the code is deployed.
I tried with a .env file containing
VITE_COLOR="FF0000"
and an import within the tailwind.config.js
...
theme: {
colors: {
primary: import.meta.env.COLOR
}
}
...
However, I get the following error:
SyntaxError: Cannot use 'import.meta' outside a module
What do I have to change to get this to work or is there an even better method?
Tailwind config is CommonJS file (not module) so you cannot use ES6 features like import
You can install package called dotenv
npm i dotenv
Require it on top of your tailwind config file like
require('dotenv').config()
module.exports = {/** */}
create color variable in .env. Note as we require it out of Vite's scope it may not be prefixed with VITE_
ANY_COLOR='#ffc8dd'
Now you can access it in tailwind config
theme: {
colors: {
primary: process.env.ANY_COLOR
}
}
This will work BUT if you change color in .env file you need to rebuild your styles again. If it is OK for you (one deployment - one color anyway) - fine. I personally would suggest another solution based on CSS variables - link to CanIUse
Define variable in CSS file or create style tag within <head> tag in index.html
:root {
--theme-color: #ffc8dd;
}
and in config
theme: {
colors: {
primary: 'var(--theme-color)'
}
}
And that's it - no extra packages, extra work and if you change CSS variable, changes will be applied on the fly - even in production as we are using CSS functionality
How would one import the 'md' icons locally, similar to how they import the mdi ones in this post:
How to import the mdi icons module inside nuxt.config.js in Nuxt
Either the standard package or the custom repo
https://github.com/jossef/material-design-icons-iconfont
I'm using the nuxt-vuetify plugin.
All my attempts have failed, e.g adding this:
nuxt.config.js
css: ['~/assets/main.css', './node_modules/material-design-icons-iconfont/dist/material-design-icons.css'],
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true,
defaultAssets: {
font: false,
icons: 'md',// this just fetches it from the repo
// icons: {iconfont: 'md'} // this doesn't seem to work for me
enter code here
},
theme: {
dark: false,
themes: {
light: {
primary: '#fec655',
},
}
}
},
I ended up solving it right after I posted it.
In the end, the settings in the original questions are correct.
One simply has to install the 'md' package from the original source or https://www.npmjs.com/package/material-design-icons-iconfont
After that, it's just a matter of changing the global CSS import.
E.g
css: ['./node_modules/material-design-icons-iconfont/dist/material-design-icons.css'],
A sidenote is that it seems to be possible to use both 'md' and 'mdi' by installing mdi/js for the treeshaken version & making imports manually.
This way, you can use the default icons for all the components but still add more icons from MDI if needed. Since the 'mdi' bundle is around 330kb while the 'md' one is only around 80kb this saves quite a lot of space.
I'm using Nuxt with Vuetify.
I created a class and assigned it some padding.
The class is defined in a unscoped <style> in layouts/default.vue.
when I'm on development mode (npm run dev) everything looks great as I aimed for.
the class is on container element so the final html looks like
<div class="container container--fluid my-class">
the devtools look like that when I'm on dev mode:
so my-class is applied. But once I build the project (npm run generate) my-class is overridden by the container class rules:
I guess it is happening because of the order in which the classes combined into a single css but not sure it behaves differently for dev and built projects.
How can I fix it?
After some more digging it seems to be a known issue with nuxt.
It happens when declaring styles in non-scoped style tag, and using it somewhere else.
I followed these steps: https://stackoverflow.com/a/60925793/9103301
which is basically integrating Vuetify into nuxt manually and not with #nuxt/vuetify.
then I could control over the order the css is loaded in nuxt.config.js - first vuetify and then my styling (which I moved from the layout the a css file).
a more basic vuetify plugin that worked for me:
import Vue from "vue"
import Vuetify from "vuetify"
version "^2.1.1" ,
Vue.use(Vuetify)
export default (ctx) => {
const vuetify = new Vuetify({
theme: {
dark: false, // From 2.0 You have to select the theme dark or light here
},
})
ctx.app.vuetify = vuetify
ctx.$vuetify = vuetify.framework
}
You'll have to install icons as well, vuetify default is mdi which is installed with npm install #mdi/font -D
managed to fix this by disabling tree shaking for vuetify. Change the following in nuxt.config.js:
buildModules: [
["#nuxtjs/vuetify", { treeShake: false }],
],
I'm using Vuetify in my project, and I want to use a variable file to override the styles generated by Vuetify.
I'm loading the components and their corresponding styles using the a-la-carte method, so I'm NOT importing the Vuetify SASS file using this:
#import '~vuetify/src/styles/styles.sass'
// Not using this method because I don't want to generate styles that are not being used by
// vuetify components I'm not using
Also, my project is using *.scss, not *.sass.
I'm also injecting a global SCSS file containing mixins and other variables in my vue.config.js:
css: {
sourceMap: productionSourceMap,
loaderOptions: {
scss: {
prependData: `#import '#/scss/_common.scss';`
}
}
},
I included a Vuetify variable, $border-radius-root, in that common.scss file, but it doesn't seem to have any effect.
Any idea how to do what I want without having to write entirely new CSS rules to override Vuetify's generated stylesheet? Basically I want to change the units that Vuetify uses using their own stylesheet generator.
Actually the solution is, and I'm dumb for not thinking of this before, to add another loader to vue.config.js:
css: {
sourceMap: productionSourceMap,
loaderOptions: {
scss: {
prependData: `#import '#/scss/_common.scss';`
},
sass: {
prependData: `#import '#/sass/_vuetify-variables.sass';`
}
}
},
Since vuetify is using sass as the css pre-processor, it needs sass-loader to handle the variable overrides and apply it to the framework.
If you are using Nuxt:
you can add customVariable path in your nuxt.config.js file, in vuetify object
Note you have to enable treeShake. This option is required for custom SASS variables to work
example:
vuetify: {
// usually file should be in assets folder
customVariables: ['~/path/to/variables.scss'],
treeShake: true,
}
If you are using Vue CLI:
Create a folder with name: sass, scss, or styles
Create new file inside this folder and name it: variables.scss or variables.sass
vuetify-loader will automatically bootstrap your variables into Vue CLI’s compilation process, overwriting the framework defaults.
From Vuetify docs:
If you have not installed Vuetify, check out the quick-start guide. Once installed, create a folder called sass, scss or styles in your src directory with a file named variables.scss or variables.sass. The vuetify-loader will automatically bootstrap your variables into Vue CLI's compilation process, overwriting the framework defaults.
So, the vuetify-loader automatically loads #/scss/variables.scss in a Vue CLI project, so you could set $border-radius-root in that file, and it will overrride the framework default.
I am using a Nuxt.js + Vuetify.js project
Looking at the file assets/style/app.styl we have
// Import and define Vuetify color theme
// https://vuetifyjs.com/en/style/colors
#require '~vuetify/src/stylus/settings/_colors'
$theme := {
primary: $blue.darken-2
accent: $blue.accent-2
secondary: $grey.lighten-1
info: $blue.lighten-1
warning: $amber.darken-2
error: $red.accent-4
success: $green.lighten-2
}
// Import Vuetify styling
#require '~vuetify/src/stylus/main'
.page
#extend .fade-transition
The problem is, changing these theme colors does not result in any changes.
Any ideas how to solve this?
Docs not telling how to change color properly...
first of all you need to set your current theme and then config it.
I've waste 4 hours to figure this out. You need to change you config accordingly:
vuetify: {
theme: {
light: true, //you don't actually need this line as it's for default
themes: {
light: {
primary: '#b71c1c',
...
}
}
}
},
While working on this problem I figured out that you also can freely add your colors like this:
vuetify: {
theme: {
themes: {
light: {
'custom-color-one': '#b71c1c',
'custom-color-two': '#3B8070',
...
}
}
}
},
and then in your HTML:
<div class='custom-color-one'>
I'am div with custom background color!
</div>
<div class='custom-color-one--text'>
I'am div with custom text color!
</div>
Not sure, but try this maybe, depends how vuetify is included, but I presume if you used vuetify nuxt template then you need to include it in your nuxt.config.js file.
If you included vuetify like so:
modules: [
'#nuxtjs/vuetify'
Then add theme like so:
module.exports = {
modules: [
'#nuxtjs/vuetify'
// ...
]
// Add the following:
vuetify: {
theme: {
secondary: '#ff0000'
// ...
}
},
NOTE: This solution isn't the best approach, and will not work in a production environment. It works for workflows where a static site is deployed (i.e. when you run yarn build and deploy that), since changes in node_modules aren't persistent across installs.
Two files govern this - nuxt.config.js and node_modules/vuetify/es5/colors.js.
You need to open nuxt.config.js, and head over to the vuetify property. The themes property under the vuetify: {...} section lets you map the class names to configured color variables.
Further, to change the values of the colour variables, modify the file node_modules/vuetify/es5/colors.js. Here, you define any colors you need to whatever hex color code you want.