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.
Related
I have an Ionic Vue3 app. I'd like to change the background color of the whole page. I'm new to Ionic but I believe the way this has to be done (due to the use of Web Components/Shadow DOM) is to modify the --ion-background-color CSS custom property rather than trying to set the value of the normal CSS property, so this works:
.ion-page {
--ion-background-color: red;
}
...but this doesn't:
.ion-page {
background-color: red;
}
Fine, so I do the former, but the problem now is that all elements within the page (everything inside the <ion-page></ion-page> element which use that same custom property value now inherit the same background color.
Does anyone know how to scope the change of background colour of the ion-page element such that it doesn't cascade through descendent elements? Thanks :)
The solution here was to use local CSS custom property --background rather than the global property --ion-background-color. So the following works:
.ion-page {
--background: red;
}
I didn't previously realise there were different sets of CSS variables for different scopes.
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.
I am tring to set my buttons with vuetify but, I don't want each time to set the background color and the style of the button, or with any other vuetify component.
what is the best practice to set global style for the component like buttons chips avatar ect...
i now i can create my own component for that but then there is no reason using vuetify.
I have a nuxt project but the same apply to vue
Might be not the best practice, but this is how I'm doing it:
Create file for your global style (e.g. main.scss) In your assets folder.
Plug it in nuxt.config.js as so: css: ["~assets/styles/main.scss"]
Add class to your app root element (e.g. in default layout)
Create _vuetify.scss for overwriting Vutify styles and import it in main.scss
Write your Vuetify styles in scope of app root class for gaining selector weight.
.app .v-toolbar {
background-color: red; }
If this is too much, or as a quick solution you can just write your global styles in default layout, scoping with app root class.
I want to make a light mode for a website that uses SASS with variables in it. So, here are the variables and smth I tried (but doesn't work):
#media (prefers-color-scheme: dark), (prefers-color-scheme: no-preference) {
$bg: #0d0d0e;
$c0: #ffffff;
$c1: invert(#333);
$c2: #7c7c7c;
$c3: invert(#aaa);
$c4: invert(#eee);
}
#media (prefers-color-scheme: light) {
$bg: #fff;
$c0: #000;
$c1: #505050;
$c2: #66666a;
$c3: #aaa;
$c4: #eee;
}
I have to keep SCSS. Should I try #mixin?
That won't work with Sass variables during runtime since they are being compiled and then statically served. What you can do though is using CSS custom properties aka CSS variables. Those can be changed during runtime with Javascript (more versatile) or use media queries along with the boolean context value prefers-color-scheme. This value is unfortunately set by the user's browser environment and cannot be changed with Javascript.
You can however just switch the colors around with Javascript. With an onClick event you just save the state of current color in a buffer, assign the current color with the alternative color and then set the alternative color to the one saved in the buffer (aka the former current color).
I've tried switching around colors stored in CSS custom properties with a checkbox and the input:checked selector but the changes have only local scoping (thanks, W3C), so they won't do you any good - that is of course unless you want to wrap your whole website in your color switcher element.
The only way with Sass variables would be to recompile the Sass stylesheets when a user switches over the color scheme.
tl;dr: use CSS custom properties and either go with browser defaults in media queries or use a bit of Javascript. Everything else is very hacky.
I'm defining each theme side by side and using them inside #media (prefers-color-scheme).
Even made my self a mixin:
/** Helper to tigth properties to color preferences */
#mixin color-scheme($value: light) {
#media (prefers-color-scheme: $value) {
#content;
}
}
/** Usage */
.element {
/* ... */
#include color-scheme(dark) {
/* ... */
}
}
Some Ext JS container exposes CSS variables without any mixin. For example, fieldcontainer. In my custom theme I want to style two fieldcontainers differently using the available CSS variables for fieldcontainer.
I know it can be done by applying CSS. Is there a way to achieve it by setting the CSS variables?
For example,
.my-class-one {
$form-label-font-color: #FFFFFF
}
.my-class-two {
$form-label-font-color: #000000
}
Is it possible? If possible, where do I put this code?
You could do something like that:
Define a style in the sass/src/ folder:
.my-class-one .x-form-item-label{
color: $my-class-one-label-color;
}
.my-class-two .x-form-item-label{
color: $my-class-two-label-color;
}
...and initialize the variables in the sass/var/ like this:
$my-class-one-label-color: #FFFFFF;
$my-class-two-label-color: #000000;
You should put your scss variables in the sass/var/ folder and your styles in the sass/src/ folder.. And in these two folders keep the same structure as in your app folder. so if you write a style for your view in app/view/Home.js so place your style in the sass/src/view/Home.scss file.
Useful link: http://docs.sencha.com/extjs/4.2.1/#!/guide/theming
Above approach should work though i personally avoid adding style to internal class names.
Another approach could be defining a new UI for your container.
Have a look at:
Creating Custom Component UIs section in theming guide.