Readme coming soon
deckthemes / sdh-cssloader Goto Github PK
View Code? Open in Web Editor NEWLoads CSS dynamically into the steam deck game ui
License: GNU General Public License v3.0
Loads CSS dynamically into the steam deck game ui
License: GNU General Public License v3.0
My deck has just updated to the latest preview build and I noticed any themes I had set through css loader had disabled.
Enabling any that effect the home screen aren't working at all, some that affect the colour of the QAM and so on seem to work.
I'm on the latest pre release of decky loader.
I've tried reloading css loader and restarting my deck but it's still the same.
It would be great if the theme browser/manager had an option to sort by installed, so current themes can be updated more easily and sort by not installed so new themes can be found more easily.
An update all button could also work for easier updating.
This isn't super necessary right now, but it will become increasingly important as more themes are added.
very small issue, only visible on brightly coloured preview images.
it's more visible on the steam deck, these screenshots were taken from PC so there's some compression.
The gray box that appears when hovering is square instead of rounded (may be intentional?) but is also is slightly too high and doesn't cover the whole bottom of the box
Steam separates notification components into "notificationtoasts".
So we can't theming it until we add mapping.
In css_tab_mapping.py
def load_tab_mappings():
global TAB_MAPPINGS_INTERNAL
TAB_MAPPINGS_INTERNAL = {
"QuickAccess": ["QuickAccess", "QuickAccess_.*"],
"MainMenu": ["MainMenu", "MainMenu_.*"],
"All": ["SP", "QuickAccess", "QuickAccess_.*", "MainMenu", "MainMenu_.*", "Steam Big Picture Mode"],
"SP": ["SP", "Steam Big Picture Mode"],
"Notification": [ "notificationtoasts", "notificationtoasts_.*"]
}
In css_theme.py
self.injects = [Inject(os.path.join(themePath, "theme.css"), ["SP", "QuickAccess", "MainMenu", "Notification"], self)]
This change makes us enable to theming notifications.
Test:
In shared.css
/* Notification */
.notificationcontent_ShortTemplate_2w-Eq, .notificationcontent_PinnedTemplate_H_NPi, .notificationcontent_StandardTemplate_1B_uv, .notificationcontent_ShortTemplate_nwer8, .notificationcontent_StandardTemplate_5HZT7, .notificationcontent_PinnedTemplateDesktop_1-8YO, .notificationcontent_PinnedTemplate_1X-O1 {
background: #222209 !important;
}
I just downloaded the css loader from the decky loader but I can’t install any themes. I’ll click the install button but nothing happens. Anyone know how I can fix this?
As a theme user id like to be able to use themes with images without internet and witbout the performance penalty of encoding the image as base64.
Since the deck is used in places without internet it would be nice if the plugin could locally host a themes assets so they are available when internet is not.
Maybe each theme could have an assets folder that gets hosted and can be accessed at localhost/themename/assets.
Adding as an issue as per the conversation with @suchmememanyskill
I'm looking to inject HowLongToBeat data into a sub div on the game page. Is there any plans to support something like this? Inject JavaScript Support?
I'm looking for something similar in functionality to the Crankshaft loaders ProtonDB plugin but I need something that is loadable by Decky Loader.
Add the ability to directly inject custom css code snippets from the plugin itself
I wrote a python script that converts images from a "theme root/images" into css files and updates the theme.json file to allow these images to be selectable as a "dropdown" patch. It also adds the user selected images as :root variable so they can be used in theming. With it i created a wallpapers theme that lets you set your own images for any wallpaper just by dropping them into an images folder.
You guys have said that you dont want to support a image dropdown type so im looking for another way to get that functionality in the most userfriendly way possible. if not directly supported here i can implement a seperate plugin that does the local image hosting and expose an image dropdown type. If i creted a seperate pligin it would be nice to have cooperstion between the two since they are closely related.
So these are some of the possible options 1 is preferred:
I have a working prototype of the functionality here:
Wallpapers Theme
Open to any and all suggestions on how we can accomplish this and will contribute where needed to make it happen.
Thanks
I have just installed the plugin y select "Manage themes" but it keeps loading forever. I tried rebooting the steam deck but it doesn't work. Any ideas?
Less of a bug, more of a question.
The Steam Deck's built-in browser (e.g. for the store, or other pages on the Steam website) and the stock deck theme are designed to match pretty-uniformly. However, for users of custom CSS themes, this browser is unpatched.
As an example, here's me using EMERALD0874's Galactic theme and browsing a store page - note that the store page is entirely unthemed.
Therefore, two questions:
When I open CSSLoader from decky loader. No themes pop up, I restarted, refreshed, nothing works.
"Manage Themes" uses title case at the top of the plugin whereas "Reload themes" uses standard case at the bottom of the plugin.
I tested the latest Beta of SteamOS and the 28.01. released beta breaked CSS Loader. No function at all.
Revert back to "stable" channel fixed CSS Loader.
Video of the issue:
https://www.youtube.com/watch?v=lgNAGu7zkKM
Thread where plugins were identified as the cause:
https://www.reddit.com/r/DeckSupport/comments/xyg86x/comment/irh7zam/
when you have a lot of styles, with a lot of options, You might find that it be tedious to navigate... I propose that style settings can be collapsed by default and then manually expanded. alternatively put the settings on a secondary page
As the title suggests, I am unable to install any themes. Every other plug-in works perfectly but for some reason, trying to install themes from css loader doesn't work. Clicking on "install" does nothing. I don't see any error. I have re-imaged my Deck 3-4 times now and the result is the same.
basically if there's a dropdown of patches, and a component can apply to a few of them, it might be nice to throw the component in on only those rather than all the time.
Today client stable update (1/02/2023) seems break css loader, only coloured toggle works.
Theme installed:
Language used: Italian
Hello, when I was using it, I clicked install, but there was no response, and the theme could not be downloaded
May I know if there's a way to have the CSSLoader changes for Steam Big Picture Mode in Windows?
After an Update by decky all themes are still in the quick Access Menu but do Not work
Since updating to CssLoader v1.5.0 my theme (SteamDeck U) which styles the keyboard is now working in desktop mode (with no changes), but I can't navigate the keyboard with the thumbstick. This could also be a Steam bug, I'm not sure
So I've tried both installing through the plugin loader and manually copying and pasting the github files in desk mode. I've changed the permission on all the folders to view and edit on desktop mode, but nothing has changed. Is there some separate permission that I need to provide, either to the plugin or plugin loader so it can see the folders? They are structured the same way as the github is.
Some OS update has removed Decky Loader for me, so I had to reinstall it. All of my plugins remained after previous install, but CSS Loader now thinks that all of the changes I made before the reinstall are the "default" look of the UI, making me practically stuck with all the changes. I can apply more changes on top, but flicking my current theme back and forth does nothing.
Is there any way to restore the default CSS look?
Reinjecting seems to fail on the latest dev branch. No idea why yet
I went to grab some themes and it wasn't connecting to the database for themes and when i exited it said the plugin failed to initialize it seemed to also affect Audio Loader whatever it was
Currently, themes seem to be haphazardly organized in the main plugin UI. It is annoying to try to find a certain theme because there is no easy-to-understand sorting (if there is any) for the user. It would be preferable if all themes were organized in alphabetical order so users could easily navigate to the theme they're looking for.
For easy editing I am loading the css file from url. It works but to see the changes the browser cache must be cleared and the Deck must be restarted.
shared.css
@import url("https://chrisandriessen.nl/steamdeck/shared.css");
First off, Your decky loader fork works great on Windows. But the CSS loader calls some platform-specific code for Linux in css-utils.py and css-inject.py. Such as getting the user home path and the UID. I have encountered any additional platform specific code yet that throws exceptions in your Windows Decky Loader fork.
The home directory should be retrieved using pathlib and on Windows the EUID/UID should be ignored. Changing that made the CSS loader work great. I am having no problems with themes (though for some reason the store won't work properly, it seems to download the ZIP file and then fails to unzip it to the themes directory, so manual installation of the themes is required)
I just updated Steam OS to version 3.4.6 on the stable channel and CSS Loader is now displaying a message that it failed to initialize. It says to try restarting the steam deck, which I've tried a few times. I've also tried uninstalling and reinstalling CSS Loader. I should mention that I initally had issues with one other plugin "Audio Loader", but I have sense got that one working again by restarting the deck.
I just got my steam deck dock and realized that when it connects to an external display, nearly all the themes are messed up - So, I am looking for a way to temporarily disable all the 3rd party CSSs.
Story Voice Use Case:
As a theme user I want to configure complex values like Strings, colors, image URLs, etc. through the Plugin UI and have the theme uses these values.
Is it possible implement a system to pass values configured in the UI into the CSS scripts so that they can be used in a theme?
Even something as simple as replacing with the value entered in the UI would allow for some greater flexibility for the average theme user. It would also prevent developers from having to make a bunch of CSS files for colors and stuff.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.