This utility allows you to apply skins and scripts to the new Steam client.
Table of contents generated with markdown-toc
- Download and extract the latest zip file under Releases for your
operating system.
- If you have .NET 7 installed, download the _net7.zip release; otherwise, download the _SelfContained.zip release.
- Run the SFP_UI application.
- By default, SFP_UI will automatically wait for Steam to start and inject, or inject if Steam is already running.
- For full functionality, SFP must be running with its injector started as long as Steam is running.
- Steam must be running with the
-cef-enable-debuggingargument for SFP to work.- If Steam is started with SFP, it will do this automatically. Otherwise, you can use the "Force Steam arguments" setting to automatically restart Steam with the chosen arguments if it does not already have them.
- This setting is enabled by default
- Use the "Open File" button in SFP to access the files where your custom skins and scripts are applied from.
For more information and links to existing skins see Steam Skins Wiki
- Reads and applies custom CSS to Steam pages.
- Customize which files apply to which pages in the skin config.
- By default, SFP applies skins from:
- Skins for the Steam client, library, and overlay go in
Steam/steamui/libraryroot.custom.css. - Skins for the friends list and chat windows go in
Steam/steamui/friends.custom.css. - Skins for the Steam store and community pages go in
Steam/steamui/webkit.css. - Skins for Big Picture Mode go in
Steam/steamui/bigpicture.custom.css.
- Skins for the Steam client, library, and overlay go in
- Reads and applies custom JavaScript to Steam pages.
- Customize which files apply to which pages in the skin config.
- By default, SFP applies scripts from:
- Scripts for the Steam client, library, and overlay go in
Steam/steamui/libraryroot.custom.js. - Scripts for the friend
E076
s list and chat windows go in
Steam/steamui/friends.custom.js. - Scripts for the Steam store and community pages go in
Steam/steamui/webkit.js. - Scripts for Big Picture Mode go in
Steam/steamui/bigpicture.custom.js.
- Scripts for the Steam client, library, and overlay go in
- Skins and scripts can also be added to their own folders within
Steam/steamui/skinsand then selected in SFP's settings.
- JavaScript injection is disabled by default and must be enabled in SFP's settings.
- JavaScript code can potentially be malicious, so only install scripts from people you trust!
If you want to customize which Steam pages are skinned and which files are applied to each page, include a skin.json
file in the root of your skin folder.
Default skin.json:
{
"Patches": [
{
"MatchRegexString": "https://.*.steampowered.com",
"TargetCss": "webkit.css",
"TargetJs": "webkit.js"
},
{
"MatchRegexString": "https://steamcommunity.com",
"TargetCss": "webkit.css",
"TargetJs": "webkit.js"
},
{
"MatchRegexString": "^Steam$",
"TargetCss": "libraryroot.custom.css",
"TargetJs": "libraryroot.custom.js"
},
{
"MatchRegexString": "^OverlayBrowser_Browser$",
"TargetCss": "libraryroot.custom.css",
"TargetJs": "libraryroot.custom.js"
},
{
"MatchRegexString": "^SP Overlay:",
"TargetCss": "libraryroot.custom.css",
"TargetJs": "libraryroot.custom.js"
},
{
"MatchRegexString": "Supernav$",
"TargetCss": "libraryroot.custom.css",
"TargetJs": "libraryroot.custom.js"
},
{
"MatchRegexString": "^notificationtoasts_",
"TargetCss": "notifications.custom.css",
"TargetJs": "notifications.custom.js"
},
{
"MatchRegexString": "^SteamBrowser_Find$",
"TargetCss": "libraryroot.custom.css",
"TargetJs": "libraryroot.custom.js"
},
{
"MatchRegexString": "^OverlayTab\\d+_Find$",
"TargetCss": "libraryroot.custom.css",
"TargetJs": "libraryroot.custom.js"
},
{
"MatchRegexString": "^Steam Big Picture Mode$",
"TargetCss": "bigpicture.custom.css",
"TargetJs": "bigpicture.custom.js"
},
{
"MatchRegexString": "^QuickAccess_",
"TargetCss": "bigpicture.custom.css",
"TargetJs": "bigpicture.custom.js"
},
{
"MatchRegexString": "^MainMenu_",
"TargetCss": "bigpicture.custom.css",
"TargetJs": "bigpicture.custom.js"
},
{
"MatchRegexString": ".friendsui-container",
"TargetCss": "friends.custom.css",
"TargetJs": "friends.custom.js"
},
{
"MatchRegexString": "Menu$",
"TargetCss": "libraryroot.custom.css",
"TargetJs": "libraryroot.custom.js"
},
{
"MatchRegexString": ".ModalDialogPopup",
"TargetCss": "libraryroot.custom.css",
"TargetJs": "libraryroot.custom.js"
},
{
"MatchRegexString": ".FullModalOverlay",
"TargetCss": "libraryroot.custom.css",
"TargetJs": "libraryroot.custom.js"
}
]
}Each entry should have a "MatchRegexString" key, where the value is either a regex string that will be matched against a
Steam page title or a url that begins with http:// or https:// that will be matched against a url.
Each entry can also have a TargetCss key and a TargetJs key, which will be the css and js files that are applied to the page if the regex matches.
An entry can have both a TargetCss and a TargetJs key, or just one of them.
Each target can only have one Css and one Js file injected at a time, with the first match taking precedence, so order your patches correctly.
If you would like to use SFP's default config you can simply omit the skin.json file or include this:
{
"UseDefaultPatches": true
}If that key is included along with custom patches, the custom patches will be applied first, followed by the default patches.
Certain pages will have titles that change either depending on the user's language settings or some other factor.
In order to match against these pages, you can match against a selector that exists within the page. SFP will match
against a selector if MatchRegexString begins with ., #, or [.
For example:
-
The Friends List and Chat windows can be matched against with
.friendsui-container -
The library game properties dialog and most of the dialogs that pop up in the overlay menu can be matched against with
.ModalDialogPopup -
The sign in page can be matched against with
.FullModalOverlay
To find steam page titles to match against, make sure Steam is running with cef-enable-debugging and then
visit http://localhost:8080 in your web browser.
When the user has the UseAppTheme setting enabled, SFP passes the System Accent Color to Steam via CSS variables.
You can use these variables in your skin to match the system accent color.
The variables are as follows:
--SystemAccentColor--SystemAccentColorLight1--SystemAccentColorLight2--SystemAccentColorLight3--SystemAccentColorDark1--SystemAccentColorDark2--SystemAccentColorDark3
These variables contain hex colors.
When using these variables, make sure to fallback to sane defaults as these variables may not exist if the user does not enable UseAppTheme or uses a different patcher.
- Add ability to install and customize skins directly from SFP
- None currently
- .NET 7.0 (Only if not using self contained version)
- ttf-ms-fonts
- run
fc-cache --forceafter installing
- run
- Darth from the Steam community forums for the method.
- @henrikx for Steam directory detection code.
- Sam Allen of Dot Net Perls for GZIP compression, decompression, and detection code.
- @maxhauser for semver
- The Avalonia team for the AvaloniaUI framework
- @amwx for the FluentAvalonia theme
- @d2phap for FileWatcherEx
- @alastairtree for LazyCache
