101
submitted 1 year ago by Sintamo@beehaw.org to c/creative@beehaw.org

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!

top 19 comments
sorted by: hot top controversial new old
[-] Thalestr@beehaw.org 6 points 1 year ago

Woah, very nice! Would be cool to see these as official themes in the settings page.

[-] Sintamo@beehaw.org 3 points 1 year ago

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@forum.basedcount.com 2 points 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@beehaw.org 4 points 1 year ago* (last edited 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_Imaginarium@beehaw.org 4 points 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.

[-] Sintamo@beehaw.org 2 points 1 year ago

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@forum.basedcount.com 3 points 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.

[-] Sintamo@beehaw.org 4 points 1 year ago

Can't steal what is freely given! Hope you enjoy

[-] SeaOfTranquility@beehaw.org 3 points 1 year ago

Can you add a customization option for the hexagonal buttons? I really liked them!

[-] Sintamo@beehaw.org 2 points 1 year ago

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@beehaw.org 2 points 1 year ago

This looks really good i like it a lot hope you dont need to change much for 0.18

[-] Whimseymimple@beehaw.org 2 points 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!

[-] Sintamo@beehaw.org 2 points 1 year ago

Awesome! Happy to have provided a semi-decent place to start. I'm curious what things you end up tweaking :)

[-] Whimseymimple@beehaw.org 1 points 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@beehaw.org 2 points 1 year ago

this is awesome, i'm gonna be using the dark theme for a long time

[-] fishy_2_0@beehaw.org 2 points 1 year ago

This looks really good i like it a lot hope you dont need to change much for 0.18

[-] tom42@beehaw.org 2 points 1 year ago* (last edited 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@beehaw.org 1 points 1 year ago

I am using it currently and its great! Great job.

[-] dosidosankofa@kbin.social 1 points 1 year ago

yo that's niiiice

load more comments
view more: next ›
this post was submitted on 24 Jun 2023
101 points (100.0% liked)

Creative

4258 readers
1 users here now

Beehaw's section for your art and original content, other miscellaneous creative works you've found, and discussion of the creative arts and how they happen generally. Covers everything from digital to physical; photography to painting; abstract to photorealistic; and everything in between.

(It's not mandatory, but we also encourage providing a description of your image(s) for accessibility purposes! See here for a more detailed explanation and advice on how best to do this.)


Subcommunities on Beehaw:


This community's icon was made by Aaron Schneider, under the CC-BY-NC-SA 4.0 license.

founded 2 years ago
MODERATORS