Custom Css loader themes on steam deck

intro

In this article I will going over how to create custom CSS elements on the steam deck UI. You will need to have Decky-loader installed to start, you can find the instructions at there github. Now firstly lets understand what css loader is if your not already familiar.

what is css loader

Css Loader is a npm module mostly used for web-pack that interpretes @import and url()'s to import/require, but when it comes to the Decky-loader, it is a plugin that allows for the download of custom css elements like curved borders, custom backgrounds, color changes, and more. If you have not installed css-loader through Decky-loader now is the time.

Creating custom themes

I highly recommend using this template repository to begin messing around.

When creating a custom theme the file structure falls upon a theme.json and shared.css file, example below

//theme.json
{
  "name": 'menu color theme'
  "author": "Me",
    "manifest_version": 1,
    "target": "Other",
    "description": 'changes steam menu color'
    "inject": { "shared.css": ["MainMenu"] }
}

//shared.css
// \/ the class name.
.mainmenu_Menu_23IDi { background: #36146e}

The shared.css file will use the class names to add on or edit the way it appears, the theme.json file will determine where everything will be displayed and apply options (if any) to the theme. The method to obtain the class names of the steam deck ui is through the CEF debugger.

How to use the CEF Debugger

The CEF Debugger allows you to directly mess around with the styling of the steam deck UI, here is the steps to enable and start working with it.

1. Enable CEF debugger

In the Decky-loader general settings enable "Allow Remote CEF Debugging"

(optional) You can also enable auto-enable on the CEF remote debugger in the steam deck developer setting in miscellaneous

1. Connect to your steam deck

Obtain your steam deck IP by going to internet settings and clicking on the connected network

once obtained in a browser go to {browser}://inspect (chrome://inspect, brave://inspect, arc://inspect)

click configure on Discover network targets and insert {steamdeck ip}:8081, once done a new remote target should appear with your decks ip attached like so.

1. Understanding the debugger Now that were connected we have access to the main UI tabs, keep in mind that to access the tabs correctly your steamdeck must be on and viewing said tab.

• SP
  SP is the steam decks main user interface to the current page being viewed, this includes but is not limited to home, library, settings, and store

• MainMenu
  This tab represents the 'steam' button menu

• QuickAccess
  The quick access menu is the '...' button menu

To understand how to make live edits the styling im going to go through an example of changing the color styles of the MainMenu.

To start I will need to inspect the MainMenu tab and make sure the steamdeck has the tab in view.
Its best to use the select element button to find and make changes to specific css elements.

I used the select element to get the main div and class name of the main menu and filterd the class name through the styling debugger.

now all i have to do is change the background style to my selected color.

This is the main process to viewing and styling the steam deck UI. The shared.css and theme.json files are used to upload the theme to the css loader plugin in decky. To get a better understanding of that process, please go to the CSS loader themeDB repository for more information

conclusion

I hope this dev post made it a bit easier to begin creating your own custom styling, once again do not be afraid to use the template repository and official css loader themDB repository to expand your knowledge of this new technology to the fullest.
Thank you for reading!