https://ad.gamersky.info/@steamcommunity.com/sharedfiles/filedetails/?id=3003438937
Valve finally killed VGUI :(. Please use the new guide.



This skin enhances the default skin by giving the interface a clean yet modern look and feel based on Microsoft's 'Metro' Design Language (now superseded by Fluent). To be honest, Steam's default skin is quite ugly and out-of-date.

First of all, check out the Metro for Steam website[metroforsteam.com] and their steam group! They also have a discord: here[discord.gg]. If there are any mistakes, errors, typos or something missing hit me up on Steam or Discord (BallOpener#8102).
It's a very comprehensive guide on this skin, so buckle up, make yourself a cheese toastie and a hot drink!


Use the launch argument:

steam.exe v-gui

to enable the old interface and use older skins. Paste it where your Steam shortcut is located or on the launch argument box on SFP as shown above. Valve has killed this as well :(

Before you continue you'll need to download some files.
You may need a .rar/.zip extractor of your choice. I use 7zip [www.7-zip.org]as it is free and open-source. For those using Windows 11, I recommend using NanaZip[github.com].

This complete guide works for all Steam platforms and operating systems (Windows, macOS and Linux). Some applications may require additional dependencies or only work on some operating systems. Check the repos (GitHub repositories) linked for additional instructions or resources.



* There are two beta versions of the dark mode available. These versions have bugs, instability and unthemed content at present. Please report any bugs on Discord or the repo.

*Those that want to use the old UI please use version 0.0.15 and do not update to the latest version.

There are a bunch of different styles and looks to choose from. Click the example screenshot link to see a preview of the skin.

You should download a CSS file named: 'friends.custom.css' by right-clicking the code and selecting the 'Save As' option. Save it to 'Downloads' or C:/Program Files (x86)/steam/cilentui/ (or wherever Steam is installed).


The Hopeless Gamer also has a Circle version[raw.githubusercontent.com].

There's also an installer by LaserFlash: here[github.com] and check their instructions on the repo[github.com]. This is just for people that are too lazy to drag-and-drop the files. They also created an online friend's list and chat skin customiser, here[t.ly].

Alternatively, you can use the Automatic Installer for Metro for Steam[github.com] to install the base skin and the unofficial patch at the same time. For instructions, see the 'Automatic Installer' section. Make sure that you download the most recent version of the installer.

If manually installing, check the 'Manual Installation' section and this forum post on the Steam Group.

For the lazy, there's an all-in-one package that contains a mix of everything here[github.com] by Hyoretsu/Bucetossauro.

Linux and macOS:
Installing the mod is much easier for Linux and macOS users, especially the Library and Friends/Chat skins. See their relevant sections for details.

Here is a short explanation of what a specific abbreviation means for those who do not know any website creation whatsoever.

CSS (Cascading Style Sheets)[www.w3schools.com]: Cascading Style Sheets as the name implies describes the style and look of a web page in HTML.

HTML (HyperText Markup Language)[www.w3schools.com]: Hypertext Markup Language creates the layout and the skeleton of a webpage. It is not a programming language but a markup language.

Javascript (often shortened to JS):[www.w3schools.com] Not to be confused with Java, a completely different programming language is a popular programming language for the web.

Clicking on the link will send you to w3schools[www.w3schools.com], a reliable and free website that teaches any of the above languages.

To enter this mode, create a Steam shortcut and add '-dev' (without quotes) to the 'target' field next to the location target address. Kill the current Steam process by either right-clicking the icon in the System Tray and selecting 'Exit' or going into the Hamburger Menu and selecting 'Exit'. Click on the newly-created shortcut. Steam should launch, and you should see 'Console' in the top row, and when you press F6, the VGUI editor will pop up. This is used to edit the base skin and view its properties.

When you enter the Store, Library, Chat or Friends List, press F12 to view the 'DevTools'. This allows you to edit and view the Store, Library, Friends List and Chat code. In Library or Friends List, press F5 to refresh the 'page' after an edit.

To exit out of 'Dev Mode', kill the current Steam process and launch a new instance of Steam from another shortcut.

See the relevant section.

The unofficial patch also has some extras to install. Check the 'Manual Installation' section and this forum post on the Steam Group for a list of extras.

This would make your Steam look like this! (Sort of, there are other modifications not listed here.)

You would need the base skin and the unofficial patch. Some extras are only available using the manual installation method. This is a recommended method on macOS and Linux.


On Windows:

Extract the base skin file. Move the base Metro skin folder to the skin folder where Steam is installed on your computer. The default installation on Windows is C:\Program Files (x86)\Steam\skins. If the folder does not exist, create one with the name 'skins' and place the skin there.

On macOS:
Place the skin folder in ~/Library/ApplicationSupport/Steam/Steam.AppBundle/Steam/Contents/MacOS/skins or by right-clicking the app bundle 'Steam.app' located in Applications folder, then click 'Show Package Contents' where Steam is installed (usually in the Applications folder) and browse to /Contents/MacOS/skins.

On Linux:
Place the skin folder in ~/.local/share/Steam/skins/.


Then, extract the unofficial patch to the base skin. Move the MAIN FILES first and overwrite/replace files in the base Metro skin folder.


Optional: Then, choose and select any extras. (To see a preview of the extra, enter into the folder of an extra of your choice and find an image file.) Drag the files contained in the extra to the root directory of the Metro skin folder. Accept the overwrite of files. To remove/uninstall the extra, replace the files from the Main Files folder in the patch you replaced or reinstall the skin.


To change the skin, click on the hamburger menu in the default skin, select Settings --> Interface, and select 'metro-for-steam 4.4' or 'MetroSkin' in the dropdown box.


You're Done!

To update the entire skin, repeat the instructions.


If the update is small, like a minor bug patch or feature upgrade, download and replace the required file(s) stated on the 'Announcements' channel on the Unofficial Metro for Steam Discord. Head to the master folder on GitHub and find the stated file. Click on the file. Click on 'Raw' on the right-hand side of the page next to 'Blame' and 'History'. Then right-click to save the file to the location where the skin is installed in the same location as where you downloaded the file on the master folder (ie: \MetroSkin\resource\filename.res). Make sure to overwrite that file. Repeat if there is more than one file that needs updating.

This would reduce the need to replace or reinstall the entire skin. Not only does this decrease file duplicates, but it also declutters your Downloads folder by only requiring you to replace the required file(s) needed for the update.

Download the installer. The link takes you to the latest version of the installer.

Run the application.


Click on the 'Next' under the Patched version.


Wait until the extras are loaded and select your extras to install. Make sure to check the checkbox to save the selected extras. Click 'Install Now'.


Wait for the installation to complete.


Now it's finished. Exit the application.

In the default Steam skin, go to the hamburger menu, click on settings, then Interface, and in the dropdown box, change from 'default skin' to 'MetroSkin'. Steam will require you to restart.


You're done!

The Automatic Installer would have a popup box indicating that there is an update to download. I recommend that you update the installer.

To update the skin, wait for an update from the installer and run the installer as normal. Check the patch notes on the releases page of the repo for details. Alternately, follow the instructions in the 'Updating the Skin' part of the 'Manual Installation' section of the guide if you want to update the skin quickly.

To personalise Metro for Steam's base skin, like accent colours and custom fonts, head to here[sundergaming.com] or here[metroforsteam.com].

It looks like this!

Beware that the styles/decals for the library do not work anymore. Decals break the generated file, so it's best not to select any decals. If you are going to use a custom font, make sure that the custom font is installed on your computer first, or it would default to the base font for Metro for Steam (a sans-serif font likely Segoe UI in Windows, Helvetica or Arial in macOS and Linux).

Click on 'Save' to download the file. Head to the location where your skin is installed (usually C:/Programs Files (x86)/Steam/Skins/MetroSkin, for example). Override the file named 'custom.syles' and restart Steam.

Use a colour picker to pick an accent colour from
here[www.materialui.co]or here[colorlib.com]. Make sure to use the same accent colour throughout the skin.

Copy the hex code (e.g. for teal it's 00aba9) or the RGB (Red Green Blue) code (e.g. for teal it's 0,171,169) on the colour picker and paste them in their respective location(s) in the CSS file either next to or or something similar. Remember the semicolon (;) after the colour code. e.g. for teal and the hash (#) before the hex code.

Fonts are a bit difficult to modify. You need some knowledge of CSS before changing them. Look for in the CSS code and change them to your preference. e.g. for the 'family-name' of the font or for a 'generic-family' of fonts. Remember the quotation marks surrounding the font's name exactly as it is named in your Font Library (where your fonts are installed) and the semicolon at the end of the code).

Click the download link. It should be a CSS file names 'webkit.css'. Right-click the lines of text/code and select 'Save As'. Find a suitable location to save the file (e.g. Downloads).

If following from the repo, look for a file named 'webkit.css'. Click on 'Raw' on the top right, then right-click and choose 'Save As'. Find a suitable location to save the file (e.g. Downloads).


Just move the file called 'webkit.css' in the folder to C:/Programs Files (x86)/Steam/Skins/MetroSkin/resource (or wherever Steam is installed) and overwrite the file. Restart Steam to see the changes.

If there is an update to the mod, replace the file 'webkit.css'.

Replace or copy 'webkit.css' to:

Linux:
~/.local/share/Steam/skins/YourSkinName/resource

macOS:
~/Library/Application Support/Steam/Steam.AppBundle/Steam/Contents/MacOS/skins/YourSkinName/resource.

Remember to add the Library and Friends List/Chat modifications to the 'webkit.css' when you update the Dark Mode mod.

NOTE: This section has been rewritten based on the new patcher. Please uninstall the old one!

You will need the SFP, formerly Steam Friend Patcher, and the Metro for Steam modifications ('libraryroot.custom.css', 'config.css' [basically the Library modifications] and 'friends.custom.css' [the Friend's List/Chat modifications]). Extract the files if needed to a safe place for easy access.


Click on 'win' if you're using a Windows computer, 'linux' if you're using a Linux PC or 'osx' if you're using a Mac. Ignore the last two files. You do not need them.


Open the application. You'll be greeted by a screen with a log and three buttons 'Patch', 'Start Scanner' and 'Reset Steam'. 'Patch' applies the modifications and resets Steam. 'Start Scanner' starts the scanning process manually in case there are any changes in the background or detect any issues with the process. 'Stop Scanner' stops it from scanning in the background. 'Reset Steam' restarts Steam and empties the cache of the files to default (unmodded) in case something goes wrong.


Firstly, go into the 'Settings' tab. Fill in the line next to 'Steam Directory' by clicking on 'Browse' to change the location where Steam is installed. Find the location where Steam is installed (usually C:\Program Files (x86)\Steam\) and Click 'Select Folder'. Make sure that 'Patch Friends', 'Patch Library' and 'Patch on App Startup' are checked. Click 'Save' at the bottom to save changes. These are critical to ensure that the modifications are patched every time you start the app. 'Start minimised', although optional, should be checked as it allows the patcher to run in the background without annoying you. 'Reload' resets the settings to default changes.



Extract and drag the CSS files named 'libraryroot.custom.css' and 'config.css' in the downloaded zip 'steam-library-master' to C:\Program Files (x86)\Steam\steamui (or wherever Steam is installed). Accept the override of the files.


Move the CSS file named 'friends.custom.css' to C:\Program Files (x86)\Steam\clientui (or wherever Steam is installed). Accept the override of the files.

After finishing, click on the 'Force Check' option in the patcher and reload the Library and Friend's List/Chat menus. You're done!

Patcher is only required for the Library. You'll need to follow below to modify the Friends List/Chat.

First, create a backup of the original 'webkit.css' or the 'webkit.css' with the Dark Mode mod installed in case something goes wrong by renaming the file from 'webkit.css' to 'webkit.css.bak' or creating a copy elsewhere. You can rename it back to 'webkit.css' to revert any changes.

To install the friends' skin of your choice, copy or replace the contents named 'friends.custom.css' in the same location as above. Make sure to leave a gap under the main 'webkit.css' code. 'YourSkinName' would be the Metro Skin.

For the Library follow the earlier set of instructions.

Linux:
~/.local/share/Steam/skins/YourSkinName/resource

macOS:
~/Library/Application Support/Steam/Steam.AppBundle/Steam/Contents/MacOS/skins/YourSkinName/resource.

Optional:
Leave some gaps in the CSS file. Add some comments like or for example, underneath or above the code to easily distinguish and identify between the mods for updating or editing.

Replace the entire code of the CSS file (e.g. friends.custom.css) with a one-line '@import' command followed by a link to the mod. An example of this is:

The above code is hosted online on Github. Another way is to host the CSS file yourself on a cloud service (e.g. Dropbox), or a website hosting service and link it with
You may need to add additional CSS code or files to override or replace the original code if you intend to customise or personalise the skin, which may require CSS knowledge. Not a recommended method to install the mods due to the lack of customisation. Only recommended for people that want an easy way to update the mods.

Repeat these instructions in the relevant sections above if you are updating the mod(s). Check the Discord for regular updates and patch notes or in the repo of the mod.


You can edit the CSS file(s) to your preferences at your own risk. Knowledge of CSS may be required. 'Config.css' is the CSS file to edit for the Steam Library. Make sure you know what you're doing and read the headings or comments in green. Keep backups, just in case.

When choosing colours, I recommend using the accent colour you chose in the 'Personalisation' section of the guide. To modify the Steam Library, insert the code in 'Libraryroot.custom.css' and add next to the description. e.g. (this line modifies the top header of the navigation bar in the Steam Library).

If editing the CSS files, I would recommend a code/text-editing program like Notepad++[notepad-plus-plus.org] or Visual Studio Code[code.visualstudio.com]. For CSS references, tutorials and help check out w3schools[www.w3schools.com] or Discord.

You can enable the 'Small Mode' of the Library, click on the Steam logo, select it in the dropdown menu (if you are using the latest version of the unofficial patch) and go back to the large mode by selecting 'Large Mode'.

Oh, Jonius7 created an application[github.com] that changes the Library's layout via CSS and JS. Here's a tutorial on it, and make sure to read the video description and the repo.

After making the changes, make sure to save and reload the Library by leaving the Library in the Store or Community Hub and then re-entering back into the Library.

• Click 'Patch', then reload the skin by closing the skin/window and re-entering back into the window.
  
• Check if the patcher is running.
  
• Check if 'Patch Friends' and 'Patch Library' are enabled in the settings tab of the patcher.
  
• Restart Steam and your computer and open Steam up first, then the patcher.
  
• Click on 'Start Scanner' in the patcher to check for changes/issues. Report any problems to Discord.
  
• Click on 'Reset Steam' in the patcher to reset to default settings. Run 'Patch' again to enable the modifications.
  
• Check the syntax and closing brackets in the code of your CSS files.
  
• Delete the 'steamui' or 'clientui' folder to reset the Friend's List/Chat or Library to factory defaults.
  
• Finally, if the above steps do not work, seek help on Discord.

I recommend deleting all unused downloaded files from this guide and cleaning up your Downloads folder after the installation has been completed.

These are optional extras for your Steam Library!


These white logo covers and artwork look like this!

Here is a list of shared Google Drives full of white logo game covers for your Steam Library:
https://drive.google.com/drive/folders/1mTI6VqvHKwWfyg3hUdhCg1nM0NhlXzLX
https://drive.google.com/drive/folders/12kz_gzYr10aOhD_l4fW_vybylT6buB6l
https://drive.google.com/drive/folders/1JkvF2bOto3lrcDi9i-MDlJ5IEHtQlxE8
https://drive.google.com/drive/folders/1jwBgQ9L1CcLt0JGWZryphTMwcx6Y8oDA

Check out https://www.steamgriddb.com/ to download more covers and share them with others. Download boop [www.steamgriddb.com]to change the covers of your installed games via one click on the website.

Here is an application that finds game covers: Steam Grid Cover Finder[github.com]created by AriJKh. Make sure to install GraphicsMagicK [www.graphicsmagick.org]if you want the app to automatically create a game cover when the app can't find one.

Here's Jonius7's version where it does a similar thing: Steam Missing Covers Downloader build[github.com].

Here's another cover 'grabber': Steam Grid[github.com]

Also, check out r/steamgrid for extra resources, links, or sharing!

To change the covers: right-click the game cover and select 'Manage' then 'Set custom artwork'. Choose the artwork.

Alternatively, head to C:\ProgramFiles(x86)\Steam\userdata\(Your Steam ID)\config\grid (or wherever Steam is installed) and place files named with the game's 'App ID' and the letter 'p' at the end. ie: '440p.png' (440 is the App ID for Team Fortress 2).

https://ad.gamersky.info/@steamcommunity.com/sharedfiles/filedetails/?id=3003438937

Thanks for reading it to the bottom! 🙂