How can I change the font for all items in Vuetify from Roboto to another.
I use Vuetify, there is a default Roboto font. I want to change it to another. Changing the font in the variables.scss file does not help, because each class has a specific Roboto font.
#import url('https://fonts.googleapis.com/css? family=Oxygen:300,400,700&display=swap');
#import url('https://fonts.googleapis.com/css? family=Comfortaa&display=swap');
$body-font-family: 'Oxygen';
$title-font: 'Comfortaa';
$heading-font-family: 'Oxygen';
However, when I use classes like this:
class = "text-md-h6 text-lg-h6 .text-xl-caption"
the Roboto font is still used.
#media (min-width: 1024px)
<style>
.v-application .text-xl-caption {
font-size: 0.75rem !important;
font-weight: 400;
line-height: 1.25rem;
letter-spacing: 0.0333333333em !important;
font-family: "Roboto", sans-serif !important;
}
What do I need to do to change the font in all places?
This should work by setting the font variables in variables.scss file as documented here. A couple things to check if it doesn't work:
The file should be in an expected folder src/[sass, scss or styles]. Docs.
Vuetify Loader should be installed along with sass and sass-loader as dev dependencies
Variables file only contains variables, not imports. Fonts could be declared/imported in main or elsewhere.
it's a bad practice to use !important for most of the cases and unfortunately because those font-family styles also have !important CSS will only use the style with a more specific selector so You also have to use !important. You can try something like .v-application .v-application--wrap * with !important. so it will be like :
.v-application .v-application--wrap * {
font-family: $body-font-family !important;
}
and if you have different styles for different classes , you can just put all of them inside a .v-application .v-application--wrap { } and sass will process them for you. but also note that other vuetify classes might use more specific selectors , so in those cases you have to use more specific selectors for those specific cases.
Related
In this git issue it is discussed how to change the color of vue-plyr user interface. Sampotts mentions a way by changing css variables. I've been trying to do that without success.
In the node_modules/plyr/src/sass/settings directory there is a colors.scss file but changes to the color variables do not seem to affect player color:
:root {
--plyr-color-main: yellow;
}
$plyr-color-main: var(--plyr-color-main, hsl(198, 100%, 50%)) !default;
$plyr-video-background: var(--plyr-video-background, rgba(0,0,0,1)) !default;
The default Vuetify font family is Roboto and I would like to change this. I found other solutions that changes the font family globally. I don't want to change it globally, I only want to change it for a specific element. How to do this?
<template>
<v-container>
<div class="text-h4">Text family I want to change</div>
<div class="text-h6">Text family I dont want to change/give another font family</div>
</v-container>
</template>
Update
Vuetify declares the font on .v-application and unfortunately also declare the font as !important on .v-application .text-hN. I can suggest you some ideas to modify your font:
If you want to change every text-h4: You can override the style of text-h4 by modifying its default ($headings then
'h4') https://vuetifyjs.com/en/features/sass-variables/#example-variable-file
If you want to keep default text-h4: You can remove the text-h4 class and use your own class custom-header with copied rules of text-h4 plus your font-family rule. You won't need higher specificity, nor to use !important.
Something like:
.custom-header {
font-size: 2.125rem !important; /* from .text-h4 */
line-height: 2.5rem; /* from .text-h4 */
letter-spacing: .0073529412em !important; /* from .text-h4 */
font-weight: 400; /* from .text-h4 */
font-family: YOUR_FONT_FAMILY, Roboto, sans-serif;
}
Previous answer
Give your element another class:
<div class="text-h4 anotherClassForExample">Text family I want to change</div>
Override the font-family of this new class in your css.
I was in a similar position before, I had some basic css knowledge and started using frameworks. I strongly recommend you to master CSS before using a UI framework. Starting by using a framework looks faster, shinier and easier but in the long term it is not. You will be blocked a lot and maybe in the future you will change to another one or even want to not use any.
I'm trying to change the CSS feature vue-intro tutorial for my web app. I'm having trouble with how to change the tooltip button color, themes in vue-intro.js.
I want to change Next button color. so, how to change CSS in nuxt.js project.
I added the below code as a plugin. but I can't change the CSS
import Vue from 'vue'
import VueIntro from 'vue-introjs'
import 'intro.js/introjs.css'
Vue.use(VueIntro)
Here's an SCSS utility to generate the CSS for it:
$btn-color: #f50;
$text-color: white;
a.introjs-nextbutton {
background-color: $btn-color;
border-color: darken($btn-color, 4.2%);
text-shadow: none;
color: $text-color;
&:hover {
background-color: lighten($btn-color, 4.2%);
border-color: $btn-color;
color: $text-color;
}
&:focus {
box-shadow: 0 0 0 0.2rem transparentize($btn-color, .42);
background-color: $btn-color;
border-color: darken($btn-color, 4.2%);
color: $text-color;
}
}
I have done something similar before. I think the only way to do it is to overwrite the className or not import the intro.css (make your own). You need to "inspect element" to find out the introJS className from the library. Basically their className start with prefix introjs-something.
I can even do things like display none for previous button or change its color. See picture below.
Click this to see My Inspect Element to find introjs classes
I want to make a progress bar with background linear-gradient and use pre-defined theme colors in scss in vue. Such as:
.progress{
background-image: linear-gradient(to right, $start-color 0%, $start-color 50%, $end-color 50%, $end-color 100%);
}
50% is dynamic changed by code in vue. If I write the style in :style="{}" then I can't use the pre-defined scss color $start-color and $end-color
You should use the :export block from Interoperable CSS under CSS modules.
As an example consider the below given extracts, first in your sass file that has colors defined (say colors.scss):
$primaryColor: #fcf5ed;
$secondaryColor: #402f2b;
:export {
primaryColor: $primaryColor;
darkColor: $secondaryColor;
}
With that setup along with your style loaders (which you currently must have setup) you can just import the file like usual js modules like below in your Vue application:
import colorVariables from 'colors.scss'
colorVariables.primaryColor // => Will now have the value of the color as a string.
Now you can just use the :style binding of the Vue to define the linear-gradient. You can read more on export in the following link : Interoperable CSS - :export under CSS modules.
I have a common.less file, that implements the basic CSS for different skins:
#textColor: black;
#iconSize: 16px;
.container: {
color: #textColor;
background-color: white;
}
.icon: {
width: #iconSize;
height: #iconSize;
}
// note that #iconSize is also used in this file inside mixins
The plan is to use it like so skin_1.less:
#iconSize: 32px; // override the icon size
// but leave #textColor as default
#import "common.less";
.container: {
color: red;
}
// I would now have big icons and red text
So I would like to have a common style, that I can reuse and selectively override variables.
This does not ssem to work however. I think it's because imports are always moved to the top, so variables cannot be pre-defined.
(I also read that variables are rather constants, so that may be another problem.)
Anyway: is there a better pattern to solve my use case?
You don't need to split the files up, just override the variable after the import. Variables are always resolved as the last definition, even if it is after where it is used.