I have a scss file with themes
$themes: (
light: (
backgroundColor: #fff,
textColor: #408bbd,
),
dark: (
backgroundColor: #222,
textColor: #ddd,
),
taxi: (
backgroundColor:yellow,
textColor:black,
),
);
I want to switch between them on click of some conditions which I check in my typescript file. How to do it?
You can not access .scss variables in your typescript file but you can access class names.
So, I would suggest you to change these scss variables into classes and you can switch between them using [ngClass] attribute depending on whatever condition you want.
Link for reference:
https://angular.io/api/common/NgClass
Related
I'm trying to override the default color of Vuetify icons with no luck.
.theme--light.v-icon {
color: rgba(16, 24, 40, 0.54);
}
I've tried here
$material-light: (
'icons': (
'active': 'red',
'inactive': 'red',
),
'active-icon-percent': 0.80,
);
but it doesn't seem to work.
I've looked for ".54" value in Vuetify repository and those are the sole places where I've found it, I'm confused.
Any idea to set this color without brutally override it in css ?
Bootstrap 5 documentation presents full color palettes, including white / black text at different background intensities for good contrast https://getbootstrap.com/docs/5.0/customize/color/.
These css classes are named as per the schema bd-blue-500.
Where can I find scss for generating these classes?
I have found few other solutions for e.g. https://5balloons.info/generate-background-color-for-all-available-colors-in-bootstrap-5/ but none of them creates these original Bootstrap 5 classes from docs.
To create palette-based utilities, you need to (example for grays):
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/maps";
#import "~bootstrap/scss/mixins";
#import "~bootstrap/scss/utilities";
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
);
$utilities: map-merge(
$utilities,
(
"background-color": (
property: background-color,
class: bg-gray,
values: $grays,
),
)
);
I want to define my own theme color so the standard bootstrap elemets are overriden and also use the value later for my own components. Here is the code I use in a scss file:
$theme-colors: (
"primary": #611fe6,
"secondary": #ffbd58,
"dark": #000000
);
#import "node_modules/bootstrap/scss/bootstrap";
#import "node_modules/bootstrap/scss/functions";
#import "node_modules/bootstrap/scss/variables";
#import "node_modules/bootstrap/scss/mixins";
.fa-li {
color: $primary;
}
.fa-li then has the original primary color of bootstrap and not my own.
"How to access a theme color in bootstrap 5?"
Short answer, use map-get...
.fa-li {
color: map-get($theme-colors,"primary")
}
Demo
"I want to define my own theme color so the standard bootstrap elements
are overridden and also use the value later for my own components"
Full answer, For your theme changes it would be better to redefine the value of $primary. Then you won't have to use map-get. Simply reference $primary...
$primary: #611fe6;
$secondary: #ffbd58;
$dark: #000000;
#import "bootstrap";
.fa-li {
color: $primary
}
Demo
Also see: Overriding Bootstrap SCSS Variables
I have Nuxt / Vuetify app with following configuration (nuxt.config.js)
vuetify: {
customVariables: ['~/assets/sass/vuetify.sass'],
theme: {
themes: {
light: {
primary: '#e85730',
}
}
}
}
So I can change primary color (applied eg. to button background). I am also able to change Vuetify variables in ~/assets/sass/vuetify.sass, eg.
$body-font-family: 'Poppins', sans-serif
But I am unable to change theme text color there. For light theme color is compiled to
.theme--light.v-application with default value rgba(0, 0, 0, 0.87)
I can override it with CSS rule and same selector, but I don't like it much. I would rather keep theme changes at one place together (ideally in Nuxt config file or at least as sass variable). Is it even possible.
This can be changed via the sass variables $material-light and $material-dark (https://vuetifyjs.com/en/api/vuetify/#sass-variables). But for the following button colors it will use always dark; primary, secondary, accent, success, error, warning and info.
$material-light: (
'text': (
'primary': 'yellow'
)
);
$material-dark: (
'text': (
'primary': 'blue'
)
);
I have been working on a web app for the past few weeks and we wanted to make some updates. We updated the project and all of its node modules and when I got everything working again the select drop down's options were transparent and the mat-cards lost their drop shadow.
Did something change in the material update that made the styles act like this?
I updated angular material to 7.2.0 and I noticed the transparent mat-select-panel. Adding some css to my global styles/theme.scss fixed the issue.
You can add this css to your global root css file or add it to the component css file.
I keep all my angular material css in styles/theme.scss file then import it to the component.
Update: I added the prebuilt theme import to my styles/theme.scss file and that pulled in the missing mat-select-panel styles.
#import '~#angular/material/prebuilt-themes/indigo-pink.css';
.mat-select-panel {
background: #fff;
}
.mat-select-panel:not([class*=mat-elevation-z]) {
box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
}
The problem is caused by using the css files of Material 5/6 with Material 7.
In my case the css files are imported in index.html from somewhere in /wwwroot/assets/. So upgrading through the cli or package.json was not enough.
In my case the solution was to get the css files of Material 7 from /node_modules/#angular/material/... and overwrite those existing in /wwwroot/assests/.. (these were the old Material 5 css files)
I had the same problem. In my case I had a custom SASS file that imported from #angular/material/theming, the application depended on a CSS generated file from this one.
So after upgrading I had to re-generate the CSS file with node-sass and mat-option-panel wasn't transparent anymore.
For me, the issue was with me COPY/PASTING/MODIFYING some of the code from the github website in order to begin my approach to styling.
/**
* The below is what's available in _theming.scss and what I based my code off of.
* My issue (and I've highlighted the 2 lines, below) was that I had screwed w/ their
* comment and slammed the 2 lines together, screwing w/ the mixins in _theming.scss
*/
$mat-light-theme-background: (
status-bar: map_get($mat-grey, 300),
app-bar: map_get($mat-grey, 100),
background: map_get($mat-grey, 50),
hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX
card: white,
dialog: white,
disabled-button: rgba(black, 0.12),
raised-button: white,
focused-button: $dark-focused,
selected-button: map_get($mat-grey, 300),
selected-disabled-button: map_get($mat-grey, 400),
disabled-button-toggle: map_get($mat-grey, 200),
unselected-chip: map_get($mat-grey, 300),
disabled-list-option: map_get($mat-grey, 200),
);
I had modified:
hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX
card: white,
To:
hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UXcard: white,
The result was that the mat-select-panel was not set correctly (nor, I would imagine, was anything else which relied on "card")