lemmy-ui
lemmy-ui copied to clipboard
LemmyNet
Draft: Generate theme css
This adds a formal build process for the existing theme files, which should make it easier to update the themes in the future.
Themes can be built using two new npm scripts: themes:build and themes:watch. The resulting CSS files still have to be checked into git, as compilation of multiple external SASS files is a bit hard to integrate in the current build pipeline (and I want to keep this PR as non-invasive as possible). Any ideas are welcome though :slightly_smiling_face:
There are quite a lot of non-functional changes in the compiled theme files. As far as I've seen, those are all just varying selector order or different formatting of colors (#fff vs #ffffff). Let me know if there are any manual edits or hacks that I missed.
[Edit] I just noticed that the -red themes have a few color differences (e.g. for hover states) that are hard to reproduce using the Bootstrap variable overrides. I'll have to look into it.
I also think this is a good step towards #703, even though it still uses Bootstrap 4. Switching to Bootstrap 5 is a bigger change, as there are quite a few breaking changes that lead to a lot of changes in our tsx templates...
@fheft I'm new to the codebase, so apologies for the question, but is there any reason we couldn't add sass/sass-loader as a dependency and use something like this to import bootswatch/bootstrap SCSS for each theme that is getting ported over?
@ayan4m1 I wasn't around when that decision was made, but @dessalines or @Nutomic might be able to tell you more.
Fixed the wrong colors in litely-red. Now all colors should be the same as before this branch or at least match visually.
There are some very minor deviations that previously seem to be added by manually changing the compiled CSS files. But I think for future changes it's better to rely on the existing Bootstrap color transformations instead of manually defining every single color just to be exactly the same as before.
@ayan4m1 Can we use sass-loader to build separate CSS files for each theme during build time? I think it's beneficial to keep having separate theme CSS files instead of bundling them all together into one big styles.css, e.g. only loading what's actually used (smaller network footprint).
This is a big one for us, IMO. Thanks for your work here, @fheft, let's keep it going. 👍
