Lemmy Custom Theming/CSS

github.com GitHub - HrBingR/Lemmy_CSS: Providing custom CSS for Lemmy instances

Providing custom CSS for Lemmy instances. Contribute to HrBingR/Lemmy_CSS development by creating an account on GitHub.

So I made a few custom Lemmy themes/CSS tweaks that I think the community would appreciate.

It aims to provide more color options, as well as reduce whitespace and make it easier to follow comment chains. Created it for use with beehaw, but should work with any Lemmy instance.

Just make sure to use the default litely theme in your Lemmy settings before testing these out, they were built with that in mind.

Please let me know if you have any other ideas or improvements, and feel free to submit pull requests!

How to use: Install any custom CSS extension/plugin for your browser, and paste the CSS in there. I personally use Amino for Edge and filter the CSS for the beehaw.org domain, but any custom CSS extension or plugin should work.

36 comments

https://userstyles.world/style/10250/ancom-red-meant-to-be-used-with-darkly-red I also made one!
Feel free to add it, although I haven't really cleaned it up yet.
- That's awesome! You're more than welcome to submit it to the repo as well if you want to, otherwise I'm glad other people are doing Lemmy theming as well - I'm all for expanding user choice.
  
  submitted a PR, my first since 2016 hahaha.
- is there a way to work smoothly between a userstyles hosting site and a github repo? or do you have to copy and paste back and forth all the time?
  
  I don't make many changes, so, I've just been copy/pasting.

can’t wait for a Catppuccin theme, maybe I should make one🧐
- I can take a look when I have a bit more time, otherwise feel free to make one and submit a pull request :)
- Hello! I ended up making some Catppuccin themes. Tried my best to follow the style guide, and made themes in all 4 styles, let me know what you think!
  Latte (Litely):
  
  Frappe (Darkly):
  
  Unfortunately it won't let me upload more than these two images, but check out the repo and try then out!

@HrBingR so these are user installable in the browser (through stylus or whatever extension)? How nice!
- Yup! Doesn't rely on instance owners adding more themes to their instances, can be used by any user on any instance that has the default litely theme installed.

How do you make this a selectable theme in Lemmy-ui settings?
- Unfortunately you can't; it would need to be implemented by the owner of the instance to make it selectable there, but these themes have been built to work with the default litely theme on any Lemmy instance, all you need is a browser plugin/extension that can inject custom CSS in order to use these themes.
  
  Unfortunately you can’t; it would need to be implemented by the owner of the instance to make it selectable there
  If you manage to create a polished theme we can have a look at integrating it. It's not that hard technically: https://join-lemmy.org/docs/en/administration/theming.html
  See also: https://beehaw.org/post/537486, https://beehaw.org/post/432603

This is a great base for people to create their own. I much prefer the wider page width to Lemmy's default on desktop.
Personally, though, I find the box outline colors in these themes to be a little loud.
I tweaked the CSS and made it look a bit more understated.
- Okay that makes sense, will try to create a few more subtle themes, thank you!
  
  Very nice!
- Alright, I've added some 'quieter' options that look a lot less colorful for those that want something a bit more subtle, both for the light and dark themes. Thank you for the feedback!

36 comments