Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Light color toast is unreadable in Dark Mode #272

Open
AlexPBaranov opened this issue Oct 17, 2024 · 1 comment
Open

Light color toast is unreadable in Dark Mode #272

AlexPBaranov opened this issue Oct 17, 2024 · 1 comment

Comments

@AlexPBaranov
Copy link

AlexPBaranov commented Oct 17, 2024

In Dark Mode, the text on the toast is almost unreadable. I believe the background color of the toast should be inverted when Dark Mode is enabled

<div class="position-relative">
  <c-toaster placement="bottom-end" position="fixed" class="p-3">
    <c-toast [autohide]="true" [fade]="true" [visible]="isResultToastVisible" [color]="light" delay="3000" (visibleChange)="makeResultToastVisible($event)">
      <c-toast-header> {{resultToastHeader }} </c-toast-header>
      <c-toast-body> {{ resultToastBody }} </c-toast-body>
    </c-toast>
  </c-toaster>
</div>

image

Windows 11, Chrome 129.0.6668.101

@AlexPBaranov AlexPBaranov changed the title Light color toast in unreadable in Dark Mode Light color toast is unreadable in Dark Mode Oct 17, 2024
@xidedix
Copy link
Member

xidedix commented Oct 28, 2024

@AlexPBaranov as a workaround you can add class="text-dark" to c-toast

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants