Custom Css loader themes on steam deck
Tags: steamdeck, css
Published: 2022-12-19 03:26:24

## 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](https://github.com/SteamDeckHomebrew/decky-loader). 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](https://github.com/suchmememanyskill/Steam-Deck-Theme-Template) 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"
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afe1bht3ei58389amy0b.png)

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

2. **Connect to your steam deck** 

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wvqlltrwpgppjsj899fl.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ry8i8krhvlvvthnhbdgm.png)

3. **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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3pokjk8ns5b8samwqyr.png)

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/um3zt5e3yk83vh1vy3f9.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kdkhblgqfnp8bb6fc04c.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbp4xnzii6798bao302h.png)

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](https://github.com/suchmememanyskill/CssLoader-ThemeDb) 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!