
{"id":47921,"date":"2025-01-06T14:22:30","date_gmt":"2025-01-06T14:22:30","guid":{"rendered":"https:\/\/ubuntuhandbook.org\/?p=47921"},"modified":"2025-01-06T14:22:30","modified_gmt":"2025-01-06T14:22:30","slug":"steam-native-ubuntu","status":"publish","type":"post","link":"https:\/\/ubuntuhandbook.org\/index.php\/2025\/01\/steam-native-ubuntu\/","title":{"rendered":"Make Steam App Look Modern &#038; Native in Ubuntu"},"content":{"rendered":"<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2022\/11\/steam-logoicon.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-thumbnail wp-image-43327\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2022\/11\/steam-logoicon-250x250.webp\" alt=\"\" width=\"250\" height=\"250\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2022\/11\/steam-logoicon-250x250.webp 250w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2022\/11\/steam-logoicon-300x300.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2022\/11\/steam-logoicon-600x600.webp 600w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2022\/11\/steam-logoicon-768x768.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2022\/11\/steam-logoicon.webp 1200w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/a><\/p>\n<p>Want to beatify your Steam app window in Ubuntu or other Linux. Here&#8217;s a free open-source project to do the job in GNOME.<\/p>\n<p>It&#8217;s <a href=\"https:\/\/github.com\/tkashkin\/Adwaita-for-Steam\" target=\"_blank\" rel=\"noopener\">Adwaita for Steam<\/a>, a skin to make Steam look more like a native GNOME app. With it, the title and tool bars will be merged into a compact GNOME Client-Side Decoration style header bar.<\/p>\n<p>Along with rounded window corners extension, it will look just like a native app.<\/p>\n<div id=\"attachment_47922\" style=\"width: 620px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/steam-yarutheme.webp\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-47922\" class=\"size-large wp-image-47922\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/steam-yarutheme-700x440.webp\" alt=\"\" width=\"610\" height=\"383\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/steam-yarutheme-700x440.webp 700w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/steam-yarutheme-300x189.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/steam-yarutheme-768x483.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/steam-yarutheme.webp 1175w\" sizes=\"auto, (max-width: 610px) 100vw, 610px\" \/><\/a><p id=\"caption-attachment-47922\" class=\"wp-caption-text\">Steam with Adwaita skin<\/p><\/div>\n<p><!--more--><\/p>\n<p>The skin support many different color themes, including Adwaita, Yaru, Pop, Kate, Breeze, Tokyo-Night, Metro, and more.<\/p>\n<p>It can also change the control buttons (maximize, minimize, and close buttons) to MacOS, Windows, and GNOME (Adwaita) Style, configure sidebar to always show or hover only, and show\/hide the QR code at login.<\/p>\n<div id=\"attachment_47923\" style=\"width: 620px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/hover-sidebar.webp\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-47923\" class=\"size-large wp-image-47923\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/hover-sidebar-700x413.webp\" alt=\"\" width=\"610\" height=\"360\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/hover-sidebar-700x413.webp 700w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/hover-sidebar-300x177.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/hover-sidebar-768x453.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/hover-sidebar.webp 1174w\" sizes=\"auto, (max-width: 610px) 100vw, 610px\" \/><\/a><p id=\"caption-attachment-47923\" class=\"wp-caption-text\">hover side-bar and macOS style control buttons<\/p><\/div>\n<h3>Step 1: Install the Adwaita for Steam skin<\/h3>\n<p><b>NOTE: The skin is tested and works in Ubuntu 24.04 with Steam Flatpak and Deb package. Not sure if it works for the Snap package.<\/b><\/p>\n<p>The skin can be installed through either command line installer script or a graphical tool. Choose either way that you prefer.<\/p>\n<h4>Option 1: Use the python installer<\/h4>\n<p>The project offers a Python installer to install the skin from command line.<\/p>\n<p>First, press <code>Ctrl+Alt+T<\/code> on keyboard to open up a terminal window. When it opens, run commands below one by one.<\/p>\n<ul>\n<li>First, grab the source code by running command:\n<pre>git clone https:\/\/github.com\/tkashkin\/Adwaita-for-Steam<\/pre>\n<\/li>\n<li>Next, navigate to the source folder and run the python script:\n<pre>cd Adwaita-for-Steam<\/pre>\n<pre>.\/install.py<\/pre>\n<p>Or you may run <code>.\/install.py<\/code> to list more script options.<\/li>\n<\/ul>\n<p>The script will install the skin into either <code>~\/.var\/app\/com.valvesoftware.Steam\/.steam\/steam\/<\/code> or <code>~\/.steam\/steam<\/code> directory depends on which Steam package you installed.<\/p>\n<p>After installation, launch or re-launch the app to see changes. And, you may uninstall the skin at anytime by running the <code>.\/install.py uninstall<\/code> command from source folder.<\/p>\n<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/adwaita-forsteam.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-47924\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/adwaita-forsteam.webp\" alt=\"\" width=\"698\" height=\"527\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/adwaita-forsteam.webp 698w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/adwaita-forsteam-300x227.webp 300w\" sizes=\"auto, (max-width: 698px) 100vw, 698px\" \/><\/a><\/p>\n<h4>Option 2: Use Graphical Tool<\/h4>\n<p>For choice, you may run the 2 commands below one by one to install a Flatpak app called <a href=\"https:\/\/flathub.org\/apps\/io.github.Foldex.AdwSteamGtk\" target=\"_blank\" rel=\"noopener\">AdwSteamGTK<\/a>, which offers graphical options to install the skin.<\/p>\n<ul>\n<li>First open terminal (Ctrl+Alt+T) and run command to make sure Flatpak daemon installed:\n<pre>sudo apt install flatpak<\/pre>\n<\/li>\n<li>Then, install the app as Flatpak package:\n<pre>flatpak install https:\/\/dl.flathub.org\/repo\/appstream\/io.github.Foldex.AdwSteamGtk.flatpakref<\/pre>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/flatpak-adwsteamgtk.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-47925\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/flatpak-adwsteamgtk-700x505.webp\" alt=\"\" width=\"610\" height=\"440\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/flatpak-adwsteamgtk-700x505.webp 700w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/flatpak-adwsteamgtk-300x216.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/flatpak-adwsteamgtk.webp 706w\" sizes=\"auto, (max-width: 610px) 100vw, 610px\" \/><\/a><\/p>\n<p>Once installed, launch the app either by searching from GNOME Overview or by running command <code>flatpak run io.github.Foldex.AdwSteamGtk<\/code>.<\/p>\n<p>Then, choose the color theme, control button style, etc., and finally click &#8220;Apply&#8221; to install the skin.<\/p>\n<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/adwsteamgtk.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-47926\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/adwsteamgtk-530x700.webp\" alt=\"\" width=\"530\" height=\"700\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/adwsteamgtk-530x700.webp 530w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/adwsteamgtk-227x300.webp 227w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/adwsteamgtk.webp 622w\" sizes=\"auto, (max-width: 530px) 100vw, 530px\" \/><\/a><\/p>\n<h3>Step 2: Install Rounded Window Corners Extension<\/h3>\n<p>After installed the skin, you need to also install an extension to make the window corner rounded.<\/p>\n<p>For GNOME 40 ~ 44 (meaning Ubuntu 22.04, Debian 12, RHEL 9), choose the &#8220;Rounded Window Corners&#8221; extension. While GNOME 46\/47 (Ubuntu 24.04, Fedora Workstaion, etc) may install &#8220;Rounded Window Corners Reborn&#8221; instead.<\/p>\n<p>Ubuntu users can first install &#8220;Extension Manager&#8221; from either App Center (filter by Debian package) or Ubuntu Software, then use it to search &amp; install the extension.<\/p>\n<div id=\"attachment_47927\" style=\"width: 620px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/rounded-corner-extension.webp\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-47927\" class=\"size-large wp-image-47927\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/rounded-corner-extension-700x467.webp\" alt=\"\" width=\"610\" height=\"407\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/rounded-corner-extension-700x467.webp 700w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/rounded-corner-extension-300x200.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/rounded-corner-extension-768x512.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/rounded-corner-extension.webp 895w\" sizes=\"auto, (max-width: 610px) 100vw, 610px\" \/><\/a><p id=\"caption-attachment-47927\" class=\"wp-caption-text\">Search &amp; install via Extension Manager<\/p><\/div>\n<p>While all others may go to extension web page in EGO:<\/p>\n<p><a href=\"https:\/\/extensions.gnome.org\/extension\/7048\/rounded-window-corners-reborn\/\" target=\"_blank\" rel=\"noopener\">https:\/\/extensions.gnome.org\/extension\/7048\/rounded-window-corners-reborn\/<\/a><br \/>\n<a href=\"https:\/\/extensions.gnome.org\/extension\/5237\/rounded-window-corners\/\" target=\"_blank\" rel=\"noopener\">https:\/\/extensions.gnome.org\/extension\/5237\/rounded-window-corners\/<\/a><\/p>\n<p>Then, use the ON\/OFF toggle switch to install. Though you need to install browser extension (if it prompts) and refresh. And, Debian\/Ubuntu needs to install agent package first, by running command in terminal:<\/p>\n<pre>sudo apt install chrome-gnome-shell<\/pre>\n<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/rounded-border-reborn-web.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-47928\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/rounded-border-reborn-web-700x444.webp\" alt=\"\" width=\"610\" height=\"387\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/rounded-border-reborn-web-700x444.webp 700w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/rounded-border-reborn-web-300x190.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/rounded-border-reborn-web-768x488.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2025\/01\/rounded-border-reborn-web.webp 1115w\" sizes=\"auto, (max-width: 610px) 100vw, 610px\" \/><\/a><\/p>\n<p>After installed both skin and Gnome extension, <b>restart Steam app<\/b> to see the changes.<\/p>\n<h3>Uninstall:<\/h3>\n<p>Both the <code>.install.py<\/code> and graphical AdwSteamGTK provide uninstall option.<\/p>\n<p>While, the app itself can by uninstalled by running command in a terminal window (Ctrl+Alt+T):<\/p>\n<pre>flatpak uninstall --delete-data io.github.Foldex.AdwSteamGtk<\/pre>\n<p>For the extension, either go to the EGO web-page again and turn off the toggle switch, or use &#8220;Extension Manager&#8221; or &#8220;Gnome Extensions&#8221; app to uninstall.<\/p>","protected":false},"excerpt":{"rendered":"<p>Want to beatify your Steam app window in Ubuntu or other Linux. Here&#8217;s a free open-source project to do the job in GNOME. It&#8217;s Adwaita for Steam, a skin to make Steam look more like a native GNOME app. With it, the title and tool bars will be merged into a compact GNOME Client-Side Decoration [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":43327,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[1189,2285],"class_list":["post-47921","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-howtos","tag-game","tag-steam"],"_links":{"self":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/posts\/47921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/comments?post=47921"}],"version-history":[{"count":0,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/posts\/47921\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/media\/43327"}],"wp:attachment":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/media?parent=47921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/categories?post=47921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/tags?post=47921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}