Steam

Steam

180 ratings
Client Skins to Remove the Clutter/Blue from Steam
By Raydell
This guide presents 3 skins for the Steam client that let you:

  • Compact Steam UI: Have a clutter-free Store (no recommendations, no curators, no queue, no scrolling bottom).
  • Dark Steam UI - Theme-only: Return Steam to a dark gray theme, similar to its pre-update look.
  • Dark Steam UI - Compact: Combine both of the above!

(For Firefox and Chrome skins, check out my other guide.)
   
Award
Favorite
Favorited
Unfavorite
Introduction
Dear fellow Steam users!

If you're one of those unfortunate people (like me) who find the new Steam color scheme and/or layout less appealing than the old one, you might be happy to hear that it's possible to change these things through the use of client skins!

In this guide, I present 3 skins for the Steam client which target either the store layout or the color scheme or both. I will also give you pointers on how to create your own skins if you want something different.

(For Firefox and Chrome skins, check out my other guide.)
The Skins
Compact Steam UI (CSUI) client skin:

This skin removes the clutter from the storefront by blocking the curators, the new on Steam, the recommendations, the queue, the recently updated and the endlessly scrolling bottom.


Click here to download CSUI[drive.google.com]

Preview:
http://steamproxy.net/sharedfiles/filedetails/?id=802911902


Dark Steam UI (DSUI) - Theme-only client skin:

The Dark Steam UI skins repaint the whole of Steam into a dark gray theme very similar to its pre-update look. This is the Theme-only version, which:
  • Changes Steam's color theme to dark gray,
  • Doesn't change anything else.

Click here to download DSUI - Theme-only[drive.google.com]

Preview:
http://steamproxy.net/sharedfiles/filedetails/?id=797053113


Dark Steam UI (DSUI) - Compact client skin:

The Dark Steam UI skins repaint the whole of Steam into a dark gray theme very similar to its pre-update look. This is the Compact version, which:
  • Changes Steam's color theme to dark gray,
  • Removes all new storefront elements (curators, recommendations, etc).

Click here to download DSUI - Compact[drive.google.com]

Preview:
http://steamproxy.net/sharedfiles/filedetails/?id=802912964

More screenshots:
http://steamproxy.net/sharedfiles/filedetails/?id=442127236
http://steamproxy.net/sharedfiles/filedetails/?id=441879093


Enlarged Steam (ES) client skin:

This skin and its iterations enlarge the UI and content displayed within the Steam client to enhance readability for those with high resolution screens and/or less than perfect vision.

Standalone version:

Click here to download Enlarged Steam (ES)[drive.google.com]

Incorporated into my other skins:

Click here to download Compact Steam UI ES[drive.google.com]
Click here to download Dark Steam UI - Theme-only ES[drive.google.com]
Click here to download Dark Steam UI - Compact ES[drive.google.com]


The level of zoom is customizable by opening the webkit.css (e.g. with Notepad) found in the skin's "resource" folder and changing the value of the "--Zoom" variable near the top.

Example:
--Zoom: 1.25; ----> This is the default setting. It makes everything 25% bigger.
--Zoom: 1.33; ----> Makes everything 33% bigger.
--Zoom: 1.5; ----> Makes everything 50% bigger.
--Zoom: 2; ----> Doubles the size of everything (not recommended unless you're using a 4k screen without dpi scaling).

Credit for solving the centering issue and thus the final technical solution goes to fellow Steam user Ankh af na Khonsu!


Curatorless Steam client skin:

This simple skin has only one purpose: It removes curators from both the store and the game pages.

Click here to download Curatorless Steam[drive.google.com]

How to Install
Installing these skins for the client is very easy and takes only a minute:

Step 1

Download one (or all) of the skins:

Download link for Compact Steam UI[drive.google.com]
Download link for Dark Steam UI - Theme-only[drive.google.com]
Download link for Dark Steam UI - Compact[drive.google.com]

Step 2

Extract the zip file into your Steamskins folder (usually at C:Program Files (x86)Steamskins).

Step 3

In your client, click Steam (in the upper left corner) --> Settings --> Interface and there will be a dropdown list where you can select the new skin. Select it, click OK and restart your client.

That's it, your skin should now be in effect. Enjoy!
How to Merge with Other Skins
These skins are made of just 1 file called "webkit.css" found in the resource folder, therefore it is really easy to merge them with other skins.


If your skin doesn't include a webkit.css:

You can simply copy the webkit.css from the above skins into your existing skin's resource folder (found at SteamskinsYourskinnameresource) and you're good to go.


If your skin already includes a webkit.css:

If your current skin already has a webkit.css, you can still merge them by opening the webkit.css from my skin and copying everything from between the lines "/* Raydell's code starts here */ and /* Raydell's code ends here */ into your existing webkit.css.

Your existing skin should be compatible as long as it doesn't modify the same web elements.
Creating Your Own Skin
Creating client skins to alter the web-based elements of Steam is no different from creating css based browser skins for Firefox or Chrome.

All you need is the css code and a copy of the webkit.css from Steam's resource folder.

Place the webkit.css inside your skin's resource folder (C:Program Files (x86)SteamskinsYourskinnameresourcewebkit.css), open it with e.g. Notepad, paste in the css code and you're good to go.

Where to get this css code?

The easiest source would be a place where people already posted css-based Steam skins such as Userstyles.org. It doesn't matter that they're for browsers as they work for the Steam client just the same (as it too is partly a browser afterall).

Many people comment their codes so you can use that as a basis for understanding what to edit for specific results.

Ultimately though if you don't like any of the skins or want to tweak them heavily, you'll have to resort to creating your own code.
Personally, I found Google Chrome's Web Development Tools to be really easy and convenient for that as they let you make live changes to any open webpage, see the results in real-time and navigate to the relevant code straight away. These tools can be accessed by right clicking anywhere on the webpage and selecting Inspect Element on the popup menu.

Downloading the browser addon called "Stylish" also helps greatly by letting you store your changes in a skin so you can easily preview your final work and make incremental changes whenever you want to tweak it more.

Hope this helps! Fight the Power!
Changelog
Dark Steam UI skins:


V2.1.6 - 2018.02.16. - Fixed the broken scrolling of the new Wishlist in the ES skins. Recolored the new Wishlist and the Marked Answers (in the forums) for the Dark Steam skins.

V2.1.5 - 2018.02.07. - Fixed a slowdown when viewing Workshop images, plus also made several minor style changes over the past months, not marked with separate versions. The Enlarged Steam skins also received some important fixes for the misplaced Workshop tooltips, dropdown menus and screenshot ribbon which seriously impeded the usability of that section before.

V2.1.2 - 2016.11.23. - Various fixes to the Compact skins for lower resolution displays and some positioning issues when the store has a large special ad on top.

V2.1.0 - 2016.11.20. - Moved the Special Offers (daily deal, etc) into a column on the right for the Compact skins. This change only affects resolutions at or above 1440x900. The store is now also better centered. Some additional color fixes.

V2.0.1 - 2016.11.10. - Various minor bug fixes.

V2.0.0 - 2016.11.08. - First-response update making the Dark Steam skins compatible with Steam's latest large front page overhaul.

V1.6.4 - 2016.09.23. - Adjusted the background color of the new review filter box to fit the skin's theme. Changed the font color of positive ratings to green.

V1.6.3 - 2016.04.15. - Fixed store background going blue during announcements and special sales.

V1.6.2 - 2015.07.16. - Removed the Steam Hardware advertisement from the store (Compact only), added toggle effects to the Greenlight vote buttons.

V1.6.1 - 2015.07.15. - Fixed/reverted several forum related changes which came with yet another minor Steam update.

V1.6.0 - 2015.07.08. - Forum icon and color fixes in response to a new Steam update.

V1.5.0 - 2015.06.06. - Client skin related update.

V1.4.0 - 2015.06.01. - Steam client skin version released. Fixed front page lag caused by the removal of scrolling recommendations. Made various other small improvements to the code.

V1.3.0 - 2015.01.14. - Added gradient background, recolored some buttons and page elements for greater consistency.

V1.2.0 - 2015.01.12. - Dark theme extended to the achievement pages in response to yet another Steam update.

V1.1.0 - 2014.10.08. - Dark theme extended to the forums and community pages which turned blue after a recent Steam update.

V1.0.0 - 2014.09.25. - Initial release as a browser skin. Dark theme covers the storefront and the game pages.
198 Comments
Mr. Dave 12 Dec, 2020 @ 9:30am 
This should probably be taken down. These do not work at all anymore. Once installed, Steam just updates again and wipes them out.
TwistedTenure 9 Jun, 2020 @ 10:44am 
Thanks for your efforts Primal Fear, whilst Raydell is ... absent. I appreciate it. Might you do a Dark Steam UI Compact ES?
Primal Fear 9 Jun, 2020 @ 10:35am 
I now have updated Raydell's ES skin and my own version (that enlarges quite a bit more and is also further improved) to support the new options for Remote Play Together.
https://drive.google.com/drive/folders/1Y9KpxrJGsNWBgMpXNRbh5ZYObllyOLWO?usp=sharing
ګćĦۼŕžعҖїᾐﻭ 29 Apr, 2020 @ 10:49am 
I'm using the enlarged steam version standalone and I can't use the new newshub page from steam. Some Errors are showing there https://steamproxy.net/steamstore/newshub
I'm using the german version of Steam if that matters.
Master 15 Apr, 2020 @ 2:06am 
The skin doesn't work anymore.
Souper 25 Mar, 2020 @ 7:42pm 
Would it be possible to tweak this in a way which doesn't break loading web pages through steam every now and then?
Primal Fear 9 Mar, 2020 @ 2:51am 
@Siberian Software
You use Windows10, with DPI-Scaling active additionally to the skin?
I use my skin under Linux and Windows7 (where there is no other scaling method that works on Steam) without getting fonts that I would consider as blurry.
Under Windos10, with 125% DPI-scaling, I actually use Raydells skin too.
Siberian Software 9 Mar, 2020 @ 12:37am 
@Primal Fear
Thank you. Now I use your remake of Raydell's ES.
Your own version has good font sizes, but unfortunately texts become blurry with this size.
Primal Fear 2 Mar, 2020 @ 1:30am 
@Siberian Software
Actually if you completely remove the Layout folder, a whole lot of stuff won'r get enlarged. For a properly fixed version, scroll a few posts down. There I have posted a link to a newer version where I have added a few fixes including the library. There is also my version, which increases the font size even more and contains a few more improvements (like larger window sizes to actually fit the text).
The new library however is a big problem. It is webcontent now, so it would have to be enlarged via the webkit.css. Raydell's webkit.css doesn't do that. While someone else did actually find a method to enlarge the new library, this ends up in a badly broken interface. The only way if you want an game list with larger font, is actually the small mode (View->Small Mode) together with one of our skins.
Siberian Software 2 Mar, 2020 @ 12:10am 
However I managed to overcome described below: created my own skin, took webkits.css from your ES, copied ES font sizes to new copy of steam.styles, but created no layout folder.
Now everything is enlarged as in ES and Library works as well (although font in games list to the left wasn't enlarged).