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.
@Wander A more quality (but more labor intensive) solution would be to have an account setting that toggles a short CSS file containing overriding CSS for the adult image blur. This way, users could choose to have or not have that blur regardless of which theme they chose (without having to have two separate copies of each main CSS theme to achieve that).
Sorry for the late reply. I finally figured out why I wasn’t able to get my reply sent. Apparently if you reply from Lemmy to Mastodon you need to choose a language or otherwise it won’t work.
In any case, I really want to add the toggle to the UI, but I would first need to learn a bit more about how it’s set up currently. I know it uses typescript, but maybe I can simply add some vanilla JS to the exported html files in the docker container.