How can i change the global color attribute in Vuetify dark theme?
Like e.g.
html, body {
color: red
}
I try to set it via variables.scss but i cant find the appropriate variable name.
Is there a variable for this or how am i supposed to change the color?
There are a few ways. If you'd like to use variables.scss you need to enable treeshaking in nuxt.config.js
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true, // add this line
},
Otherwise if you'd like to define your own colour you'd do it in the same configuration object as well. Then you can then use anywhere in your vue template.
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
themes: {
light: {
myawesomecolour: '#D78480', //#RRGGBB or from the colors packages
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
}
}
},
Or in layouts/default.vue insert a style tag and put in your custom css
<style>
html, body {
color: red;
}
</style>
Related
I am trying to use tailwndo css for a project in laravel and I would like to maintain the nunito font for the whole app but Tailwind has its own font set. Does anybody know how to change it?
Connect the font to the project (as you usually do) and just add your font to tailwind.config.js
module.exports = {
theme: {
fontFamily: {
'sans': ['-apple-system', 'BlinkMacSystemFont', ...],
'serif': ['Georgia', 'Cambria', ...],
'mono': ['SFMono-Regular', 'Menlo', ...],
'your-font': ['Your Font', ...]
}
}
}
https://tailwindcss.com/docs/font-family/#app
tailwind.config.js :
theme: {
extend: {
fontFamily: {
body: ['Rowdies']
}
}
},
css\app.css
#import url('https://fonts.googleapis.com/css2?family=Rowdies:wght#300&display=swap');
shell:
npm run dev
or
npm run watch
now you can use .font-body class in any tag that you want
for example:
<body class="font-body">
<h1>Hello World!</h1>
</body>
font + body = font-body
fontFamily: {
body: ['Open Sans']
}
(you can change body)
Vuetify seems to define it's default dark theme here, and I would like to overwrite some of those values with custom colors.
It seems like scss is the way to overwrite this. However, when I try to change the backgound color, I don't see any change.
#import '~vuetify/src/styles/main.sass';
$material-dark: () !default;
$material-dark: map-deep-merge(
(
'background': #FFFF00
),
$material-dark
);
I'm importing it in main.js (import "./example.scss"), and I know it's loading (syntax errors make it crash), but the dark themed background doesn't change. If this isn't how vuetify styling works, what is?
For vue-cli, the scss style must be included in vue.config.js, ie.
module.exports = {
"configureWebpack": {
},
"css": {
"loaderOptions": {
"sass": {
"prependData": `#import "~#/styles/main.scss"` // change the route with you main.scss location in yout proyect
}
}
},
"lintOnSave": false,
"transpileDependencies": [
"vuetify"
],
"publicPath": ".",
}
Also, the scss file should import styles.sass instead of main.sass. ie.
#import '~vuetify/src/styles/styles.sass';
Using the Nuxt create-nuxt-app (https://nuxtjs.org/guide/installation#using-code-create-nuxt-app-code-)
I selected Vuetify as my UI. (nuxt ^2 && Vuetify ^2)
Vuetify has a default background color of a shade of grey.
I just wanted to change that to white.
Easier said then done.
// nuxt.config.js
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
// my other color changes...
themes: {
light: {
primary: '#3EA0E1', // a color that is not in the default material colors palette
accent: '#82B1FF',
secondary: '#E7E7DE',
info: '#1976D2',
error: "#FF5252",
success: "#4CAF50",
warning: "#FFC107",
}
}
}
}
in variables.scss
// /assets/variables.scss
#import '~vuetify/src/styles/styles.sass';
// change background to white..
$material-light: map-merge($material-light, ( background: '#fff'));
Now when running : npm run dev it does not add the customVariables, apparently only in production.
On https://github.com/nuxt-community/vuetify-module#treeShake it is clearly stated that it only will work in production.
So how do I develop my app with a background of white as example?
I remember in previous versions ( 1.5) still using stylus , that this was not a problem.
I am fine if it does not "treeshake" the components in dev mode, but at least include my custom scss.
Anyone a clean workaround?
If you want to use tree shaking in dev mode, explicitly add treeShake option to the vuetify option.
In your nuxt.config.js file,
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true,
theme: {
themes: {
light: {
primary: '#3EA0E1', // a color that is not in the default material colors palette
accent: '#82B1FF',
secondary: '#E7E7DE',
info: '#1976D2',
error: "#FF5252",
success: "#4CAF50",
warning: "#FFC107",
}
}
}
}
As in question. I use Vue, Vuex(Nuxt) and we also share all mixins and sass variables using:
#nuxtjs/style-resources": "^1.0.0"
Which is newer version of "nuxt-sass-resources-loader": "^2.0.5"
I know that there i spossibility with Webpack such as here
So my question is - is it posiibile to do it in similar way and how to configure it? What should I have installed and how can I add it to my nuxt.config.js?
EDIT:
I also found that article but for me it is not working.
Short answer: yes.
SASS offers the option to export variables, which you can import as module and use like any other object. Webpack with sass-loader and node-sass handles the imports.
Example:
// in assets/scss/variables.scss
$white-color: #fcf5ed;
// the :export directive is the magic sauce for webpack
:export {
whitecolor: #{$white-color};
}
// in store.js
import Styles from '~/assets/scss/variables.scss'
export const state = () => ({
styles: {...Styles}
})
// in component
...
computed: {
styles() {
return this.$store.state.styles;
}
}
Longer answer: You can also just use css variables for everything.
E.g.
// in assets/scss/variables.scss
$white-color: #fcf5ed;
:root {
--whitecolor: #{$white-color};
}
// in component
...
mounted() {
this.$el.style.color = 'var(--whitecolor)';
}
<style>
.component {
color: var(--whitecolor);
}
</style>
I am new to JqGrid, so please bear with me. I am having some problems with styling the cells when I use a showlink formatter.
In my configuration I set up the AfterInsertRow and it works fine if I just display simple text:
afterInsertRow: function(rowid, aData) {
if (aData.Security == `C`) {
jQuery('#list').setCell(rowid, 'Doc_Number', '', { color: `red` });
} else
{
jQuery('#list').setCell(rowid, 'Doc_Number', '', { color: `green` });
}
}, ...
This code works just fine, but as soon as I add a formatter
{'Doc_Number, ..., 'formatter: ’showlink’, formatoptions: {baseLinkUrl: ’url.aspx’}
the above code doesn't work because a new element is added to the cell
<a href='url.aspx'>cellValue</a>
Is it possible to access programmatically the new child element using something like the code above and change the style?
`<a href='url.aspx' style='color: red;'>cellValue</a>` etc.
UPDATE: In order to work you have to do as follow:
jQuery('#list').setCell(rowid, 'Doc_Number', '', 'redLink');
CSS Class
.redLink a {
color: red;
}
You could add a class to the cell:
jQuery('#list').setCell(rowid, 'Doc_Number', '', 'redLink');
Then define a CSS class along these lines:
.redLink a {
color: red;
}