Notification Pop-Up Background Unthemed (Transparent)

[5OBHAN]

Do you have the latest versions of Spicetify, Spotify and Lucid?

• I'm using the latest versions of Spicetify, Spotify and Lucid

Is there already an issue for your problem?

• I have checked older issues, open and closed

Is your problem definitely caused by the theme?

• I have checked the app behavior without the theme and it is different

Environment & Computer Info

- Spotify version: Spotify for Windows (64 bit) 1.2.53.440.g7b2f582a
- Installed from: Spotify site
- Spicetify version: v2.38.7
- Color scheme: Dark
- Extensions: adblock.js, playOnYouTube.js, romaja_lyrics.js, romaji_lyrics.js, full-queue-clear.js, seekonscroll.js, keyboardShortcut.js, shuffle+.js, scannables.js, volumePercentage.js, playback-bar-waveform.js, beautiful-lyrics.mjs, theme.js
- Custom apps: marketplace
- Lucid installation method: Spicetify Marketplace
- Font: JetBrains Mono

Description

1. Play a playlist where some songs are unavailable.
2. When the playlist goes to these unavailable songs to play
3. It displays a Notification Pop-Up saying Spotify can't play this right now. If you have the file on your computer you can import it.
4. Skips to the next available song.

Note: The popup notification also displays when we Add to Liked Songs / Add to Playlist

The background should match the Background Option we choose in Lucid Settings (Animated / Static / Solid)

Screenshots

[5OBHAN]

Meanwhile, I've created a workaround with CSS Snippet

For those with Background Option : Animated / Static

.notistack-Snackbar .BoxComponent-box-elevated {
    background-color: var(--background-color, rgba(var(--spice-rgb-player, var(--spice-rgb-card)), 0.5));
    border: var(--border-thickness) var(--border-style, solid) var(--border-color, rgba(var(--spice-rgb-text), 0.125));
    border-radius: var(--border-radius, 0.5rem);
    -webkit-backdrop-filter: opacity(var(--backdrop-opacity, 1)) blur(var(--backdrop-blur, 1rem)) saturate(var(--saturation, 1.1)) brightness(var(--brightness, 1)) contrast(var(--contrast, 1.2));
    backdrop-filter: opacity(var(--backdrop-opacity, 1)) blur(var(--backdrop-blur, 1rem)) saturate(var(--saturation, 1.1)) brightness(var(--brightness, 1)) contrast(var(--contrast, 1.2));
}

For those with Background Option : Solid

.notistack-Snackbar .BoxComponent-box-elevated {
    background-color: var(--background-color, rgba(var(--spice-rgb-player, var(--spice-rgb-card)), 1));
    border: var(--border-thickness) var(--border-style, solid) var(--border-color, rgba(var(--spice-rgb-text), 0.125));
    border-radius: var(--border-radius, 0.5rem);
    -webkit-backdrop-filter: opacity(var(--backdrop-opacity, 1)) saturate(var(--saturation, 1.1)) brightness(var(--brightness, 1)) contrast(var(--contrast, 1.2));
    backdrop-filter: opacity(var(--backdrop-opacity, 1)) saturate(var(--saturation, 1.1)) brightness(var(--brightness, 1)) contrast(var(--contrast, 1.2));
}

Just add this as a Snippet :

1. Goto your Marketplace > Snippets > + Add CSS button (at the bottom right corner)
2. Choose any from the given snippets above. Copy and Paste it in Custom CSS field.
3. Enter a Snippet Name (e.g., Lucid-Notification-Popup-Fix)
4. Save CSS and done.

---

Note 1: It does not change with Background Options you choose. So, use either of the snippets.

Note 2: Make sure you Remove this Snippet when this issue gets Closed or Fixed in a Future Update

[sanoojes]

its fixed in the new update