Report Blog Entry
Last updated: 17/03/24 (DD/MM/YY), ~9:20 PM CET.
THE LENGTHY INTRO ⫻
Predicament: I value my eyes. By extension, I value all dark modes everywhere because they're easier on said eyes. SpaceHey does not have a dark mode. I made one because, again, eyes. There's really not much to it besides that.
What you're seeing right now is a preview of sorts for the theme - more specifically, its base design along with the extra compartmentalized bits used for comments and the like. In stark contrast to SpaceHey's clean, generally ultra-bright styling, I wanted At Night to live up to its name (to some extent, anyway) by going down the route of using softer, duller shades of purplish blue on almost every side, combining it with sharper / lighter shades of blue for extra contrast here 'n there and a sort of rich lavender(?) for links + other various objects of note. Point being, though, you'll be seeing a lot of blue.
There are a few (mostly important) things worth noting, though.
- This theme is no longer in beta! There are, of course, still a few holes here and there that demand patching, along with some stylistic choices that could do with some revising - but for all intents and purposes, At Night is mostly complete. More than I could've asked for when I started laying its foundation out two-ish weeks ago.
- That said, a lack of styling may be intentional. Profiles, blog entries, and group pages are all untouched for an ideally obvious reason; they may contain styling of their own, and because At Night comes in dead last as far as load order's concerned, it would inevitably clash and create a mess.
- It's created based on my preference. (Alternatively: I am a selfish bastard.) I love purple, blue, and purplish blue to death. They will always be non-negotiable. Everything else is (mostly) open to discussion and subject to change.
I think that just about covers most of what I wanted to say. Onward!
THE ACTUAL THEMING PART ⫻
To make this work on your end, you'll need two things.
- A browser that supports most present-day CSS3 pseudo-selectors and pseudo-classes. Judging by the few W3 specs I read, this essentially means "newer than ~2017" which I'd hope shouldn't be a problem for anyone, yeah?
- Stylus, the local CSS "injector" that made this thing possible in the first place. Installation depends on your browser: you can get it for Chrome and Firefox. (Opera used to be part of this lineup, but in the time since this blog was written, they've removed it from their addons page for some reason. soz!) If you're an annoying hipster like me and you're using a Chromium fork that disables the Store, load the unpacked version from here.
All that leaves us with is actually styling the site, so bear with me for a minute. (Or don't if you've already gone through this before, I won't judge.)
- Head to the SpaceHey homepage.
- Stylus should be comfortably running in your Extensions tab somewhere at the top. Or on the side. Or wherever else. Either way, click on it to open its menu.
- Amidst the handful of buttons, you should see "Write style for:" followed by "spacehey.com/this URL". Click on spacehey.com.
- You'll now get a nice 'n cozy editor interface in a new window. Look to the side and find the Import button.
- Here's the kicker: copy all the text/code from here (as stated in the initial comment, starting from
@-moz-documentonwards) and shove that into Import's textbox. - Click on "Overwrite style."
- Give the style whatever name you want and then save it.
※ If you're updating the theme, repeat these steps but delete the previous version first.
Bonus:
You can now integrate a slightly stripped-down version of the theme into your bulletins. Similarly, you can also integrate a less stripped-down version into your profile, if that tickles your fancy. Upon creating your bulletin, enter HTML mode (the <> icon) and throw all of that into a <style> tag, as you normally would. Same goes for the profile (save for the HTML mode bit, obviously).
+ Thanks to Cross for the suggestion.
Congrats! If everything has gone according to plan and nothing crashed and burned in the meantime, you should now have a (mostly) styled, easier-on-the-eyes SpaceHey. Now all that's left is to bask in its, uh... I mean, we'll call it glory, it's just that I have some reservations about that.
It probably goes without saying, but if you have any inquiries or questions (or compliments, wink wink nudge nudge), holler at me.
Comments
Displaying 20 of 21 comments ( View all | Add Comment )
An
OMG THAT LOOKS AMAZING!! 👀👀
A nativ dark mode for spacehey has been on my to-do list for ages, but I just can't find any time for it... maybe someday
Anyways, your theme is AMAZING!!
actually flat-on-my-ass flabbergasted to hear this straight from the mouth o' the lion, but thank you so much!!!! a native setting would most certainly be appreciated, but after all the steps taken to getting here, i can totally get why you might see it as an arduous time-sink ^^;
by Ikoe; ; Report
fl00f_rawra
Hey, just thought to let you know that the link to the Opera extension only brings me to a page saying that it can't be found. Maybe it was removed for opera?
pardon my dust. just checked; it does in fact look like they've nuked it for reasons unknown, as well as their Chrome Extension add-on that would otherwise assist in installing Stylus via... well, the Chrome extension. lol. not entirely sure how to work around that; will just remove Opera from the listed browsers for the time being
by Ikoe; ; Report
chzyミ★
YESSS this bright light hurtss but this is 10x better
Eev
This just made the site wayyyy more usable for me, thank you so much, my eyes can now live without fear
Atticus Atlas
Absolutely in love with this thank you so much for it :0
One problem though, do you know why the style is applying to my profile but no one elses? messes w the bg and link colors. Is this happenin w anyone else??
ahhhhh crap.
to note; you are not Having A Moment or anything—this is in fact an issue on the theme's part born out of the limitations that come with working strictly in CSS. i think i can patch this and file out an update by the end of the day, if not in a few hours, so eyes out and all that. at-length rundown below if you wanna know why it's borking.
laying groundwork first; At Night does its thing is by pointing specific "clusters" of CSS at specific pages or subsets of pages, mainly to avoid styling conflicts or declaration redundancy. so as a basic example, i can say that i want
body { background: blue }on a specific, one-off URL such asspacehey.com/home(because that subpage is "static" - there are no variations of /home where it would add anything else like?id=12345or whatnot, unless and only unless you're reloading the page through spacehey itself, usually after a 5xx error, at which point it suffixes it with?reload) OR on a URL that starts with something. the latter is how At Night styles any and all pages that have some kind of suffix to them - search results, comment pages, bulletin / blog deletion prompts, pins, subscriptions...but more related to your case; that also includes friends lists, because one of those starts-with URLs is, verbatim,
https://spacehey.com/friends. and because your vanity tag is 'friendshapedplant' - well, you can see how that meshes in a "technically not wrong but" sort of way :woozy_face:by Ikoe; ; Report
OH I see! Damn, that makes sense though! Take all the time ya need, it ain't unbearable just wonky!
by Atticus Atlas; ; Report
pong
you can update/'reinstall' the theme now; it begets a more thorough approach to all starts-with entries, but this'll suffice. thank you for chiming in!
by Ikoe; ; Report
Hazel
Holy shit dude! This is life changing, thanks for making this. My eyes are eternally grateful haha
Jorjee
Yesss, thank you!!! Not only does it ease my eyes, but its DAMN PRETTY TOO.
ZoranaDragon
This is going to help with the eyestrain the bright white causes for me. Thank you for making this, it looks great!
Melrose
Oh thank you so much, I was looking for something like this for the last few months!
Got it working, stylus can be a little trippy on Firefox sometimes.
by Melrose; ; Report
Xziggy zombieX
hellooo xP does it also work if U click on a blog ?
quoting note #2;
this is unfortunately one of those details that i can't fix through CSS alone. soz!
by Ikoe; ; Report
OHHH okie! i 4got that blogs can have their own themes since i am just starting to use spacehey more often again xD thank U 4 answering =D
by Xziggy zombieX; ; Report
✝ C&SP ✝ (moved accounts)
I've got a question...
If I put a custom layout on my bulletins, will the Stylus script mess it up?
Also wondering if you'll ever turn this into a profile/bulletin layout, I'd love to use it on my bulletins
by ✝ C&SP ✝ (moved accounts); ; Report
the theme covers /bulletin and its respective elements, so yeah, custom <styles> would clash with it, most likely. you can manually undo this by simply removing every mention thereof - in stylus itself, these are entry ~43 in code block 1, entry 2 in code block 8, and entry 1 in code block 9; in the CSS itself, these are (at least in this version) at line 9, line 191, and line 200.
an emphasis on "manually" because unlike blogs, stylized bulletins - at least from personal experience - are notably rarer to come by than the former, partly due to the temporary nature of the thing. to that end, it seems sensible enough to make a trade-off; potentially mess up the layout on someone's five-day bulletin in favor of making the theme more consistent for the average user.
regarding the layouts; i can whip up a standalone bulletin CSS in a few hours. will attach it to the bottom of the blog once i do so. profile's gonna be a tiny bit more time-consuming—at best, i'll have it done by tomorrow. at worst, some point during the weekend. will see.
by Ikoe; ; Report
so that was a gross overstatement with regards to the ETA. in any case, enjoy. feel free to reply to this if any issues pop up w/ the CSS down the line.
by Ikoe; ; Report
Kurante !! ᓚᘏᗢ >:)
THANK YOU SO MUCH I CAN FINALLY REST MY EYES
BobieBobs
OMG THX SM!!!!!! MY EYES HAVE BEEN SAVED I CAN FINALY READ THANK YOU!!!!!!!!!!
SATURN RAZORBLADE
hi i'm using this! i love purple so its very much to my tastes :D
__x3m0lif3styl3__
It looks so cool!!!
yayoi22
Yessss let me guess, when you say “a chrome fork that disables the store” you mean ungoogled chromium right?? Don’t know if i wanna be known as a hipster, but i’ll take it if it prevents google knowing more about me than i do :3
right you are! i've been using marmaduke's builds off of woolyss' chromium archive for aaaages now and i love it to bits. amen to that, btw :p
by Ikoe; ; Report
oooooh nice I wasn't aware of alt. builds to the ones supplied by the ungoogled-chromium project itself! sucks woolyss doesn't have a macos arm64 build of ungoogled.... I was really looking for an up-to-date build, i'm running is still v92 :( oh well, *fingers_crossed*, no hackers get me
by yayoi22; ; Report
used to go with the project's git builds until i realized i was lagging behind by several versions as well. talk about cross-platform suffering!
that said, i wish i had something besides "just patch/build your own, lol" but 1. it's a lazy response(!) and 2. the woe of having to build chromium is not lost on me. i blame gentoo and portage.
*shudders*by Ikoe; ; Report
yeah I mean it's not that i couldn't build it myself, I just really, really could not be assed doing it \''/ i've played with arch linux enough, and owning a mac was supposed to save me from those nightmares, not give me trauma flashbacks... maybe there's room for me to contribute an automated build process to someone's Github repo, thanks for the linx!
by yayoi22; ; Report
neisha<3
this is so cool!!! love this
ty, happy to hear that! ^ᴗ^
by Ikoe; ; Report
✨Lo✨
Oh this is devastatingly cool
ratscallion
this is so kewl!! gj!!
thank ya kindly! ^^
by Ikoe; ; Report
ik3da
> I love purple, blue, and purplish blue to death. They will always be non-negotiable.
behold, the most correct of hue-based opinions!
seriously, great theme! when i finally get around to learning more intricate profilemancy i’ll probably use your source as a reference, just going off appeal ;3
it all comes together and looks just sublime.
immensely happy to hear that—though i do have some reservations about being a reference point, if only because of Perfectionism™ and the troubles that come with it, blarg.
(also, using any other palette of colors for a dark mode would probably classify as heresy, frankly :v)
by Ikoe; ; Report