I'm new to Angular and I'm trying to to change mat chip default colors using global CSS file but some reason it won't let me change the default chip color and inside text color.
Homepage.component HTML
<mat-chip-list>
<mat-chip>Tag1</mat-chip>
</mat-chip-list>
Global CSS
.mat-chip{
background-color:mat-color($accent);
color: mat-contrast($positive,50);
}
This is what it look like inside mat-card
You can use !important operator, as below :
.mat-chip{
background-color: mat-color($accent) !important;
color: mat-contrast($positive,50) !important;
}
Related
I got react-toastify installed, and my toasts are working, but I want to add them some custom styling depending on a theme, and none of the solutions I saw are working in my case.
I don't want to overcomplicate it, I just want to change background color, maybe borders, font color, etc.
I tried class overriding which documentation is saying about - it's not working.
.Toastify__toast-theme--colored.Toastify__toast--error {
color: white;
background-color: red;
}
I tried my own className and pass it to certein toast - it's not working.
toast.error('here some error', {
className: 'toast-error'
});
.toast-error {
color: white;
background-color: red;
}
And these themed classes are not even added to the toast.success() or toast.error()
I tried to override values in the core css file that im importing, and it's not working.
And if I set background-color: red to the actual class that is added, then I get red background on toast.success() as well.
Here is documentation.
How to deal with this?
using classnames should be the solution to your problem
className={classnames("Toastify__toast-theme--colored", {
"toast-error": // here the condition by which toast-error class should pop up
})}
I know I can simply do this in my SCSS file. But I would like to know the correct way to do it via customizing the actual Bootstrap colors. I have already figured out how to change background colors on the buttons.
I created a custom-bootstrap.scss file in which I modified the $primary and $danger variables and then imported Bootstrap.
custom-bootstrap.scss:
// Override default variables before the import
$primary: #48BF91;
$danger: #CF6676;
// Import Bootstrap and its default variables
#import '~bootstrap/scss/bootstrap.scss';
This is my inspector showing where it sets the text color to black from the _buttons.scss file.
Edit: So right now, this is how I am currently changing the button text color. Just by adding this code into my own SCSS file. But it feels too hacky for me, I want to modify the Bootstrap variables.
.btn-primary {
color: $text;
&:hover {
color: $text;
}
}
use this type
:root {--button-color: black; --button-background-color: silver;}
I am using the style guidelines specified at https://material.angular.io/guide/theming-your-components
My component has a mat-form-field where I want to change the border color. If I put the ng-deep style in component.scss file, it gets applied aliright, like below:
:host ::ng-deep {
mat-form-field.active-field .mat-form-field {
&-flex {
border: 2px solid red;
}
}
}
Now, I want to keep the border color dynamic and dependent on theme. I have a mixin defined in my-component-lib.theme.scss, which gets called from a global theme file of the application. I tried to put the same style inside that mixin as:
#mixin my-component-lib-theme($theme) {
$primary: map-get($theme, primary);
.component-container ::ng-deep {
mat-form-field.active-field .mat-form-field {
&-flex {
border: 2px solid lighten(mat-color($primary), 30);
}
}
}
}
But it is not working. I have some other styles in the mixin which does not use ng-deep, and those styles are working fine. So, it seems the issue here is with ::ng-deep in global theme mixin. How can I solve this?
The ::ng-deep selector is an angular-specific pseudo-class, which tells the Angular-Compiler, that the following CSS shall be applied to Sub-Components as well. This selector will not end up in the browser, as the browser wouldn't know it!
Your global theme file is probably included directly in your html like this <link rel="stylesheet" type="text/css" href="path/to/global/theme.css"> and doesn't know anything about angular (even though it's probably SASS/SCSS-compiled). Just use plain old CSS here (or SASS/SCSS if you're using the default Angular CLI). You may simply omit the ::ng-deep selector here, as your global theme is applied globally anyway.
How can i edit the original bootstrap angular date picker style sheet according to my desire
here is the link
https://ng-bootstrap.github.io/#/components/datepicker/examples#basic
i need to edit the color of this date picker in my file.
If you are using angular cli, There is a global style.css/style.scss in the root folder(src). Here you can add your custom styles for datepicker inspecting the element to find the classes to override the styles.
Add this to style.css/scss file
.ngb-dp-day .btn-light {
background: green !important;
}
.ngb-dp-day .bg-primary {
background: red !important;
}
Simply F12 (Inspect element) and see they styles:
Add to your css:(use !important to prevent ovvride)
ngb-datepicker{
background-color: red!important;
}
See result:
I've tinkered around with css variables, finding an interesting application: You can define a --color variable, and use it as value for different attributes based on the class: A button could have its background filled with the --color, while a tab control could use a border-bottom with the --color to highlight the current tab as follows:
:root {
font: 14px sans-serif;
--red: #f44;
--blue: #78f;
--green: #3c1;
--color: var(--blue);
}
.blue {
--color: var(--blue);
}
.red {
--color: var(--red);
}
.green {
--color: var(--green);
}
.fillbutton {
background: var(--color);
color: #fff;
padding: 0.25em 1em;
}
.borderbutton {
background: #fff;
border: 1px solid var(--color);
color: var(--color);
padding: 0.25em 1em;
}
.tab {
border-bottom: 1px solid #ccc;
padding: 0 1em;
line-height: 150%;
}
.tab.current {
border-bottom: 2px solid var(--color);
color: var(--color);
font-weight: bold;
}
<p>
<span class="fillbutton">Default</span>
<span class="fillbutton green">Green</span>
<span class="fillbutton red">Red</span>
<span class="borderbutton">Default</span>
<span class="borderbutton green">Green</span>
<span class="borderbutton red">Red</span>
</p>
<p><span class="tab">Tab1</span><span class="tab current">Tab2</span><span class="tab">Tab3</span></p>
<p><span class="tab red">Tab1</span><span class="tab red current">Tab2</span><span class="tab red">Tab3</span></p>
By defining classes to alter the --color we can easily create different color schemes without having to be specific to the item we want to style: There is only one .red class needed, not separate .red.fillbutton/.red.borderbutton/.red.tab.current
Since css variables are not supported in some browsers I thought I would try to replicate this functionality using a proprocessor like scss, however scss variables seem to be global only and thus cannot mimic this use case. Is there a way that lets me achieve the above behaviour in a similar DRY fashion using scss?
Since generating CSS files via SCSS is easy, you can have separate colour variables SCSS files and master 'import' SCSS file (for all other SCSS files you might have). What you do then is you compile separate CSS files for each of the colour variables files (eg you could have 3 website colour themes, so 3 different colour variables SCSS files and then 3 different output files). When a user selects a different theme, you just remember which theme the user selected (cookie) and you load a proper CSS file via JS, instead of hardcoding which CSS file to use.
It's not completely DRY, as you do have to define "master" output SCSS files (these should include import of a proper colour variable SCSS file, which changes for each file, and an import of "master imports" SCSS file, which is always the same) separately for each colour variable (so if you have 3 colour themes, you would have to define 3 files) - although it can probably be done programatically as well. However, that way you can enable multiple colour themes of your website without worrying about current lack of cross browser support of plain CSS variables. As long as you have a predefined list of colour themes, that's probably the way to go.
If you do not have a predefined list of colour themes and want to enable the users to set up their own colour theme with a colour picker (and don't want them to first submit those values and then use those values, server-side, to generate a CSS file out of them and fetch that file to the user), you could make use of 'currentColor' CSS property. It is supported and can serve as a colour variable, although it's far more limiting in regards to capability than the new CSS variables. Basically, via the currentColor you accesses the colour property of parent element. So you could provide classes and styles for the parents (eg. .blue has a blue colour) and then style pretty much everything via currentColour. Then, when a user changes the colour blue to green via a colourpicker or something, you change the colour of .blue to the selected colour via JS. Obviously, you'd have to remember the user's selection and execute the JS function handling that on document ready. This workaround certainly has it's drawbacks (eg. defining colours via parents will mean lots of extra classes / parent elements that wouldn't otherwise be needed for styling), so it's not an exactly quick method either, but it doesn't rely on generating multiple CSS files.
In my opinion, it's best to use SCSS variables and generate multiple CSS files in case you have predefined colour themes. In case you allow the user to completely modify their colour theme, I'd go with submitting those values to server and generating a proper CSS file and then fetching that CSS file to the user. However, following this principle, the CSS file won't be updated as you make changes to your CSS and deploy those changes. So this method has its' drawbacks as well.
Until native CSS variables are properly supported in all relevant browsers, I fear there is no perfect solution.
After trying different strategies in scss i found the following solution using mixins. First, we must define all our colors, along with their desired class names, as a list variable:
// define all colors
$colors: (red, #f44),
(green, #3c1),
(blue, #78f);
// define default color to be blue
$color: nth(nth($colors, 3), 2);
Then we define a mixin colorize which first defines the given attributes with the default $color, then iterates the $colors list, doing the same thing for each color class, using the parent selector:
#mixin colorize($properties...) {
// for each property assign the default $color
#each $property in $properties {
#{$property}: $color;
}
// for each color class - assign the class color to each property
#each $cls, $col in $colors {
&.#{$cls} {
#each $property in $properties {
#{$property}: $col;
}
}
}
}
Now we can use the colorize-mixin to assign class-specific colors to one or more css properties:
.fillbutton {
#include colorize(background);
color: #fff;
padding: 0.25em 1em;
}
.borderbutton {
#include colorize(border-color, color);
background: #fff;
border: 1px solid;
padding: 0.25em 1em;
}
And finally, use it in our html like this:
<span class="fillbutton green">Green</span>
<span class="fillbutton blue">Blue</span>
<span class="borderbutton">Default</span>
<span class="borderbutton green">Green</span>