The latest articles on DEV Community by Nishan Bista (@nishan_bista). https://dev.to/nishan_bista https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1733897%2Fd8629d16-3a89-4060-9cc2-4fa0e7fb7918.png https://dev.to/nishan_bista en Nishan Bista Wed, 30 Oct 2024 18:57:50 +0000 https://dev.to/nishan_bista/uitext-blur-issues-with-electron-based-applications-eg-spotify-discord-on-wayland-546c https://dev.to/nishan_bista/uitext-blur-issues-with-electron-based-applications-eg-spotify-discord-on-wayland-546c <p>This article will help you to solve:<br> <code>blur app problem in hyprland<br> blur app problem in wayland<br> discord, spotify blur problem in wayland based compositor</code></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7nrg39gwf6lhmgfot49n.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7nrg39gwf6lhmgfot49n.png" alt="Discord blurry text, ui, icons image" width="800" height="500"></a><br> We may have faced problem where our apps like Discord, Postman, Spotify etc apps UI and text are blurry. This problem is caused by electron apps not using wayland protocol natively although they support it. </p> <p>To fix this it is very simple follow these 3 steps:</p> <h2> <strong>First navigate to:</strong> </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>cd /usr/share/applications </code></pre> </div> <p>This directory will have many <code>.desktop files</code>, we need to open the one's that we need to fix for example <strong><em>discord.desktop</em></strong>.<br> We can open it using our favorite text editor, for now i'll be using <code>neovim</code>.</p> <h2> <strong>Open <code>discord.desktop</code> with nvim:</strong> </h2> <p><code>we'll need root permission to modify these files</code><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>sudo nvim discord.desktop </code></pre> </div> <h2> <strong>On this line where i've marked:</strong> </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2fg4qsp8tu3p2lo1xziu.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2fg4qsp8tu3p2lo1xziu.png" alt="discord.desktop" width="800" height="154"></a></p> <p><strong><em>Add this line of code:</em></strong><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>--enable-features=UseOzonePlatform --ozone-platform=wayland </code></pre> </div> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwucr3l85msujjwq4a76e.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwucr3l85msujjwq4a76e.png" alt="discord.desktop" width="800" height="146"></a></p> <p>Now, Save the file and restart application. BOOM the problem is solved!!</p> <h2> <strong>What these commands(arguments) that i added do?</strong> </h2> <p><code>--enable-features=UseOzonePlatform</code>:this enables the Ozone platform, which is an abstraction layer for handling different window systems (like X11 and Wayland) in Electron-based applications.</p> <p><code>--ozone-platform=wayland</code>: this will direct the application to use the Wayland display server protocol for rendering, instead of the traditional X11.</p> <h2> <strong>Thankyou! May this helped you.</strong> </h2> blurapplications wayland hyprland spotify