search

mzohaibqc / svelte-toasts

A highly configurable notification/toast component with individual toast state management capabilities.
https://mzohaibqc.github.io/svelte-toasts/
MIT License
42 stars 6 forks source link

Transparency makes toast text unreadable #7

Open tv42 opened 2 years ago

tv42 commented 2 years ago

This is easy to demonstrate using https://mzohaibqc.github.io/svelte-toasts/

Select light theme. Adjust window / text size so that theme etc selection comes close to right edge of window. Click "Show Toast" enough times to make toasts overlap the radio buttons.

image

tv42 commented 2 years ago

Looks like you're using transparency to lighten a color: rgba(225, 29, 72, 0.2) Might I suggest rgb(249, 210, 218) instead? And the same for all the other uses.

tv42 commented 2 years ago

Workaround:

<ToastContainer placement="bottom-right" let:data>
  <!--
    Workaround unreadable transparency
    https://github.com/mzohaibqc/svelte-toasts/issues/7
  -->
  <div style="background-color: white">
    <FlatToast {data} />
  </div>
</ToastContainer>
dmoebius commented 1 year ago

The workaround works fine, thanks! :) But it would be better to have an extra 'opacity' property for this.