I'm using Angular 7 with Material Snackbar. I want to changes the color of Snackbar to green.
In app.component.ts, I have:
this.snackBarRef = this.snackBar.open(result.localized_message, 'X', {
duration: 4000,
verticalPosition: 'top',
panelClass: 'notif-success'
});
this.snackBarRef.onAction().subscribe(() => {
this.snackBarRef.dismiss();
});
In app.component.scss, I have:
.notif-success {
color: #155724 !important; // green
background-color: #d4edda !important;
border-color: #c3e6cb !important;
.mat-simple-snackbar-action {
color: #155724 !important;
}
}
But the Snackbar is still shown in its default colors.
I can see that the notif-success class has been applied to the snackbar
<snack-bar-container class="mat-snack-bar-container ng-tns-c18-84 ng-trigger ng-trigger-state notif-success mat-snack-bar-center mat-snack-bar-top ng-star-inserted" role="status" style="transform: scale(1); opacity: 1;">
Why is the custom css not working?
You should write that .notif-success CSS class on your main styles.scss, instead of the app.component.scss.
If you are wondering, it is the one which is on the same directory level as your index.html, package.json, etc.
MatSnackBar colors can be customized by adding this CSS rule to the styles.css file. Tested for Angular Material 15.
.mat-mdc-snack-bar-container {
--mat-mdc-snack-bar-button-color: red;
--mdc-snackbar-container-color: black;
--mdc-snackbar-supporting-text-color: yellow;
}
In Angular 15, the answer by Egemen Çiftci is the only one that works for me. I extended it to support different background colors for success and error notifications:
this.snackBar.open('Success', 'Close', {
panelClass: 'app-notification-success',
};
this.snackBar.open('Error', 'Close', {
panelClass: 'app-notification-error',
};
In the global styles.scss:
.mat-mdc-snack-bar-container {
--mat-mdc-snack-bar-button-color: #ffffff;
--mdc-snackbar-supporting-text-color: #ffffff;
&.app-notification-error {
--mdc-snackbar-container-color: #f23a2f;
}
&.app-notification-success {
--mdc-snackbar-container-color: #43a446;
}
}
"panelClass" styles is not being applied to Snack Bar in v15, It's because in v15 the background color is on a different element.
In .css file
.style-error {
color: white;
--mdc-snackbar-container-color: #FF005D !important;
}
In .ts file
openSnackBar(message: string, type:string) {
this._snackBar.open(message,'Ok', {
duration: 2000,
panelClass: ["style-error"]
});
}
Above code will work for Angular v15.
::ng-deep is deprecated as stated by #Akber Iqbal. Put the following code in the global css or scss
snack-bar-container.mat-snack-bar-container {
color: #155724 !important;
background-color: #d4edda !important;
border-color: #c3e6cb !important;
}
div.mat-simple-snackbar-action {
color: red !important;
}
This styling code worked on #angular/material#11.2.2 with #angular/core#11.2.3
Note: It doesn't work in the component css or scss
This is what you're looking for:
::ng-deep .mat-snack-bar-container{
color: #155724 !important;
background-color: #d4edda !important;
border-color: #c3e6cb !important;
}
::ng-deep .mat-simple-snackbar-action {
color: red;
}
complete working demo here
Instead of:
panelClass: 'notif-success'
Try:
extraClasses: ['notif-success']
I had the same issue and stumbled across this Stackblitz that had a working example.
Just realized extraClasses is deprecated, the accepted answer is probably better here.
Related
I need to apply a custom style to the disabled the antd range picker.
I have added className to the component but the style isn't changing.
<RangePicker
className="my-range"
allowClear={false}
bordered={true}
format="HH:mm"
style={{ width: "100%" }}
/>
Styles Css: (need to change color of the text in the box)
.ant-picker-disabled.building-ophrs-range {
background-color: #ffffff;
.ant-picker-input.ant-picker-input-active {
color: #224cc0;
}
}
Codesandbox : https://codesandbox.io/s/basic-antd-4-20-7-forked-g5ee2t?file=/demo.js
try to write
.ant-picker-disabled.my-range {
background-color: #008000 !important;
}
Try this:
.ant-picker.my-range.ant-picker-disabled {
background-color: #008000;
}
I've created a custom css file that applies styles to the global scrollbar! But, I'd like to only show a dark scrollbar to users when $vuetify.theme.dark is set to true.
Is there a way that I can apply scrollbar css globally once that theme variable changes?
Here's my App.vue file
<template>
<v-app
id="inspire"
:style="{ background: $vuetify.theme.themes[theme].background }"
>
<header-bar />
<v-main>
<v-container fluid fill-height>
<keep-alive>
<router-view />
</keep-alive>
</v-container>
</v-main>
</v-app>
</template>
<script>
import HeaderBar from "./components/Navigation/HeaderBar.vue";
import store from "./store";
export default {
name: "App",
components: {
HeaderBar,
},
computed: {
theme() {
return this.$vuetify.theme.dark ? "dark" : "light";
},
},
store: store,
beforeCreate() {
this.$store.commit("initializeStore");
this.$vuetify.theme.dark = this.$store.state.DarkMode;
},
};
</script>
<style>
#import "./DarkScrollbar.css";
html {
overflow: auto !important;
}
.v-btn.theme--light.v-btn--has-bg:not(.primary):not(.success):not(.error) {
background-color: #ffffff;
}
</style>
In the above, I've created a computed variable "theme" to store the theme's name, which I believe I can place a watcher and trigger a function call on change.
Here's the contents of the DarkScrollbar.css file that I'm wanting to dynamically toggle!
/* Dark Scrollbar CSS */
::placeholder {
color: #b2aba1;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
background-color: #555b00 !important;
color: #e8e6e3 !important;
}
::-webkit-scrollbar {
background-color: #202324;
color: #aba499;
}
::-webkit-scrollbar-thumb {
background-color: #454a4d;
}
::-webkit-scrollbar-thumb:hover {
background-color: #575e62;
}
::-webkit-scrollbar-thumb:active {
background-color: #484e51;
}
::-webkit-scrollbar-corner {
background-color: #181a1b;
}
::selection {
background-color: #004daa !important;
color: #e8e6e3 !important;
}
::-moz-selection {
background-color: #004daa !important;
color: #e8e6e3 !important;
}
I've actually just fixed this myself. I'll post the answer here so that other folks might be able to use this too! Programatically adding and removing a class on the body element allows you to toggle scrollbar styling.
In my computed property, I just had to add the class based on Vuetify's selected theme.
computed: {
theme() {
const bodyElement = document.getElementsByTagName("body")[0];
if (this.$vuetify.theme.dark == true) {
bodyElement.classList = "darkScrollbar";
} else {
bodyElement.classList = "";
}
return this.$vuetify.theme.dark ? "dark" : "light";
},
},
In my custom CSS file that I import, I added body as well as the custom class to each ::webkit style rule.
body.darkScrollbar::placeholder {
color: #b2aba1;
}
body.darkScrollbar::-webkit-scrollbar {
background-color: #202324;
color: #aba499;
}
body.darkScrollbar::-webkit-scrollbar-thumb {
background-color: #454a4d;
}
body.darkScrollbar::-webkit-scrollbar-thumb:hover {
background-color: #575e62;
}
body.darkScrollbar::-webkit-scrollbar-thumb:active {
background-color: #484e51;
}
body.darkScrollbar::-webkit-scrollbar-corner {
background-color: #181a1b;
}
body.darkScrollbar::selection {
background-color: #004daa !important;
color: #e8e6e3 !important;
}
body.darkScrollbar::-moz-selection {
background-color: #004daa !important;
color: #e8e6e3 !important;
}
body.darkScrollbar input:-webkit-autofill,
body.darkScrollbar textarea:-webkit-autofill,
body.darkScrollbar select:-webkit-autofill {
background-color: #555b00 !important;
color: #e8e6e3 !important;
}
Ionic4 action sheet controller not taking up CSS.
This is my ts code
const actionSheet = await this.actionSheetController.create({
mode: 'md',
cssClass: 'match-item-action-sheet red',
buttons: [{ ...
}]
});
And here is my CSS class
.match-item-action-sheet{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.red{
color:red;
}
Here is the live code https://ionic-v4-xbwrsj.stackblitz.io/action-sheet
Below is the expected behavior with class match-item-action-sheet
Use ::ng-deep in css
See working code
::ng-deep .match-item-action-sheet{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
::ng-deep .red{
color:red;
}
Edit!
According image you attach to question
Set style to .action-sheet-group.sc-ion-action-sheet-md
In css:
::ng-deep .match-item-action-sheet .action-sheet-group.sc-ion-action-sheet-md{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
::ng-deep .red .action-sheet-group.sc-ion-action-sheet-md{
color:red!important;
}
Write the following in your variables.scss:
.red {
--color: red;
}
And the following in your component's scss:
.action-sheet-group {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
The Action Sheet Buttons color is controlled by the below class .action-sheet-button.sc-ion-action-sheet-ios or you can verify it in the browser inspector.
If you need only change the delete section use this class .action-sheet-destructive.sc-ion-action-sheet-ios.
Add your styles that are needed to be modified and place it the variables.scss as I have done below.
.action-sheet-destructive.sc-ion-action-sheet-ios {
color: red;
}
Also, you have to change similarly to the relevant class in android.
const actionSheet = await this.actionSheetController.create({
mode: 'md',
css-class: 'match-item-action-sheet red',
}]
});
Try above code. Used css-class instead of cssClass.
Refer this for above issue.
Consider this switch:
<Switch class="switch" formControlName="answer"></Switch>
If I do this it only works when you haven't activated the switch yet, after that the background-color will always be the same even when the switch is not active:
.switch[checked=true] {
background-color: #FE4A49;
color: #FE4A49;
}
And if I do this:
.switch {
background-color: #FE4A49;
color: #FE4A49;
}
Then the background will always be the same regardless of the state.
What's the correct way of styling a switch when using it with angular's model bindings?
i'm styling an App and this is i'd do.
CSS:
Switch#userStatus[checked=true]{
color:#ff0048 ;
background-color: white;
transform: scale(1.25, 1.25); // This is for change the size when checked
transform: translate(-5,0); // This is for stay the position after scale it
}
Switch#userStatus[checked=false]{
color: gray;
background-color: gray;
}
And this is my XML:
`<Switch id="userStatus" checked="false" />`
I hope this helps!
I had an issue with switch
background-color
and it was not working as expected. Changing the background-color was changing the whole switch (the gray part). So I had to change only the color property:
Switch[checked=true] {
color: #f68533;
}
.switch-notchecked {
background-color: #FE4A49;
color: yellow;
}
.switch-checked {
background-color: blue;
color: green;
}
In your template
<Switch #sw checked="false" (checkedChange)="switchChanged(sw.checked)" [class]="isChecked?'switch-checked':'switch-notchecked'"></Switch>
In your component
isChecked:boolean;
switchChanged(checked) {
this.isChecked = checked;
}
I have toastr success and error messages shown in my application. I changes the colors of the background and the font color. I want to change the icon colors shown in the messages. I have searched everywhere for this but I can't find a way to change the fill color of the icon or at least changing the icon. Below is a screenshot of success message
Below is for the error message,
I want to change the icons shown in these messages of change the filling color of the icons. The code in js file,
.success(function(data) {
toastr.success('Successfully Build ', 'Congratulations!', {
closeButton: true
});
}).error(function(err) {
toastr.error('Cant Build', 'Error', {
closeButton: true
});
In css,
#toast-container > .toast-success {
background-image: none;
background-color: #e9e9e9;
color: black;
}
#toast-container > .toast-error {
background-image: none;
background-color: #e9e9e9;
color: red;
}
Toaster uses background PNG images (24x24 pixels) for the icon so your best option is simply to replace them with a colored version you prepared beforehand.
Let's say you prepare a 'black checkmark' PNG of the same size, then the CSS will be:
#toast-container>.toast-success {
background-image: url(<insert here the url pointing to your new PNG>)!important;
}
Now as to creating the icon in the color you want, check flaticon.com (or other similar sites). You should be able to find royalty-free icons and download them of the size and color you want.
Try to use this sample code to have crimson heart
style.css
#toast-container > .toast-success:before {
content: "\f004";
color: crimson;
}
I know this is an old question, but I found a better solution (without re-writing the existing toastr templates icons).
If you don't want to change the current icon of 'toastr-success' but want to create new "templates" with different icons - you can use this pass a specific icon class in the JS:
toastr.info("Click To Open", "more text",{iconClass:"toast-custom"});
And then just set the CSS of "toast-custom":
/* this will set the toastr icon */
#toast-container > .toast-custom {
content: "\f00C";
}
/* this will set the toastr style */
.toast-custom {
background-color: purple;
}
I hope this will help!
CSS
#toast-container > .toast {
background-image: none !important;
}
#toast-container > .toast:before {
position: relative;
font-size: 24px;
line-height: 18px;
float: left;
margin-left: -1em;
color: #FFF;
padding-right: 0.5em;
margin-right: 0.5em;
}
#toast-container .toast{
background-color: #1b75bc !important;
}
#toast-container> .fa-check , .toast {
background-color: #328b17 !important;
}
#toast-container> .fa-trash , .toast {
background-color: #590619 !important;
}
.toast-message{
font-family: Calibri;
}
JS
toastr.options = {
"closeButton": false,
"debug": false,
"newestOnTop": false,
"progressBar": true,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "3000",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "300",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut",
iconClasses: {
error: 'fas fa-trash',
info: 'fa fa-info',
success: 'fas fa-check',
warning: 'something',
},
};
enter image description here