Hello everyone,
I managed to make some minor changes to Lemmy’s default CSS Theme and uploaded that as a new theme which I set as the default for my instance.
I’m looking forward to making much larger changes, but I wanted to share the process since it took me a while to understand and thought other admins might find it interesting.
- Download the theme you want to customize and its corresponding SCSS file.
In my case I just did darkly.css and _variables.darkly.scss
-
Edit them You can override classes and properties of the default styles.css by adding them to that theme and giving them a higher priority with !important.
-
Change the name of the files, for example “defaulttheme.css” and “_variables.defaulttheme.scss”
-
Upload the files to your server to the lemmy install folder. It’s probably something like “/srv/lemmy/<yourdomain>/volumes/lemmy-ui/extra-themes/”
-
Enable the theme on your profile to make sure everything looks alright.
-
As instance admin, go to main settings and set the new theme as the default for all users.
In my case what I did was simply removing the NSFW blur, which doesn’t make much sense to have if you’ve already agreed to see NSFW content. Anyone who still wants to have the blur can switch back to any of the other themes.
I’m not skilled at CSS, but I’ll try to make some more changes to customize the site’s experience.
Anyways, I hope somebody will find this useful.
Thank you for the tutorial! Sadly I don’t have my own instance, so I guess my only options are contributing a theme or use extensions like Stylus
If you have CSS knowledge, maybe both Yiffit and Pawb instances could benefit from an awesome custom theme :3
Well I don’t know anything about CSS, but I’ve taken a look at the files and it seems that making a custom theme is as easy as changing the hex values for colors, so I might give it a try.