search

PhantomGamers / SFP

This utility is designed to allow you to apply skins to the modern Steam client
MIT License
550 stars 10 forks source link
reverse-engineering skin steam steam-client theme valve

readme

SFP (Formerly SteamFriendsPatcher)

This utility allows you to apply skins and scripts to the new Steam client.

Table of contents generated with markdown-toc

Instructions

  1. 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.
  2. Run the SFP_UI application.
  3. By default, SFP_UI will automatically wait for Steam to start and inject, or inject if Steam is already running.
  4. For full functionality, SFP must be running with its injector started as long as Steam is running.
  5. Steam must be running with the -cef-enable-debugging argument 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
  6. 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

Features

Steam Skinning

Scripting

Skins and Scripts in Separate Folders

Enable JavaScript Injection

Skin Authors

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.

Matching against pages with variable titles

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:

Finding Steam Page Titles

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.

Using System Accent Color

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:

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.

Todo

Known Issues

Dependencies

All

Linux

Credits