- cross-posted to:
- technology
- cross-posted to:
- technology
Exactly a week later, hello again!
I was so flattered by people’s reaction to my last post - thank you for making me feel so welcomed by this community! I’m still toying with icon redesigns, but I noticed that people were equally (if not more) interested in the theme ideas I posted - so I’ve spent the last week trying to make them a reality! I call them Hive Light and Hive Dark, and I think they’re ready to share with you all.
I was able to incorporate lots of tweaks to Beehaw’s UI, including:
- Customisable levels of minimalisation
- Consistent padding and spacing site-wide, increasing legibility and cleanliness without sacrificing too much information density
- Repositioned various UI/UX elements to make Beehaw easier and more intuitive to navigate
- Consistent bee-themed colors! Lots of yellows, browns, and blues that play nice with each other and pass accessibility standards
- Hover effects to reduce unnecessary line breaks with long hyperlinks
- And more! But not that much more, it’s just some CSS after all ;)
Hive Light:
Hive Dark:
There are more screenshots on the GitHub!
Installation is pretty simple as well:
- Install Stylebot - this was the only CSS extension I found that worked reliably across browsers and consistently applied settings. YMMV with other extensions - Stylus just didn’t work well for me :(
- Check your Beehaw settings and select “darkly” if you want to use Hive Dark, and “litely” if you want to use Hive Light
- Copy and paste the contents of either Hive_Light_Theme.css or Hive_Dark_Theme.css from the GitHub page into the “code” section of Stylebot
- Et Violà!
This isn’t my first time designing a UI, but it is my first time doing it with CSS edits, so I fully expect there to bugs and inefficient code. I would love to hear your feedback and incorporate new ideas into future versions. And feel free to copy my homework! If I can figure out this CSS stuff in a week, so can you, and I’d love to see what other people create.
One caveat: the Lemmy v0.18.0 release includes lots of (really awesome) updates to Lemmy-UI that will break this theme. I don’t know when Beehaw will update, but I imagine it’s imminent, so there will be more work to be done soon I’m afraid.
Thanks for reading, and take care!
- fishy 2.0 (he/him) ( @fishy_2_0@beehaw.org ) English2•1 year ago
This looks really good i like it a lot hope you dont need to change much for 0.18
- Thalestr ( @Thalestr@beehaw.org ) English8•1 year ago
Woah, very nice! Would be cool to see these as official themes in the settings page.
You’re too kind :) I think themes are a great way to differentiate instances, and having some community-made Beehaw themes available would be really cool!
- Nerd02 ( @Nerd02@forum.basedcount.com ) English2•1 year ago
It’s actually pretty easy on the admin side, there’s a guide on the lemmy docs and all of that. If the beehaw admins saw this they could add it without too much trouble.
- sheinar ( @sheinar@beehaw.org ) English7•1 year ago
Just given Hive Dark a go and it looks really good! Definitely adds a lot to the feel of Beehaw. Thanks a lot, and good luck with the inevitable v0.18.0 breakage!
- Dee ( @Dee_Imaginarium@beehaw.org ) English7•1 year ago
and good luck with the inevitable v0.18.0 breakage!
I lol’ed because you’re absolutely right, hopefully the UI elements don’t change too much under the hood with the update where OP doesn’t have to redo everything from scratch.
Thank you! I played with lemmy.ml a bit since that’s been updated, and it looks like ~80% of what I did should still work. But it does reveal the issues with making these client-side changes
- Nerd02 ( @Nerd02@forum.basedcount.com ) English3•1 year ago
They look great, thanks for sharing! I’m “stealing” these for my instance, can’t wait to see the 0.18.0 implementation.
Can’t steal what is freely given! Hope you enjoy
- Sea of Tranquility ( @SeaOfTranquility@beehaw.org ) English3•1 year ago
Can you add a customization option for the hexagonal buttons? I really liked them!
I tried, but it’s either beyond the scope of CSS edits, or simply beyond my abilities haha. Maybe proper themes installed to the instance could make that possible though!
- fishy 2.0 (he/him) ( @fishy_2_0@beehaw.org ) English3•1 year ago
This looks really good i like it a lot hope you dont need to change much for 0.18
- Whimseymimple ( @Whimseymimple@beehaw.org ) English2•1 year ago
Beehaw Dark is exactly what I’ve been looking for as a starting place, and I can adjust minimal things here and there if I need to. Thanks for taking the time to make and share these with us!
Awesome! Happy to have provided a semi-decent place to start. I’m curious what things you end up tweaking :)
- Whimseymimple ( @Whimseymimple@beehaw.org ) English1•1 year ago
Just a few tweaks, because you’ve done so much of the work that I needed already. (I think the hardest part of re-theming is picking colors that work well, and you did that to perfection.)
- upvote hover and activated upvote color
- navbar links and hover
- comment text color (this bit is personal preference due to some color deficiencies on my end)
- updated info root color to match theme
- change modlog colors to my own preferences based on your themed colors
One of the reasons I find theming colors so difficult is that I have color determination deficiencies (not full color blindness). One reason I love my web services job is that my organization has a marketing team to determine the colors, so I can do my CSS theming for our products based off the pre-determined hex codes. :D
- frogman [he/him] ( @frogman@beehaw.org ) English2•1 year ago
this is awesome, i’m gonna be using the dark theme for a long time
- tom42 ( @tom42@beehaw.org ) English2•1 year ago
@Sintamo@beehaw.org Very nice!
I made a fork and put in a one file solution with@media
queries.https://github.com/tasmo/Beehaw-Hive-Theme/commit/c30cd19ad383e2e7fd9166405d0bb11a9c7ceb98
If you want to I can open a pull request. If not, never mind. :)
Edit: Line breaks added.
- Dekthro ( @Dekthro@beehaw.org ) English1•1 year ago
I am using it currently and its great! Great job.
- dosidosankofa ( @dosidosankofa@kbin.social ) 1•1 year ago
yo that’s niiiice