Hopefully this will help: https://lemmy.justin.rs/post/56612
this post was submitted on 11 Jun 2023
5 points (100.0% liked)
Lemmy Support
4651 readers
23 users here now
Support / questions about Lemmy.
founded 5 years ago
MODERATORS
Were you able to figure this out? Because honestly, this post is already 10x more helpful than the theming page in the Lemmy docs.
Yeah I figured it out (check out my instance), a few hiccups here and there but I basically did the same thing I posted up there and it now loads correctly.
The problem wasn't from my end, lemmy-ui didn't move fully to bootstrap 5 when I made that post.
After an update to pre version 0.18.x, I could use bootstrap.build and follow the rest and the theme loads.
Post 0.18.x, when the devs reintroduced some bundled themes like the vaporwave ones and others, my theme broke again, bootstrap.build doesn't seem to work anymore. They now also require three files _variables.theme.css, theme.scss and theme.css
Now I'm not a web frontend dev or anything like that so I ended up just copy and renamed the vaporwave theme and edited it to what I want.
Thank you SO much. There were a lot of blanks to fill in with the doc page. I was putting the theme files in subfolders rather than renaming (though I suspected that was my issue). Then it says to use v4 themes, and those KIND of worked, but kind of not. v5 seems good so far. Still a bit more to figure out, but you've been incredibly helpful!
Do you have any idea how to uninstall a theme? I installed one css file incorrectly, and then later deleted it. It's still showing up in my theme list though. Any ideas?
Maybe it's cached... have you tried in incognito or force reload? If not, maybe try manually deleting the nginx cache if you set up Lemmy with nginx.
I think you're right, as the entry is gone as of this morning. I was force refreshing, and I even restarted the docker-compose stack (thinking that would clear anything), but it still persisted. I'll have to look into the nginx cache. Thanks for chiming in!
Sorry to keep coming back to this thread, but so far this is the only place I've found discussing themes in a remotely helpful way.
What are you using to generate the CSS file from the two SCSS files?
I copied the lightly theme and updated/added a couple of variables. I then used bootstrap.build to generate the CSS file, but it breaks the layout (see screenshot). Is there some other way to generate the CSS? Surely you aren't editing it by hand, are you?
If you see my response to the other comment on this post, I basically had the same issue, my theme looked like the screenshot you attached when generating with bootstrap.build. I ended up not using it at all.
I didn't want to get into bootstrap, so yes I edited it by hand. My theme isn't perfect yet, it took me 2 hours or so by editing the vaporwave theme.
OK, thanks for the input. My theory at the moment is that Lemmy doesn't actually need the SCSS files. If you look at the CSS file, it doesn't reference the variables at all. That's why you've had success modifying the CSS by hand.
Somebody in the Matrix chat said that they pulled down the lemmy-ui code so that they could generate the CSS file in the same way that the built-in themes do. I'm going to take a look at that now and see if there's a way to extract that portion.
Ah that would make sense as to why the SCSS files don't do anything.