React-toastify: Enhancement: Align colors to bootstrap colors

[SmileSydney]

I noticed the container colours (the left border of toast) doesn't match those in vanilla bootstrap. It'd be nice if it did for consistency.

I believe the default Bootstrap colour values are:
Success: #5cb85c
Info: #5bc0de
Warning: #f0ad4e
Error: #d9534f

[fkhadra]

Hello @SmileSydney.

I understand your point of view but I'm not planning to switch to bootstrap colors.
I think it's pretty easy to set your preferred colors.

But I'll think about it. I'm not using bootstrap at all but It's true that there is a lot of people out there using it.

[fkhadra]

@SmileSydney I won't switch to bootstrap colors for the moment unless there is a real need.
You can easly set the colors if you edit the _variables.scss

$color-default: #ffffff;
$color-info: #3498db;
$color-success: #07bc0c;
$color-warning: #f1c40f;
$color-error: #e74c3c;

Or you can override the following css classes:

.toastify-content--info { border-color: #yourColor; }
.toastify-content--success {border-color: #yourColor; }
.toastify-content--warning {border-color: #yourColor;  }
.toastify-content--error {border-color: #yourColor ; }

.toastify__progress--info { background-color: #yourColor; }
.toastify__progress--success { background-color: #yourColor; }
.toastify__progress--warning { background-color: #yourColor; }
.toastify__progress--error { background-color: #yourColor; }

BTW sorry to disappoint you

[laixintao]

Hi @fkhadra Thanks for the tips, but I assume that the class has changed to

.Toastify__toast--success {
  background-color: #00c781;
}
.Toastify__toast--error {
  background-color: #ff4040;
}
.Toastify__toast--info {
  background-color: #00b8e6;
}
.Toastify__toast--warning {
  background-color: #ffaa15;
}

?

[arorahrsh]

If anyone wants to use the bootstrap default colours, you can paste this code in your App.scss file:

.Toastify__toast--success {
  color: #155724 !important;
  background-color: #d4edda !important;
  border-color: #c3e6cb !important;
}
.Toastify__toast--error {
  color: #721c24 !important;
  background-color: #f8d7da !important;
  border-color: #f5c6cb !important;
}
.Toastify__toast--info {
  color: #004085 !important;
  background-color: #cce5ff !important;
  border-color: #b8daff !important;
}
.Toastify__toast--warning {
  color: #856404 !important;
  background-color: #fff3cd !important;
  border-color: #ffeeba !important;
}