This guide overlaps with the old guide found here: https://ad.gamersky.info/@steamcommunity.com/sharedfiles/filedetails/?id=1941650801 The above guide will be used as a reference. Valve has officially killed VGUI.

This skin enhances the default skin by giving the interface a clean yet modern look and feel based on Microsoft's 'Metro' Design Language or Fluent. Honestly, even with the new update it doesn't look that good. This guide is updated to focus on skinning the new CSS skins Valve pushed to release in June 2023.

First, check out the Steam group! They also have a Discord server: here[discord.gg]. If there are any mistakes, errors, typos or something missing hit me up on Steam or Discord (@BallOpener).
It's a comprehensive guide on this skin, so buckle up, make yourself a cheese toastie and a hot drink!

An alternative guide/wiki can be found here: Steam Skin Wiki[steamskins.pages.dev].

There's been an issue where Steam's malicious link checker keeps removing the links or isn't online. Come back later within a few hours, and the links should be up. Alternatively, (but not ideal) copy and paste the name of the skin on a search engine to download it. None of these links are malicious, and it's up to you to check whether something is!

Before you continue, you'll need to download some files:
Always download the latest version! 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.

You must download the Millennium Patcher or SFP before continuing with the guide. It provides on-the-fly skin patching. More info is found in the repo and its relevant sections. Choose only one application! All skins should work with both.


All of these contain customisation options. See the 'Personalisation and Customisation' section for more info. Many of these contain additional skins such as Friends and Library.

Many of these are in development, so some things may not be skinned correctly, graphical issues and functionality issues etc! Report bugs on the Discord server!

Many of these contain JavaScript files. Only download JaveScript files you trust! None of these scripts will make you banned on Steam unless you do anything malicious or danger other users.

You might need to create a folder to use Naii_'s or SpaceEnergy skin or drop it into the 'steamui' folder and select 'steamui' in SFP. To use ShadowMonster99's skins extract the folder of the skin you want to the 'skin' folder.

Download 'config.css' for the 'Metro' and 'Fluent' skins if you cannot personalise any options! It can be found here[shiinaskins.com].

For those using Rose's version of Metro make sure to download 'custom.css' to personalise and customise any of the settings in the skin. You can find it here[raw.githubusercontent.com].

Windows
The location where Steam is usually located is:
C:\Program Files (x86)\Steam\

You may have chosen to put it in another location.

Linux and macOS:
Installing the skin on Linux and macOS is the same as on Windows, except the location of files is different:

Linux:
~/.local/share/Steam/

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

Create 'steamui' and 'skins' folders as needed.

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.

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.

The Dark mode Skins change the look of the inbuilt WebKit browser.

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.

Download a file named 'webkit.css' and move it to your skin folder.


Below are different versions of the Dark mode included in different skins.


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 your Skins folder (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 too lazy to drag and drop the files. They also created an online friend's list and chat skin customiser, here[t.ly].

Ensure you have SFP downloaded and stored in a location you can find easily. Do not place it in the Program Files location. Creating a folder named 'SFP' does the job.

Run the application 'SFP_UI.exe'. Make sure Steam is running.

It should look like this with a console log and some buttons:

'Start injection' will inject the client with your skin.
'Start Steam' starts up Steam and applies your launch arguments.
'Open Files' on the right will open any files in your skin folder for easy access and customisation.


Go into settings (at the bottom) and check that 'Run on Boot' is checked and is added as a Steam launch argument.

For developers add to enable extra tools and check 'Dump Pages'.


Move the skin folder to 'C:\Program Files (x86)\Steam\steamui\skins' or wherever Steam is installed. If the 'skins' folder is missing in the 'steamui' folder, create it.


For instance, to install Shiina's Metro Skin, place the entire 'Metro' folder into C:\Program Files (x86)\Steam\steamui\skins. To enable the skin, select the skin in the dropdown box. Then head back to the 'Home' screen and click on 'Start Injection'

For adding Library skins, and Friends/Chat skins, you can add them to the respective skin folder or 'clientui' folder for Library Skins or 'steamui' for Friend/Chat skins.


Some skins have Javascript functions. Enable them by checking the 'Inject Javascript' box in SFP. For instance in Shiina's Metro skin, you can enable JS functions by moving the file out of 'Metro-JS' and replacing all files if prompted.

Files that should be in your 'Skin' folder

• A config.css file (for customising your Library (if yours is missing download one here[shiinaskins.com]).
  
• A libraryroot.custom.css file (for Library skinning and the base UI).
  
• A friends.custom.css file (for Friends and Chat skinning).
  
• Some misc CSS files (used for menus, buttons and customisation).
  
• A Javascript (.js) file (used for scripting).
  
• A skin.json file (for overwriting CSS files).

Your client should look like this:



(Running Rose's Metro for Steam version).

Ensure you have downloaded the Millennium Steam Patcher and stored it in a location you can find easily. Do not place it in the Program Files location. A folder named 'Millennium Patcher' works.

Run the application 'Millennium.Installer-Windows.exe'.

You will be greeted with a Terms of Service. Accept them to continue and click on 'Install Millennum'. You can also use the installer to repair and uninstall the patches.

Wait until it finishes and then start Steam.


Move the skin folder to 'C:\Program Files (x86)\Steam\steamui\skins' or wherever Steam is installed. If the 'skins' folder is missing in the 'steamui' folder, create it.

For instance, to install Shiina's Metro Skin, place the entire 'Metro' folder into 'C:\Program Files (x86)\Steam\steamui\skins'. Go to 'Steam' on the top left --> 'Millennium' to enable the skin. Select the skin in the 'Install Skin' area. You will then get a prompt asking you to restart Steam. And done, you should see your skin. You may need to enable Javascript injections for them to work.

A new version of the Millennium Patcher includes a download area where you can download some skins.

Files that should be in your 'Skin' folder

• A config.css file (for customising your Library (if yours is missing download one here[shiinaskins.com]).
  
• A libraryroot.css file (for Library skinning and the base UI).
  
• A friends.custom.css file (for Friends and Chat skinning).
  
• Some misc CSS files (used for menus, buttons and customisation).
  
• A Javascript (.js) file (used for scripting).
  
• A skin.json file (for overwriting CSS files).

Your client should look like this:


(Running Rose's Metro for Steam version).

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).

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 who want an easy way to update the mods.

For Rose's version of Metro for Steam: Check out the wiki[github.com] for automatic updating and customisation options.

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. Ensure 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 and go back to the large mode by selecting 'Large Mode'.

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.

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

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).

Thanks for reading it to the bottom! 🙂