- cross-posted to:
- creative
- cross-posted to:
- creative
Not sure if it’s more relavant to Creative or Technology, so cross-posting here from: https://beehaw.org/post/743965
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!
- Helix ( @Helix@beehaw.org ) English23•1 year ago
Hey, looks awesome. Maybe you can get in touch with @HrBingR@beehaw.org who made this repository: https://github.com/HrBingR/Lemmy_CSS/
and @UrLogicFails@beehaw.org who created an “official” colour scheme together with me
as well as myself, you can reach me in Discord or Matrix, just send me your respective username in a Lemmy PN and I’ll contact you.
I am one of the backend admins and I’m pretty sure we can make this official somehow. I will talk to the site admins (=moderators, community managers, bosses) about this. I’m sure we would like to have a few Beehaw-specific themes to select for our users.
Pinging @alyaza@beehaw.org @Gaywallet@beehaw.org @Lionir@beehaw.org just FYI about the current state of things
- alyaza [they/she] ( @alyaza@beehaw.org ) English19•1 year ago
already took notice of this and dropped it in the community discord for additional feedback (although i think i linked to the creative crosspost, not this tech one), it’d be good to make it official if possible and have a few options to pick from with more instance-aligned themes yeah
- useful_idiot ( @useful_idiot@lemmy.eatsleepcode.ca ) English12•1 year ago
What a fantastic but subtle way to differentiate instances
- promitheas ( @promitheas@iusearchlinux.fyi ) English6•1 year ago
This looks very clean, well done! Personally for me the yellow is too harsh, but I still think it looks great :D
Appreciate it! I think a stretch-goal for the future could be a “muted colors” toggle, to tone things down a little while keeping the rest of the changes
- iuseit ( @iuseit@iusearchlinux.fyi ) English6•1 year ago
This looks great
- derelict ( @derelict@beehaw.org ) English6•1 year ago
Looks better than both old and new Reddit!
- M. Orange ( @miracleorange@beehaw.org ) English5•1 year ago
This is amazing!
I would like to write more, but I just woke up, so brain no worky.
- Steeltooth493 ( @Steeltooth493@kbin.social ) 3•1 year ago
I think that Hive Dark looks incredible, great job!
- RiseAndShine ( @RiseAndShine@beehaw.org ) English3•1 year ago
This looks amazing! I would love to see these implemented/added officially into Beehaw!
- Camus ( @V4uban@beehaw.org ) English3•1 year ago
Looks awesome
- flora_explora ( @flora_explora@beehaw.org ) English2•1 year ago
Amazing! Thanks so much :)
Did I miss anything though or is this only an option for desktop PCs? I cannot install Stylebot in an android browser, right?
- Mewio ( @Mewio@beehaw.org ) English2•1 year ago
This looks awesome, thank you!
- Dekthro ( @Dekthro@beehaw.org ) English1•1 year ago
Awesome!
- pushka ( @pushka@beehaw.org ) English1•1 year ago
Rather than using GitHub, have you heard of GreasyFork? it’s a user-style manager library website where people can install a script with one click, and their browser extension links it to that URL, so you can make new versions and it’ll automatically push it out to everyone - and auto-installs with browser sync on a new PC / new browser login