Overview

CSS Loader is a plugin for Decky Loader, a third-party plugin loader for the Steam Deck. It allows users to customize the Steam Deck UI with custom CSS themes, from changing colors to mimicking the UI of the Wii. It also includes a built-in store for downloading custom themes made by other users. I have worked primarily with the React frontend, but I have also contributed to the Python backend.

My history with personalization

I have always had an interest in customizing things I own. In high school, I used Rainmeter to customize my desktop with honeycomb icons and equalizers. I would run Garry's Mod servers because of their customizability with LUA, giving me my first-ever experience of managing a large community. I even plan to use Home Assistant to create a smart home to my specifications once I get my next apartment.

When I got my Steam Deck in June 2022, there was one thing on my mind. How can I customize every little detail of this gaming computer?

I discovered the third-party plugin loader Decky Loader after two weeks of using the Steam Deck. It was still in its infancy with only three plugins, such as a system tweaks manager and GameFAQs browser. However, I saw some developers discussing a CSS Loader plugin that users could download outside the official store.

Getting involved

After downloading CSS Loader, I created the first theme made by anyone other than the current development team: Obsidian, based on AMOLED themes for mobile devices. I asked the development team how to share my theme, and they offered to include Obsidian in the launch of their upcoming theme store. It was thrilling to have something I worked on be involved in the launch of a plugin I knew would shape the Steam Deck homebrew community.

After two weeks of developing themes, I asked if I could help review theme submissions and update the README file for the theme database. They graciously accepted my help, giving me my first opportunity to contribute to an open-source project I was very passionate about. Before CSS Loader, I had only contributed to software I managed. Working on software used by many people encouraged me to continue learning programming outside of school and work. But I didn't want to stop at pull request reviews.

Becoming a maintainer

After another two weeks of approving themes for the database, I mentioned that I wanted to work on the plugin codebase some but wasn't sure where to start. The team knew I had some experience writing in React, so they suggested I help with the details page for the theme details view. I was thrilled! The only projects I had worked on were small websites and Discord bots - nothing used by hundreds or thousands of people.

Setting up the development environment took some time. It was my first time working with a Decky Loader plugin, so I had to learn the workflow. After I set everything up and I could easily compile my code, it was smooth sailing. I had some experience with React frameworks after creating a portfolio website and a website for the makerspace I managed. I used that knowledge to create the new details page to the specifications the development team wanted. Plus, I surpassed their expectations by making the interface look good on all resolutions and allowing any image size for the preview.

What I learned

Working on CSS Loader was less of a programming learning experience and more of a foray into open-source development. Before joining the Decky Loader community, I didn't know the etiquette of open-source communities. I had no idea how to get started contributing to a project I was passionate about. Joining the CSS Loader project taught me that most developers don't bite and appreciate any help they can get with their projects. This experience set me up for working on many projects, such as my Audio Loader plugin and Decky Loader.