shmanioNov 9, 2024

Standard theme with custom accent color

https://lemmy.world/post/21828556

Standard theme with custom accent color - Lemmy.World

I’ve modified the normal Jellyfin theme so that the accent color can be changed. The idea was to put some orange in the UI during halloween, and I got carried away. It is now completely configurable with a single variable and allows for easy seasonal changes, so I’ve decided to share it. Here is the result: [https://lemmy.world/pictrs/image/7efd0a3c-eb61-4ebb-b984-2ae90f93deff.png] [https://lemmy.world/pictrs/image/8b2b86dd-19bb-464a-aa11-dbf343a920b8.png] [https://lemmy.world/pictrs/image/0e44ffd6-b7c9-457f-bc5a-54b76987b7d8.png] I generally dislike custom themes, so my goal was to change as little as possible. Indeed, if used with a hue of 195, the theme should be exactly the same as the default one. What do you think?

Show threadSatyrSackNov 9, 2024

To install the theme, put the contents of theme.css in Custom CSS code and set a hue:

@import url("https://glcdn.githack.com/smaniottonicola/jellyfin-custom-accent/-/raw/master/theme.css"); :root { --custom-hue: <value>; }

If I want to take that theme.css file and just save it to my server itself instead of having Jellyfin fetch it each time the CSS loads, what would I put in the @import rule? I placed the file in my Jellyfin Docker container’s config folder and used @import "/config/theme.css”;, but that does not seem to change the CSS at all.

Show threadshmanioNov 9, 2024

You should put it in Jellyfin’s web root folder (paths are relative to it). In the official container it’s /jellyfin/jelyfin-web.

Then you just @import “theme.css”;.

Show threadSatyrSack
Where on my actual server filesystem is /jellyfin/jellyfin-web? I am using the official container image. Is that somewhere in /config or something?
Nov 9, 2024 at 10:26pmWeb
Show threadshmanioNov 10, 2024

It’s a path inside the container, not inside /config. You should mount the file like this:

volumes: - /path/to/local/theme.css:/jellyfin/jellyfin-web/theme.css
Show threadSatyrSackNov 10, 2024
Great, that worked! Thanks.