Code Monkey home page Code Monkey logo

cssloader-desktop's Introduction



CSSLoader Desktop

A native standalone styling engine for Steam on Windows and Linux

Inject custom styles into Steam's desktop and Big Picture Mode interfaces, browse an ever-growing storefront of community creations, easily manage your themes' settings and updates, and more.



Features

Theming

  • Injects user generated CSS into any render target of Steam UI.
  • Mix and match multiple themes to your liking.
  • Supports "patches" for themes, allowing users to customize values using dropdowns, color pickers, and more.
  • Allows custom images and fonts to be used. (See Creating Symlink)
  • "Profiles" allow you to save the state of multiple themes to reapply later.

Theme Store

  • An integrated storefront for you to download user-submitted themes.
  • Prompts for updating your themes available in the 'Manage' tab.
  • Account support to enable the starring of themes.

Installation

Downloading CSSLoader Desktop

Windows

  1. Download the latest CSSLoader Desktop .msi installer file from Releases.
  2. Once downloaded, run the installer, and follow the onscreen instructions.
  3. If this is your first time installing CSSLoader Desktop, upon launching the app you will be prompted to install CSSLoader's Backend. Click 'Install'
  4. CSSLoader Desktop is now installed! Continue to Creating Symlink if you want to set up custom images/fonts.

Linux/Steam Deck

Installing CSSLoader's Backend

  1. Install Decky Loader using the instructions on the Decky repository.
  2. Run Steam's Big Picture mode or open game mode on Steam Deck.
  3. Open the Quick Access Menu. (QAM Button, Ctrl + 2, Xbox + A, or PS + X)
  4. Select the Decky tab, it has the icon of a power plug.
  5. Select the store icon in the top right.
  6. Search for 'CSS Loader' and install it.
  7. Leave the store, and select CSS Loader from the plugin menu.
  8. Select 'Download Themes', then go to the 'Settings' tab in the Theme Store.
  9. Enable the toggle for "Enable Standalone Backend"

Installing CSSLoader Desktop

  1. Download the latest .appimage binary from Releases.
  2. Running it will start CSSLoader Desktop.
  3. Since CSSLoader Desktop cannot update the backend from the frontend, you will need to periodically open Steam Big Picture and update CSSLoader through Decky.

Creating Symlink

In order to have custom images, fonts, and other files work in themes, you need to create a symlink.

If you are on Linux, you may skip this step as the symlink is created automatically.

Windows

In order to create the symlink, you must run CSSLoader's Backend at least once with Windows Developer Mode enabled.

  1. Open Settings (Win + I)
  2. Select 'Privacy & Security'
    • On Windows 10, this is called 'Updates and Security'
  3. Select 'For developers'
  4. Toggle 'Developer Mode' on.
  5. Restart CSSLoader's Backend.
    • You can do this by opening CSSLoader Desktop, clicking on the 'Settings' tab, and pressing 'Kill Backend', followed by 'Force Start Backend'
    • Alternatively, you can restart your system.
  6. Click on your system tray, and right click on the white paint roller icon.
    • If you see the text "Custom Images/Fonts Enabled", you're set!
    • You may disable Developer Mode after going through this process.

Building/Contribution

Frontend

As a Tauri app, you will need all of Tauri's prerequisites to develop for CSSLoader Desktop.

To start a dev server, clone this repository, then run

npm i
npm run tauri dev

A maintained list of frontend bugs/upcoming features is available through our project board, we refer to issues based on their IDs in the board.

Store

The DeckThemes store is managed under a different github repository.

Backend

CSSLoader's backend is managed under a different github repository.

Acknowledgements

cssloader-desktop's People

Contributors

beebls avatar ferothefox avatar

Stargazers

Meng Jun avatar  avatar Chrysis avatar  avatar Scrimnox avatar hltdev8642 avatar  avatar PROblem* avatar TRAN DUY MAN avatar Juan avatar Owen avatar  avatar Ronin avatar xLiLG0THx avatar  avatar Dave Hardy avatar  avatar Professor Penguin avatar Kyra Ocean avatar Daniel Klingel avatar  avatar  avatar Sterling avatar  avatar  avatar Max Alex avatar  avatar 笨蛋小方 avatar Pluto avatar V--R avatar  avatar  avatar jd avatar  avatar Cynthia Foxwell avatar  avatar Rej avatar Sam Adams avatar GrPK avatar  avatar Knsolrk avatar  avatar Travis Lane avatar  avatar  avatar

Watchers

 avatar

Forkers

ferothefox

cssloader-desktop's Issues

Suggestion!

Can you add support for Audio Loader in the windows app? Or maybe could someone tell me how to manually install the audio .zip files?

Linux Support Locked to Steam Deck Only?

I see that Windows has a standalone version of this, but is the Linux version only for Steam Deck's specific distribution of Linux? Decky Loader cannot be installed on a Non-Valve official HoloISO OS and cannot function as a backend for Linux, in my experience. I was trying to install this on my desktop Linux rig because the documentation lists Linux compatibility rather than just Steam Deck, and the AppImage loads and functions properly, but I am confused as to how the backend works.

If it's me misunderstanding the main page and the support is SD only, that's perfectly fine, of course, I was just curious as to how it all worked and if desktop Linux integration is at all possible at the moment, or at least, maybe considered for the future? I'd love to use it on my desktop rig to have theming parity with my Deck, but if not, that's okay, I appreciate the immense effort that's been put into the SD edition either way. Cheers!

Big picture steam not working in family share beta

Hello, I couldn't find any information about it, but the CSS loader desktop doesn't work in the new beta of Steam family share. I've tried activating the beta feature from CSS loader, but it still doesn't work.

Issue with the CSSLoader backend

My CSSLoader on Windows will not start now. There was an open to update the backend, and I did so but now CSSLoader appears to be stuck. I noticed a trojan warning popped up initially when the backend was installing. Now it is stuck on the "Welcome to CSSLoader" screen.

Feature Request: CSS Load Order

Hi, I absolutely love CSSLoader so that I can finally theme the new Steam UI. The only issue I have with it, I wish the application had a load-order.

I'm using a theme called "Main Window Image" to add a background-image to my Steam Desktop UI but unfortunately this makes some text very hard to read due to the Text Colors. So I'm loading another theme called "Color Master" which allows me to adjust each and every color. Unfortunately though Color Master also sets the background of Steam to an opaque color so I can't see my background-image anymore.

If I disable and re-enable "Main Window Image" while "Color Master" is already active they play well together but unfortunately this doesn't persist through restarts. Hence I would love if CSSLoader had a load-order for themes so I can tell it to load "Main Window Image" last.

Feature Request: Theme Priority GUI

While looking for theme load order options I found #17, which mentions that this feature exists but isn't available in the UI.
I would love to see that value (if present for a theme) to be displayed in the Theme Management GUI or even better have the setting exposed in the theme settings screen.

Also thanks to everyone involved with this project.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.